Analytics events not triggering immediately after collecting consent, only after hard page refresh #2587

dduupp · 2024-10-04T07:37:18Z

dduupp
Oct 4, 2024

Context

We are attempting to set up Shopify Analytics with Google Tag Manager as a 3rd party integration (mostly hooked onto custom events). Following the Shopify docs as well as we can. We're using the default Shopify cookie banner to collect consent, using the Customer Privacy API.

Maybe not so relevant, but still worth sharing: we are also doing incremental adoption of Hydrogen.

Issue description

Steps to reproduce

Navigate to the website as a new user (clear browser cache)
Click "accept" on the cookie banner to give tracking consent

Expected behavior

Analytics events (including page_viewed and any custom events) that are supposed to be fired before consent is collected get queued instead and fired immediately after the user clicks "accept"
After clicking "accept", custom analytics events are able to be fired normally

Actual behavior

After clicking "accept", no analytics events are being fired at all
Only after hard reloading the page, analytics events like page_viewed and custom ones are being fired normally.

Relevant code

Hydrogen version: v2024.7.8

root.jsx

import { defer } from 'react-router-dom';
import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from '@remix-run/react';
import { useNonce, getShopAnalytics, Analytics } from '@shopify/hydrogen';

import { GoogleTagManager } from '~/components/GoogleTagManager.jsx';

import tailwind from '~/styles/tailwind-build.css';

export async function loader({
  request: { headers },
  context: {
    env: {
      PUBLIC_STOREFRONT_ID,
      PUBLIC_CHECKOUT_DOMAIN,
      PUBLIC_STOREFRONT_API_TOKEN,
    },
    cart,
  },
}) {  
  const cartPromise = cart.get();

  const deferredData = {
    cart: cartPromise,
    shop: getShopAnalytics({
      storefront,
      publicStorefrontId: PUBLIC_STOREFRONT_ID,
    }),
    consent: {
      checkoutDomain: PUBLIC_CHECKOUT_DOMAIN,
      storefrontAccessToken: PUBLIC_STOREFRONT_API_TOKEN,
      country: i18n.country,
      language: i18n.language,
    },
  };
  
  return defer(deferredData);
}

export default function App() {
  const {
    cart,
    shop,
    consent,
  } = useLoaderData();

  const nonce = useNonce();

  return (
      <html>
        <head>
          <meta charSet="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <Meta />
          <Links />
        </head>
        <body>
          <Analytics.Provider
            cart={cart}
            shop={shop}
            consent={consent}
            canTrack={() => {
              const canTrack = Boolean(
                typeof window !== 'undefined' && window.Shopify?.customerPrivacy.analyticsProcessingAllowed(),
              );

              console.log('canTrack() called,returns', canTrack);
              return canTrack;
            }}
          >
        </body>
      </html>
  );
}

components/GoogleTagManager.jsx

import { useEffect } from 'react';

import { useLoaderData, useAnalytics } from '~/hooks';

export function GoogleTagManager() {
  const {
    env: { PUBLIC_GTM_CONTAINER_ID },
  } = useLoaderData();
  const { register, subscribe, canTrack } = useAnalytics();
  const { ready } = register('GoogleTagManager');

  useEffect(() => {
    loadGTMScript(PUBLIC_GTM_CONTAINER_ID);

    const standardEvents = [
      'cart_viewed',
      'checkout_address_info_submitted',
      'checkout_completed',
      'checkout_contact_info_submitted',
      'checkout_shipping_info_submitted',
      'checkout_started',
      'collection_viewed',
      'page_viewed',
      'payment_info_submitted',
      'product_added_to_cart',
      'product_removed_from_cart',
      'product_viewed',
      'search_submitted',
    ];

    const customEvents = [
      'ga4_view_item',
      'ga4_add_to_cart',
      'ga4_remove_from_cart',
      'app_download',
      'navigation',
      'social',
      'site_engagement',
      'form_submission',
      'test_ride',
      'signup',
      'store_selection',
      'change_location',
    ];

    standardEvents.forEach((name) => {
      subscribe(name, () => {
        console.log(`[Standard analytics event] ${name}`);
      });
    });
    customEvents.forEach(handleEvent);

    function handleEvent(name) {
      subscribe(name, (event) => {
        console.log('[subscribe callback] canTrack()', canTrack());
        console.log(
          '[subscribe callback] Shopify.customerPrivacy.analyticsProcessingAllowed()',
          Shopify.customerPrivacy.analyticsProcessingAllowed(),
        );
        const output = {
          event: name,
          ...(event.id && { id: event.id }),
          ...(event.clientId && { client_id: event.clientId }),
          ...(event.timestamp && { timestamp: event.timestamp }),
          ...(event.url && { url: event.url }),
          ...(event.customData || event.data || event),
        };

        window.dataLayer.push(output);

        console.groupCollapsed(`[Custom analytics event] ${name}`);
        console.log(`Pushed to dataLayer:\n`, output);
        console.groupEnd();
      });
    }

    document.addEventListener(
      'visitorConsentCollected',
      () => {
        ready();
        console.log('GTM integration ready()');
      },
      { once: true },
    );

    console.log('✓ Subscribed to analytics events');
  }, []);

  return (
    <noscript>
      <iframe
        src={`https://www.googletagmanager.com/ns.html?id=${PUBLIC_GTM_CONTAINER_ID}`}
        height="0"
        width="0"
        className="hidden invisible"
      ></iframe>
    </noscript>
  );
}

