Tier 8 — Data, Analytics & Conversion: GA4, GSC, GTM, Consent Mode v2

<!-- GA4 with consent mode v2 + custom dimensions -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}

  // Set default consent state (denied until user consents)
  gtag('consent', 'default', {
    'ad_storage': 'denied',
    'analytics_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'wait_for_update': 500
  });

  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX', {
    'send_page_view': true,
    'custom_map': {
      'dimension1': 'content_cluster',
      'dimension2': 'journey_stage',
      'dimension3': 'user_segment',
      'dimension4': 'author'
    }
  });

  // Send custom dimensions per page
  gtag('event', 'page_view', {
    'content_cluster': 'ai-search',
    'journey_stage': 'awareness',
    'user_segment': 'first_time_visitor',
    'author': 'joseph-anady'
  });
</script>

<!-- Google Tag Manager - Server-Side -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://gtm.thatdeveloperguy.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>

<!-- Fallback for noscript -->
<noscript><iframe src="https://gtm.thatdeveloperguy.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

<section class="gsc-dashboard" data-noindex="true">
  <h1>GSC Insights — Last 28 Days</h1>

  <div class="metrics-grid">
    <article class="metric-card">
      <h3>Total Clicks</h3>
      <p class="metric-value" id="total-clicks">--</p>
    </article>
    <article class="metric-card">
      <h3>Total Impressions</h3>
      <p class="metric-value" id="total-impressions">--</p>
    </article>
    <article class="metric-card">
      <h3>Average CTR</h3>
      <p class="metric-value" id="avg-ctr">--</p>
    </article>
    <article class="metric-card">
      <h3>Average Position</h3>
      <p class="metric-value" id="avg-position">--</p>
    </article>
  </div>

  <script>
    fetch('/api/gsc/summary?days=28')
      .then(r => r.json())
      .then(data => {
        document.getElementById('total-clicks').textContent = data.clicks.toLocaleString();
        document.getElementById('total-impressions').textContent = data.impressions.toLocaleString();
        document.getElementById('avg-ctr').textContent = (data.ctr * 100).toFixed(2) + '%';
        document.getElementById('avg-position').textContent = data.position.toFixed(1);
      });
  </script>
</section>

<script>
  window.dataLayer = window.dataLayer || [];

  // Page-level dataLayer
  window.dataLayer.push({
    'event': 'page_view',
    'page': {
      'category': 'guide',
      'cluster': 'ai-search',
      'author': 'joseph-anady',
      'published_date': '2026-04-15',
      'word_count': 12500
    },
    'user': {
      'segment': 'first_time_visitor',
      'logged_in': false,
      'consent_state': 'granted'
    }
  });

  // Event-level dataLayer (button click)
  document.querySelector('.cta-audit').addEventListener('click', () => {
    window.dataLayer.push({
      'event': 'cta_click',
      'cta': {
        'name': 'Get Free Audit',
        'position': 'hero',
        'page_id': 'ai-search-guide'
      }
    });
  });

  // Ecommerce dataLayer (purchase)
  window.dataLayer.push({
    'event': 'purchase',
    'ecommerce': {
      'transaction_id': 'TXN_12345',
      'value': 1497,
      'currency': 'USD',
      'items': [{
        'item_id': 'tier-3-bundle',
        'item_name': 'Tier 3 AI Domination Bundle',
        'price': 1497,
        'quantity': 1
      }]
    }
  });
</script>

<script>
  // Consent Mode v2 - default to denied
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}

  gtag('consent', 'default', {
    'ad_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'analytics_storage': 'denied',
    'functionality_storage': 'denied',
    'personalization_storage': 'denied',
    'security_storage': 'granted',
    'wait_for_update': 500
  });

  // Honor Global Privacy Control
  if (navigator.globalPrivacyControl) {
    gtag('consent', 'update', {
      'ad_storage': 'denied',
      'ad_user_data': 'denied',
      'ad_personalization': 'denied'
    });
  }

  // Update consent when user accepts
  function acceptAllConsent() {
    gtag('consent', 'update', {
      'ad_storage': 'granted',
      'ad_user_data': 'granted',
      'ad_personalization': 'granted',
      'analytics_storage': 'granted',
      'functionality_storage': 'granted',
      'personalization_storage': 'granted'
    });

    // Log consent for audit trail
    fetch('/api/consent/log', {
      method: 'POST',
      body: JSON.stringify({
        timestamp: new Date().toISOString(),
        consent_state: 'all_granted',
        gpc_signal: navigator.globalPrivacyControl || false
      })
    });
  }
</script>

