GTM GA4 Custom HTML tag to new Google Tag - possible?

23 Views Asked by At

Kind of a weird question. An order processing service I am using recommends to implement GA4 using the code listed below. While this has been working fine I am finding it is causing an issue with cookie consent and consent mode v2. The reason being that because it is a custom html tag I also need to manually add additional consent checks to the tag whereas if this was of type Google Tag those consent checks would be 'built-in' and allow consent mode v2 to work - the cookieless pings that Google tags now have.

Is there any way possible to convert this custom html tag to a normal Google Tag? I have already contacted the third-party service I use which recommends this format/code and they were zero help at all and basically told me they 'are not experts in GTM' and cannot provide any information other than what is shown in their docs.

Custom html GA4 tag :

<!-- CUSTOM Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ga4-tracking-id}}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  if (!window.clsid) {
    gtag('config', '{{ga4-tracking-id}}', {
        'cookie_flags': 'SameSite=None;Secure',
        'page_referrer': '{{fsc-referrer}}',
        'page_location': '{{fsc-url}}',
    });
    window.clsid = {
        client_id: '',
        session_id: ''
    };
    gtag('get', '{{ga4-tracking-id}}', 'client_id', function(r) {
        window.clsid.client_id = r
    });
    gtag('get', '{{ga4-tracking-id}}', 'session_id', function(r) {
        window.clsid.session_id = r
    });
} else {
    gtag('config', '{{ga4-tracking-id}}', {
        'client_id': window.clsid.client_id,
        'session_id': window.clsid.session_id,
        'cookie_flags': 'SameSite=None;Secure',
        'page_referrer': '{{fsc-referrer}}',
        'page_location': '{{fsc-url}}'
    });
} 
</script>

The main problem I see here is the if/else based on window.clsid where it needs to get/set client_id and session_id if not found. All the parameters listed are valid for configuration settings as mentioned here for the Google Tag.

The whole reason, I suspect, that my provider recommends their custom html approach is because it is used for popup order processing on my site... what I assume is happening is when this custom html tag loads 'on' their end of things (when the popup shows it would be like a page from their site/domain with my site/domain in the background), it doesn't find the client_id/session_id, and has to 'get' them from the window variable (which would be from my site/domain and already have values).

If !window.clsid then that basically means their order popup is showing and in the foreground of the browser and to grab the values from window which would already by set from my site/domain in the background of the popup which already has them. The else in the code would be normal operation on my site/domain going from page to page (no order popup from their site/domain). That is my best guess as to what is happening here at least based on what I see.

Any way around this? I was thinking creating a custom js variable for both client_id and session_id to 'get' them same as the original code above. Then two more js variables for client_id and session_id and use the 'format value - Convert undefined to...' option and set them to their respective custom js variables I created earlier to 'get' them if not found. Then in my Google Tag I would just set all the configuration params with their values... client_id and session_id being my js variables (if undefined they would 'get' them from the custom js variables and if they have values those are used)... I 'think' that would basically be replicating the same behavior in the custom html tag - right?

0

There are 0 best solutions below