let gtmLoaded = false;

function loadGTMScript(containerId) {
  if (gtmLoaded) {
    console.log('GTM is already loading, skipping');
    return;
  }

  gtag('consent', 'default', {
    ad_storage: 'granted',
    analytics_storage: 'granted',
    ad_user_data: 'granted',
    ad_personalization: 'granted',
  });
  gtag('js', new Date());
  gtag({ 'gtm.start': new Date().getTime(), 'event': 'gtm.js' });
  gtag('config', containerId);

  const nonce = document.querySelector('[nonce]')?.nonce || console.warn('No script with nonce attribute found');
  const firstScriptTag = document.getElementsByTagName('script')[0];
  const script = document.createElement('script');

  script.src = `https://www.googletagmanager.com/gtm.js?id=${containerId}`;
  script.async = true;
  script.nonce = nonce;
  script.onload = () => {
    console.log('✓ GTM loaded');
  };

  document.addEventListener('visitorConsentCollected', () => {
    const analyticsConsent = Shopify.customerPrivacy.analyticsProcessingAllowed() ? 'granted' : 'denied';
    const marketingConsent = Shopify.customerPrivacy.marketingAllowed() ? 'granted' : 'denied';

    const consentObject = {
      analytics_storage: analyticsConsent,
      ad_storage: marketingConsent,
      ad_user_data: marketingConsent,
      ad_personalization: marketingConsent,
    };

    gtag('consent', 'update', consentObject);

    console.log('✓ GTM consent updated: ', consentObject);
  });

  firstScriptTag.parentNode.insertBefore(script, firstScriptTag);

  gtmLoaded = true;
}

function gtag() {
  window.dataLayer = window.dataLayer || [];

  window.dataLayer.push(arguments);
}

Has anyone encountered a similar issue? How could we fix this?

wizardlyhel · 2024-10-07T18:56:34Z

wizardlyhel
Oct 7, 2024
Maintainer

You should be getting custom events and page view events after consent is given. However, no events will be queued between when all analytics integration is ready and the consent is given. For example:

Analytics.Provider and Shopify analytics are loading - events are queued
GTM are loading - events are queued
Analytics.Provider, Shopify analytics and GTM are ready - events are published. However, if canTrack is returning false, the events are discarded

0 replies

dduupp · 2024-10-09T16:54:58Z

dduupp
Oct 9, 2024
Author

Hello @wizardlyhel

I'll quote your message in the Shopify Partners Slack Community here, just in case anyone reading this is not a member:

How can we trigger custom events that are happening after consent has been set to true?

You should be publishing events (like click events) and listening to it in your GTM component (see doc for reference - Step 5)

How can we release events that were queued after the ready has been called

When ready has been called, the queue is released. However, if at this point, the canTrack is returning false (which it is most likely is since it’s waiting for a user consent), the queued events will be discarded.

I think this is why you are only seeing the events after a full refresh. That’s cause canTrack is returning false while it waits for user consent.

If you want to queue all the events until user gives consent, you can listen for the visitorConsentCollected DOM event before calling the ready function. However, the queue won’t reset over soft navigations .. So if buyer navigates 3 pages on your site, then clicks on the accept consent banner, then you will get 3 page view worth of events being flushed to you

Following your advice here, we've changed our code to now call ready() after the first visitorConsentCollected DOM event:

document.addEventListener(
  'visitorConsentCollected',
  () => {
    ready();
    console.log('GTM integration ready()');
  },
  { once: true },
);

Our observations are now as follows:
On first visit, standard (e.g. page_viewed) and custom (e.g. site_engagement) analytics events are fired,
even though consent was not given. ❗️
(Screen recording)

From here, there's 3 scenarios:

