Expand my Community achievements bar.

SOLVED

Google Conversion Tracking On a Button

Avatar

Level 2

Hi All,

I'm trying to add a DBM floodlight tag onto a button click using DTM. I've set the global snippet to fire on all the pages (onload rule - Non-Sequential HTML) and set the event snippet to fire on the button action as non-sequential HTML. I see the rule being triggered on the button click, however I get a console error saying the gtag is not defined. Any idea how to fix this?

<!-- Start of global snippet: Please do not remove Place this snippet between the <head> and </head> tags on every page of your site. --> <!-- Global site tag (gtag.js) - DoubleClick --> <script async src="https://www.googletagmanager.com/gtag/js?id=DC-XXXXX"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'DC-XXXXX'); </script> <!-- End of global snippet: Please do not remove -->

<!-- Event snippet: Please do not remove. Place this snippet on pages with events you’re tracking. Creation date: 07/20/2018 --> <script> gtag('event', 'conversion', { 'allow_custom_scripts': true, 'u1': _satellite.getVar('Product Display Name'), 'u2': _satellite.getVar('Product Model Code'), 'send_to': 'DC-XXXXX/invmedia/y9sjx4y9+standard' }); </script> <noscript> <img src="https://ad.doubleclick.net/ddm/activity/src=XXXXX;type=invmedia;cat=y9sjx4y9;u1=[Product Name];u2=[Product Code];dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;npa=;ord=1?" width="1" height="1" alt=""/> </noscript> <!-- End of event snippet: Please do not remove -->

I tried adding the gtag+event tag together onto the button - that resolves the gtag error but then it flags that _satellite is not defined. Any thoughts on how to resolve these?

Thanks,

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Move the Global site tag (gtag.js) into a page top rule as Sequential HTML.  Note that the script that it loads is async, so there really is no performance issue here.   Be sure to replace DC-XXXXX (in two places) with your account ID.

============================================

<!-- Global site tag (gtag.js) - DoubleClick -->

<script async src="https://www.googletagmanager.com/gtag/js?id=DC-XXXXX"></script>

<script>

  window.dataLayer = window.dataLayer || [];

  function gtag() {

    dataLayer.push(arguments);

  }

  gtag('js', new Date());

  gtag('config', 'DC-XXXXX');

</script>

============================================

The script above does four important things.

1) It establishes window.dataLayer as a native javaScript array. This should be done as early as possible in case other code in the page render lifecycle need to push data into it.

2) It establishes the gtag function so that your code, later on, can call it.

3) It pulls down the (generic) gtm library asynchonrously.

4) It establishes your account id(s).  You might have a few depending on what Google services you are using.

============================================

For the event snippet, I'd suggest adding just the JS portion as a "non-sequential JS" tag on your DTM event rule.

  gtag('event', 'conversion', {

    'allow_custom_scripts': true,

    'u1': _satellite.getVar('Product Display Name'),

    'u2': _satellite.getVar('Product Model Code'),

    'send_to': 'DC-XXXXX/invmedia/y9sjx4y9+standard'

  });

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

Move the Global site tag (gtag.js) into a page top rule as Sequential HTML.  Note that the script that it loads is async, so there really is no performance issue here.   Be sure to replace DC-XXXXX (in two places) with your account ID.

============================================

<!-- Global site tag (gtag.js) - DoubleClick -->

<script async src="https://www.googletagmanager.com/gtag/js?id=DC-XXXXX"></script>

<script>

  window.dataLayer = window.dataLayer || [];

  function gtag() {

    dataLayer.push(arguments);

  }

  gtag('js', new Date());

  gtag('config', 'DC-XXXXX');

</script>

============================================

The script above does four important things.

1) It establishes window.dataLayer as a native javaScript array. This should be done as early as possible in case other code in the page render lifecycle need to push data into it.

2) It establishes the gtag function so that your code, later on, can call it.

3) It pulls down the (generic) gtm library asynchonrously.

4) It establishes your account id(s).  You might have a few depending on what Google services you are using.

============================================

For the event snippet, I'd suggest adding just the JS portion as a "non-sequential JS" tag on your DTM event rule.

  gtag('event', 'conversion', {

    'allow_custom_scripts': true,

    'u1': _satellite.getVar('Product Display Name'),

    'u2': _satellite.getVar('Product Model Code'),

    'send_to': 'DC-XXXXX/invmedia/y9sjx4y9+standard'

  });