<!-- AttributeIQ + GA4 tracking -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  /* ── Base GA4 setup ──────────────────────────────────────── */
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');

  /* ── Persistent user ID ──────────────────────────────────── */
  function getOrCreatePersistentUserId() {
    let persistentId = localStorage.getItem('persistent_user_id');
    if (!persistentId) {
      persistentId = 'user_' + Date.now() + '_' + Math.random().toString(36).substring(2, 10);
      localStorage.setItem('persistent_user_id', persistentId);
    }
    return persistentId;
  }
  const persistentUserId = getOrCreatePersistentUserId();

  /* ── GA4 client ID capture ───────────────────────────────── */
  gtag('get', 'G-XXXXXXXXXX', 'client_id', (id) => {
    window.ga4ClientId = id;
    localStorage.setItem('ga4_client_id', id);
    console.log('AttributeIQ: GA4 Client ID captured:', id);
  });

  /* ── Page visit tracking ─────────────────────────────────── */
  function trackPage() {
    const id = localStorage.getItem('ga4_client_id') || window.ga4ClientId;
    if (!id) return;
    fetch('https://attribute-iq.com/api/track/track-page-visit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ pageUrl: location.href, ga4ClientId: id, persistentUserId: persistentUserId }),
    }).catch(() => {});
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', trackPage);
  } else { trackPage(); }


  /* ── HubSpot embedded form tracking ────────────────────────
     Only relevant if you use HubSpot's embedded forms.
     This handles injecting the GA4 ID into the form payload
     and capturing identity once the form is submitted.
     If you only use custom HTML forms, this block is inactive
     but harmless to leave in.
  ─────────────────────────────────────────────────────────── */

  window.addEventListener('message', function(e) {
    if (e.data?.type !== 'hsFormCallback') return;

    if (e.data.eventName === 'onBeforeFormSubmit' && Array.isArray(e.data.data)) {
      const id = localStorage.getItem('ga4_client_id') || window.ga4ClientId;
      if (id) {
        e.data.data.push({ name: 'ga4_client_id', value: id });
      }
    }

    if (e.data.eventName === 'onFormSubmit') {
      const email = e.data.data?.find(function(f) { return f.name === 'email'; })?.value;
      const id = localStorage.getItem('ga4_client_id') || window.ga4ClientId;
      if (email && id) {
        fetch('https://attribute-iq.com/api/track/capture-identity', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            email: email,
            ga4_client_id: id,
            persistent_user_id: persistentUserId,
            property_id: 'default'
          }),
        }).catch(() => {});
      }
    }
  });
</script>

Verify the Script is Working

document.addEventListener('DOMContentLoaded', function() {

  // Replace YOUR_FORM_SELECTOR with your form's CSS selector
  // e.g. '.contact-form form', '#signup form', '.hero-form form'
  const form = document.querySelector('YOUR_FORM_SELECTOR');
  if (!form) return;

  form.addEventListener('submit', function(e) {

    // Add a line here for each field in your form
    const name    = form.querySelector('input[name="name"]')?.value || '';
    const email   = form.querySelector('input[type="email"]')?.value || '';
    const subject = form.querySelector('select[name="subject"]')?.value || '';
    const message = form.querySelector('textarea[name="message"]')?.value || '';

    // These are set automatically by the main script, do not change
    const ga4ClientId      = localStorage.getItem('ga4_client_id') || window.ga4ClientId;
    const persistentUserId = localStorage.getItem('persistent_user_id');

    if (!email || !ga4ClientId) return;

    // Link this visitor’s email to their GA4 session
    fetch('https://attribute-iq.com/api/track/capture-identity', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        email: email,
        ga4_client_id: ga4ClientId,
        persistent_user_id: persistentUserId,
        property_id: 'default'
      })
    }).catch(() => {});

    // Send form data to HubSpot
    // Replace YOUR_PORTAL_ID and YOUR_FORM_GUID with your values
    // Update the fields array to match your form’s internal names
    fetch('https://api.hsforms.com/submissions/v3/integration/submit/YOUR_PORTAL_ID/YOUR_FORM_GUID', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        fields: [
          { name: 'firstname',    value: name    },
          { name: 'email',        value: email   },
          { name: 'subject',      value: subject },
          { name: 'message',      value: message },
          { name: 'ga4_client_id', value: ga4ClientId }, // always include this
        ],
        context: { pageUri: window.location.href, pageName: document.title }
      })
    }).catch(() => {});

  });
});