User does not interact with the privacy banner,
then performs an action that would trigger custom events → events are fired ❗️
then hard reloads the page → events are not fired ✅
(Screen recording)
User clicks "Accept" on the privacy banner,
then performs an action that would trigger custom events → events are fired ✅
then hard reloads the page → events are fired ✅
(Screen recording)
User clicks "Decline" on the privacy banner,
then performs an action that would trigger custom events → events are fired ❗️
then hard reloads the page → events are not fired ✅
(Screen recording)

So in short;

on first visit, analytics events are always fired, regardless of consent ❗️
only after hard reloading the page, consent is respected ✅

Hopefully the screen recordings are useful in helping to identify the problem.

Would you have any idea why consent is not being respected on first visit only?
Could it be related to the default return value of canTrack()?
Is the canTrack() function something we have to check ourselves in subscribe callbacks, or is it already evaluated by subscribe() internally?

0 replies

wizardlyhel · 2024-10-09T18:05:48Z

wizardlyhel
Oct 9, 2024
Maintainer

In this function, can you log the state of canTrack? also check the result of Shopify.customerPrivacy.analyticsProcessingAllowed(). I'm wondering if there is unexpected stickiness of canTrack.

canTrack by default returns the result of Shopify.customerPrivacy.analyticsProcessingAllowed()