// Client-side: capture form submission
document.querySelector('#audit-request-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);

  // Send to server-side endpoint
  const response = await fetch('/api/leads/capture', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      email: formData.get('email'),
      website: formData.get('website'),
      source: 'audit-cta',
      page: window.location.pathname
    })
  });

  if (response.ok) {
    // Track conversion in dataLayer (event continues server-side)
    window.dataLayer.push({
      'event': 'lead_captured',
      'lead_source': 'audit-cta'
    });
  }
});

// Server-side endpoint (Node.js example)
// /api/leads/capture sends to:
//   - Internal database
//   - Meta Conversions API (with hashed email)
//   - Google Enhanced Conversions
//   - LinkedIn CAPI
//   - CRM (HubSpot/Salesforce)

<section class="dynamic-content" data-segment-trigger>
  <!-- Default content (shown to first-time visitors) -->
  <div data-segment="new">
    <h2>New here? Start with our framework guide</h2>
    <a href="/guides/ai-search-optimization/" class="btn-primary">Read the Guide</a>
  </div>

  <!-- Returning visitor content -->
  <div data-segment="returning" hidden>
    <h2>Welcome back. Ready to get a free audit?</h2>
    <a href="/audit/" class="btn-primary">Request Audit</a>
  </div>

  <!-- High-intent (visited pricing page) content -->
  <div data-segment="high-intent" hidden>
    <h2>Schedule a 15-minute discovery call</h2>
    <a href="/book/" class="btn-primary">Book Now</a>
  </div>
</section>

<script>
  // Fetch user segment from CDU API
  fetch('/api/user/segment', {credentials: 'include'})
    .then(r => r.json())
    .then(data => {
      document.querySelectorAll('[data-segment]').forEach(el => {
        el.hidden = el.dataset.segment !== data.segment;
      });

      // Track personalization for measurement
      window.dataLayer.push({
        'event': 'content_personalized',
        'user_segment': data.segment
      });
    });
</script>

// Initialize CDP (Segment example)
analytics.load('YOUR_WRITE_KEY');

// Anonymous track
analytics.page({
  cluster: 'ai-search',
  author: 'joseph-anady'
});

// On signup/login - identify with persistent ID
function identifyUser(user) {
  analytics.identify(user.id, {
    email: user.email,
    plan: user.plan,
    signup_date: user.created_at,
    ltv: user.lifetime_value,
    engagement_score: user.engagement_score
  });

  // Track key conversion
  analytics.track('Account Created', {
    plan: user.plan,
    referral_source: getReferralSource()
  });
}

// Activate audiences via CDP destinations
// CDP automatically syncs:
// - Email lists to Mailchimp/ConvertKit
// - Custom audiences to Meta/Google/LinkedIn
// - Lead score updates to HubSpot/Salesforce
// - Personalization triggers to website

<script>
  // Track every marketing touch in cookie/localStorage
  function recordTouch() {
    const params = new URLSearchParams(window.location.search);
    const touch = {
      timestamp: new Date().toISOString(),
      source: params.get('utm_source') || document.referrer || 'direct',
      medium: params.get('utm_medium') || 'organic',
      campaign: params.get('utm_campaign') || null,
      content: params.get('utm_content') || null,
      page: window.location.pathname
    };

    let touches = JSON.parse(localStorage.getItem('attribution_touches') || '[]');
    touches.push(touch);
    if (touches.length > 50) touches = touches.slice(-50); // Cap at 50 touches
    localStorage.setItem('attribution_touches', JSON.stringify(touches));
  }

  recordTouch();

  // On conversion, send full touch history to attribution model
  function sendConversionWithAttribution(orderData) {
    const touches = JSON.parse(localStorage.getItem('attribution_touches') || '[]');

    fetch('/api/attribution/record', {
      method: 'POST',
      body: JSON.stringify({
        order_id: orderData.id,
        value: orderData.value,
        first_touch: touches[0],
        last_touch: touches[touches.length - 1],
        all_touches: touches
      })
    });
  }
</script>

<section class="conversion-section">
  <header>
    <h2>Get Cited by ChatGPT, Perplexity & Claude</h2>
    <p class="value-prop">Our 14-tier framework gets your business mentioned in AI answers. Free audit in under 24 hours.</p>
  </header>

  <ul class="trust-signals">
    <li>✓ 130+ active client sites</li>
    <li>✓ Trusted by SDVOSB-certified businesses</li>
    <li>✓ 4.9/5 from 127 verified reviews</li>
  </ul>

  <form class="cta-form" action="/api/audit/request" method="POST">
    <label for="audit-email" class="visually-hidden">Your email</label>
    <input
      type="email"
      id="audit-email"
      name="email"
      placeholder="you@company.com"
      required
      autocomplete="email">

    <button type="submit" class="btn-primary">
      Get My Free Audit
    </button>
  </form>

  <p class="risk-reversal">
    <small>No credit card required. Audit delivered within 24 hours. Unsubscribe anytime.</small>
  </p>
</section>