function handleEvent(name) {
      subscribe(name, (event) => {
        console.log(canTrack());
        const output = {

Also, update to 2024.7.9, I release a fix for canTrack yesterday

0 replies

dduupp · 2024-10-10T10:43:45Z

dduupp
Oct 10, 2024
Author

Hi @wizardlyhel

I have updated to the latest version and included those console logs.
However, it seems like analytics events are now never fired at all, regardless of consent, on first page visit and subsequent ones.

I have also added an explicit canTrack prop to <Analytics.Provider> to simply log the value of analyticsProcessingAllowed(). This way we can track whenever this function is called, and what the exact return value is:

<Analytics.Provider
  cart={cart}
  shop={shop}
  consent={consent}
  canTrack={() => {
    const canTrack = Boolean(
      typeof window !== 'undefined' && window.Shopify?.customerPrivacy.analyticsProcessingAllowed(),
    );

    console.log('canTrack() called, returns', canTrack);
    return canTrack;
  }}
>

Note: I have also added logs to both standard and custom events subscribe callbacks, so when an event is fired we should see something like [Standard analytics event] page_viewed or [Custom analytics event] site_engagement in the console.

I have updated the code above to reflect the changes so far.

On first visit

canTrack() should never return true here. ❗️

After clicking "Accept":

No events are fired here, neither queued nor newly triggered ones. ❗️

After clicking "Decline":

On second visit (hard reload)

After previously clicking "Accept":

Both canTrack() and Shopify.customerPrivacy.analyticsProcessingAllowed() return true after collecting consent, yet no events are fired. ❗️

After previously clicking "Decline":

0 replies

wizardlyhel · 2024-10-10T17:05:27Z

wizardlyhel
Oct 10, 2024
Maintainer

mmm ... This might be a bug in the consent script itself.

For the first visit, could you see what is the value of the _cmp_a cookie before clicking on the consent banner? _cmp_a cookie is the default regional cookie setting. For example, you should see "purposes":{"p":false,"a":false,"m":false,"t":true}, in GDPR regions and "purposes":{"p":true,"a":true,"m":true,"t":true}, in most US states.

Maybe console log the cookie state within the canTrack function to see when this cookie got set and when analyticsProcessingAllowed is returning true

For the second visit (hard reload), we are losing events because we are waiting for consent status. Technically, if the _tracking_consent cookie is around, analyticsProcessingAllowed should immediately return true. Is the hard reload also removed the cookie values?

0 replies

dduupp · 2024-10-10T19:14:34Z

dduupp
Oct 10, 2024
Author

@wizardlyhel

The _cmp_a cookie is not present at all during the first visit. Neither before or after giving consent.
I then click "Accept", then hard reload the page.

Now, the value of _cmp_a cookie is:

{"purposes":{"p":true,"a":true,"m":true,"t":true},"display_banner":true,"sale_of_data_region":false}

and the value of _tracking_consent cookie is:

{"con":{"CMP":{"a":"1","m":"1","p":"1","s":""}},"v":"2.1","region":"BEVLG","reg":"","purposes":{"p":true,"a":true,"m":true,"t":true},"display_banner":true,"sale_of_data_region":false}

0 replies

wizardlyhel · 2024-10-10T20:12:27Z

wizardlyhel
Oct 10, 2024
Maintainer

The _cmp_a cookie is not present at all during the first visit. Neither before or after giving consent.
I then click "Accept", then hard reload the page.

It should exist after you have accepted the consent without hard refresh. Something is wrong with your set up.

Check your consent banner set up against what's on https://hydrogen.shop/

First visit to site
- cookie banner should show up
- there should be 2 cookies set up - _cmp_a and _tracking_consent - _tracking_consent should have the value for "CMP":{"a":"","m":"","p":"","s":""} which means that the buyer hasn't interact with the banner
- There should be a network request to your shop's unstable api endpoint. Example on hydrogen.shop https://checkout.hydrogen.shop/api/unstable/graphql.json
When you accept the cookie banner
- _tracking_consent should be updated to "CMP":{"a":"1","m":"1","p":"1","s":""}
- You should see 1 or 2 more network request to the unstable api endpoint

0 replies

dduupp · 2024-10-11T14:45:23Z

dduupp
Oct 11, 2024
Author

@wizardlyhel

We are simply using Shopify's built-in cookie banner.
I've verified that checkoutDomain and storeDomain are added to CSP.

I do see some relevant network request to /api/unstable/graphql.json upon visiting the site for the first time:

Query

{
  "query": "query { consentManagement { cookies(visitorConsent:{}) { answersCookie trackingConsentCookie cookieDomain landingPageCookie origReferrerCookie } } }",
  "variables": {}
}

Response

{
    "data": {
        "consentManagement": {
            "cookies": {
                "answersCookie": "%7B%22purposes%22%3A%7B%22p%22%3Afalse%2C%22a%22%3Afalse%2C%22m%22%3Afalse%2C%22t%22%3Atrue%7D%2C%22display_banner%22%3Atrue%2C%22sale_of_data_region%22%3Afalse%7D",
                "trackingConsentCookie": "%7B%22con%22%3A%7B%22CMP%22%3A%7B%22a%22%3A%22%22%2C%22m%22%3A%22%22%2C%22p%22%3A%22%22%2C%22s%22%3A%22%22%7D%7D%2C%22v%22%3A%222.1%22%2C%22region%22%3A%22BEVLG%22%2C%22reg%22%3A%22%22%2C%22purposes%22%3A%7B%22p%22%3Afalse%2C%22a%22%3Afalse%2C%22m%22%3Afalse%2C%22t%22%3Atrue%7D%2C%22display_banner%22%3Atrue%2C%22sale_of_data_region%22%3Afalse%7D",
                "cookieDomain": "cowboy.com",
                "landingPageCookie": null,
                "origReferrerCookie": null
            }
        }
    }
}

and another one related to the cookie banner:

Query

{
  "query": "\n        query bannerQuery ($isPreviewMode: Boolean = false) @inContext(language: EN, country: BE) {\n          consentManagement {\n            banner {\n              enabled\n              position\n              policyLinkText\n              policyLinkUrl\n              title\n              text\n              buttonPrefsOpenText\n              buttonAcceptText\n              buttonDeclineText\n              regionVisibility @include(if: $isPreviewMode)\n              theme {\n                theme\n                fontColor\n                backgroundColor\n                buttonFontColor\n                buttonBackgroundColor\n              }\n              preferences {\n                title\n                introTitle\n                introText\n                buttonAcceptText\n                buttonDeclineText\n                buttonSaveText\n                bulletPoints {\n                  enabled\n                  title\n                  firstText\n                  secondText\n                  thirdText\n                }\n                purposes {\n                  essentialName\n                  essentialDesc\n                  performanceName\n                  performanceDesc\n                  preferencesName\n                  preferencesDesc\n                  marketingName\n                  marketingDesc\n                }\n              }\n            }\n          }\n        }",
  "variables": {
    "isPreviewMode": false
  }
}

Response

{
    "data": {
        "consentManagement": {
            "banner": {
                "enabled": true,
                "position": "bottom_left",
                "policyLinkText": "Privacy Policy.",
                "policyLinkUrl": "https://cowboy.com/policies/privacy-policy",
                "title": "We value your privacy",
                "text": "We use cookies and other technologies to personalize your experience, perform marketing, and collect analytics. Learn more in our ",
                "buttonPrefsOpenText": "Manage preferences",
                "buttonAcceptText": "Accept",
                "buttonDeclineText": "Decline",
                "theme": {
                    "theme": "custom",
                    "fontColor": "0,0,11,100",
                    "backgroundColor": "0,0,100,100",
                    "buttonFontColor": "0,0,11,100",
                    "buttonBackgroundColor": "0,0,100,100"
                },
                "preferences": {
                    "title": "Cookie preferences",
                    "introTitle": "You control your data",
                    "introText": "Learn more about the cookies we use, and choose which cookies to allow.",
                    "buttonAcceptText": "Accept all",
                    "buttonDeclineText": "Decline all",
                    "buttonSaveText": "Save my choices",
                    "bulletPoints": {
                        "enabled": false,
                        "title": "If you accept all cookies",
                        "firstText": "Our site may be improved based on your interests",
                        "secondText": "Your preferences may be stored for when you return",
                        "thirdText": "You may see advertising that's tailored to you"
                    },
                    "purposes": {
                        "essentialName": "Required",
                        "essentialDesc": "These cookies are necessary for the site to function properly, including capabilities like logging in and adding items to the cart.",
                        "performanceName": "Analytics",
                        "performanceDesc": "These cookies help us understand how you interact with the site. We use this data to identify areas to improve.",
                        "preferencesName": "Personalization",
                        "preferencesDesc": "These cookies store details about your actions to personalize your next visit to the website.",
                        "marketingName": "Marketing",
                        "marketingDesc": "These cookies are used to optimize marketing communications and show you ads on other sites."
                    }
                }
            }
        }
    },
    "extensions": {
        "context": {
            "country": "BE",
            "language": "EN"
        }
    }
}

After accepting, that first call querying consentManagement is repeated:

Query

{
  "query": "query { consentManagement { cookies(visitorConsent:{marketing:true,analytics:true,preferences:true},origReferrer:\"\",landingPage:\"/pages/delivery\") { answersCookie trackingConsentCookie cookieDomain landingPageCookie origReferrerCookie } } }",
  "variables": {}
}

Response

{
    "data": {
        "consentManagement": {
            "cookies": {
                "answersCookie": "%7B%22purposes%22%3A%7B%22p%22%3Atrue%2C%22a%22%3Atrue%2C%22m%22%3Atrue%2C%22t%22%3Atrue%7D%2C%22display_banner%22%3Atrue%2C%22sale_of_data_region%22%3Afalse%7D",
                "trackingConsentCookie": "%7B%22con%22%3A%7B%22CMP%22%3A%7B%22a%22%3A%221%22%2C%22m%22%3A%221%22%2C%22p%22%3A%221%22%2C%22s%22%3A%22%22%7D%7D%2C%22v%22%3A%222.1%22%2C%22region%22%3A%22BEVLG%22%2C%22reg%22%3A%22%22%2C%22purposes%22%3A%7B%22p%22%3Atrue%2C%22a%22%3Atrue%2C%22m%22%3Atrue%2C%22t%22%3Atrue%7D%2C%22display_banner%22%3Atrue%2C%22sale_of_data_region%22%3Afalse%7D",
                "cookieDomain": "cowboy.com",
                "landingPageCookie": "%2Fpages%2Fdelivery",
                "origReferrerCookie": ""
            }
        }
    }
}

The cookies you mention are never set during first visit. It is only after hard reloading the page that they appear:

_cmp_a

{"purposes":{"p":true,"a":true,"m":true,"t":true},"display_banner":true,"sale_of_data_region":false}

_tracking_consent

{"con":{"CMP":{"a":"1","m":"1","p":"1","s":""}},"v":"2.1","region":"BEVLG","reg":"","purposes":{"p":true,"a":true,"m":true,"t":true},"display_banner":true,"sale_of_data_region":false}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Analytics events not triggering immediately after collecting consent, only after hard page refresh #2587

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 8 comments

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Analytics events not triggering immediately after collecting consent, only after hard page refresh #2587

dduupp Oct 4, 2024

Context

Issue description

Steps to reproduce

Expected behavior

Actual behavior

Relevant code

Replies: 8 comments

wizardlyhel Oct 7, 2024 Maintainer

dduupp Oct 9, 2024 Author

wizardlyhel Oct 9, 2024 Maintainer

dduupp Oct 10, 2024 Author

On first visit

On second visit (hard reload)

wizardlyhel Oct 10, 2024 Maintainer

dduupp Oct 10, 2024 Author

wizardlyhel Oct 10, 2024 Maintainer

dduupp Oct 11, 2024 Author

dduupp
Oct 4, 2024

wizardlyhel
Oct 7, 2024
Maintainer

dduupp
Oct 9, 2024
Author

wizardlyhel
Oct 9, 2024
Maintainer

dduupp
Oct 10, 2024
Author

wizardlyhel
Oct 10, 2024
Maintainer

dduupp
Oct 10, 2024
Author

wizardlyhel
Oct 10, 2024
Maintainer

dduupp
Oct 11, 2024
Author