<script>
  // Assign user to test variant (consistent via user ID hash)
  function getTestVariant(testId, userId) {
    const hash = userId.split('').reduce((a, b) => {
      a = ((a << 5) - a) + b.charCodeAt(0);
      return a & a;
    }, 0);
    return Math.abs(hash) % 2 === 0 ? 'A' : 'B';
  }

  const userId = localStorage.getItem('user_id') || crypto.randomUUID();
  localStorage.setItem('user_id', userId);

  const variant = getTestVariant('hero-headline-v1', userId);

  // Apply variant
  if (variant === 'B') {
    document.querySelector('h1').textContent = 'Get Mentioned in AI Search Results in 90 Days';
  }

  // Track variant exposure
  window.dataLayer.push({
    'event': 'experiment_view',
    'experiment': {
      'id': 'hero-headline-v1',
      'variant': variant
    }
  });
</script>

<!-- Microsoft Clarity (free, GDPR-compliant) -->
<script>
  (function(c,l,a,r,i,t,y){
    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
  })(window, document, "clarity", "script", "YOUR_CLARITY_ID");
</script>

<!-- Tag specific user segments for filtering -->
<script>
  if (window.clarity) {
    clarity('set', 'user_segment', 'high_intent');
    clarity('set', 'content_cluster', 'ai-search');
  }
</script>

<dialog id="exit-popup" class="exit-intent-modal">
  <button class="close-modal" aria-label="Close popup">×</button>
  <h2>Wait — get the free framework checklist</h2>
  <p>Before you go, grab the complete 28-item Tier 1 checklist (free, no signup required).</p>
  <form action="/api/leads/checklist" method="POST">
    <input type="email" name="email" placeholder="Your email" required>
    <button type="submit">Send Me the Checklist</button>
  </form>
</dialog>

<script>
  const popup = document.getElementById('exit-popup');
  const lastShown = localStorage.getItem('exit_popup_last_shown');
  const sevenDaysAgo = Date.now() - (7 * 24 * 60 * 60 * 1000);

  // Only show if not shown in last 7 days
  if (!lastShown || parseInt(lastShown) < sevenDaysAgo) {
    let triggered = false;

    document.addEventListener('mouseleave', (e) => {
      if (e.clientY < 50 && !triggered) {
        triggered = true;
        popup.showModal();
        localStorage.setItem('exit_popup_last_shown', Date.now());

        window.dataLayer.push({
          'event': 'exit_popup_shown',
          'page': window.location.pathname
        });
      }
    });
  }

  // Easy close
  document.querySelector('.close-modal').addEventListener('click', () => popup.close());
</script>

<section class="signup-options">
  <h2>Get Started in Seconds</h2>

  <div class="oauth-buttons">
    <button onclick="signInWithGoogle()" class="btn-google">
      <img src="/icons/google.svg" alt="" width="24" height="24">
      Continue with Google
    </button>

    <button onclick="signInWithApple()" class="btn-apple">
      <img src="/icons/apple.svg" alt="" width="24" height="24">
      Continue with Apple
    </button>

    <button onclick="signInWithMicrosoft()" class="btn-microsoft">
      <img src="/icons/microsoft.svg" alt="" width="24" height="24">
      Continue with Microsoft
    </button>
  </div>

  <p class="divider">or</p>

  <details>
    <summary>Sign up with email</summary>
    <form action="/api/auth/email-signup" method="POST">
      <input type="email" name="email" placeholder="you@company.com" required>
      <button type="submit">Continue</button>
    </form>
  </details>

  <script>
    function trackSignupAttempt(method) {
      window.dataLayer.push({
        'event': 'signup_attempted',
        'method': method
      });
    }
  </script>
</section>

<aside class="lead-magnet-inline" itemscope itemtype="https://schema.org/CreativeWork">
  <h3 itemprop="name">Free: Tier 1 Foundation Checklist</h3>
  <p itemprop="description">Complete 28-item checklist with implementation steps and validation criteria. Used by 130+ businesses.</p>

  <form action="/api/leads/checklist" method="POST" class="inline-form">
    <input type="hidden" name="lead_magnet_id" value="tier-1-checklist">
    <input type="hidden" name="page_source" value="ai-search-guide">

    <input type="email" name="email" placeholder="you@company.com" required>
    <button type="submit">Send Me the Checklist (Free)</button>
  </form>

  <p class="meta">
    <small><span itemprop="encodingFormat">PDF</span> • 12 pages • Updated <time itemprop="dateModified" datetime="2026-04-29">April 29, 2026</time></small>
  </p>
</aside>

<form id="multi-step-funnel" action="/api/funnel/audit" method="POST">
  <div class="progress-bar">
    <span class="step active">1</span>
    <span class="step">2</span>
    <span class="step">3</span>
  </div>

  <fieldset data-step="1">
    <legend>Step 1: Tell us about your site</legend>
    <input type="url" name="website" placeholder="https://yourcompany.com" required>
    <button type="button" onclick="nextStep()">Next →</button>
  </fieldset>

  <fieldset data-step="2" hidden>
    <legend>Step 2: What's your primary goal?</legend>
    <label><input type="radio" name="goal" value="ai-citations" required> Get cited by AI engines</label>
    <label><input type="radio" name="goal" value="rankings"> Improve Google rankings</label>
    <label><input type="radio" name="goal" value="local"> Dominate local search</label>
    <button type="button" onclick="nextStep()">Next →</button>
  </fieldset>

  <fieldset data-step="3" hidden>
    <legend>Step 3: Where should we send your audit?</legend>
    <input type="email" name="email" placeholder="you@company.com" required>
    <button type="submit">Get My Free Audit</button>
  </fieldset>

  <script>
    function nextStep() {
      const current = document.querySelector('fieldset:not([hidden])');
      const next = current.nextElementSibling;
      const stepNum = next.dataset.step;

      // Save partial data
      const formData = new FormData(document.getElementById('multi-step-funnel'));
      sessionStorage.setItem('funnel_partial', JSON.stringify(Object.fromEntries(formData)));

      // Track step completion
      window.dataLayer.push({
        'event': 'funnel_step_completed',
        'step': current.dataset.step
      });

      current.hidden = true;
      next.hidden = false;
      document.querySelectorAll('.progress-bar .step')[stepNum - 1].classList.add('active');
    }
  </script>
</form>

<form action="/api/leads/qualify" method="POST" class="qualified-lead-form">
  <h2>Get a Custom Audit Quote</h2>

  <label>Your role
    <select name="role" required>
      <option value="">Select...</option>
      <option value="founder" data-score="10">Founder/CEO</option>
      <option value="cmo" data-score="9">CMO/Marketing Director</option>
      <option value="manager" data-score="6">Marketing Manager</option>
      <option value="other" data-score="3">Other</option>
    </select>
  </label>

  <label>Monthly marketing budget
    <select name="budget" required>
      <option value="under-1k" data-score="2">Under $1,000</option>
      <option value="1k-5k" data-score="5">$1,000 – $5,000</option>
      <option value="5k-15k" data-score="8">$5,000 – $15,000</option>
      <option value="15k-plus" data-score="10">$15,000+</option>
    </select>
  </label>

  <label>When do you need to start?
    <select name="timeline" required>
      <option value="now" data-score="10">Immediately</option>
      <option value="month" data-score="7">Within 30 days</option>
      <option value="quarter" data-score="4">Within 90 days</option>
      <option value="researching" data-score="2">Just researching</option>
    </select>
  </label>

  <input type="email" name="email" required placeholder="you@company.com">

  <button type="submit">Get My Custom Quote</button>

  <script>
    // Server-side: calculate lead score, route based on score
    // Score 25+ → immediate sales notification + Calendly link
    // Score 15-24 → nurture sequence + sales follow-up in 24h
    // Score < 15 → automated nurture only
  </script>
</form>

<script>
  // Determine journey stage from user behavior + CDU data
  async function getJourneyStage() {
    const response = await fetch('/api/user/journey', {credentials: 'include'});
    const data = await response.json();
    return data.stage; // 'awareness' | 'consideration' | 'decision' | 'retention'
  }

  // Customize page based on stage
  getJourneyStage().then(stage => {
    document.body.dataset.journeyStage = stage;

    // Awareness stage: show educational content
    if (stage === 'awareness') {
      document.querySelector('.dynamic-cta').innerHTML = `
        <h3>New to AI search?</h3>
        <a href="/guides/ai-search-101/">Read the Beginner's Guide</a>
      `;
    }

    // Consideration: show comparison content
    if (stage === 'consideration') {
      document.querySelector('.dynamic-cta').innerHTML = `
        <h3>Comparing options?</h3>
        <a href="/comparison/thatdeveloperguy-vs-typical-agency/">See the Comparison</a>
      `;
    }

    // Decision: show conversion CTA
    if (stage === 'decision') {
      document.querySelector('.dynamic-cta').innerHTML = `
        <h3>Ready to get started?</h3>
        <a href="/audit/" class="btn-primary">Book Your Free Audit</a>
      `;
    }

    // Retention: show advanced content + upsells
    if (stage === 'retention') {
      document.querySelector('.dynamic-cta').innerHTML = `
        <h3>Take it to the next level</h3>
        <a href="/upgrade/">Explore Tier 4+ Add-Ons</a>
      `;
    }

    // Track journey stage exposure
    window.dataLayer.push({
      'event': 'journey_stage_viewed',
      'journey_stage': stage
    });
  });
</script>