CODEWITHSUNDEEP
javascriptgoogle-analyticsgoogle-tag-manager
Eric
Eric

Reputation: 5215

How to track custom events when Google Analytics is managed by Google Tag Manager?

I ended up having to use Google Tag Manager for my site, so Google Analytics is now a part of that. It's all set up correctly and working fine. However, I used to be able to track custom events on my site very easily, with the ga() function:

ga('send', 'event', 'Videos', 'play', 'Fall Campaign');

However, now ga() is no longer defined; I get an error in the console, ReferenceError: ga is not defined. I then tried the gtag() method and it also doesn't work (same error message):

gtag('event', 'aaa', {
  'event_category' : 'bbb',
  'event_label' : 'ccc'
});

How can I track events with Javascript code?

To be clear, I do NOT want to fuss with the Google Tag Manager. It's a million clicks to get anything done in there. ;-) I just want to call the Javascript directly, like I always could before.

Upvotes: 12

Views: 2587

Answers (2)

benlarkins
benlarkins

Reputation: 86

I created a new "custom html" tag in Tag Manager. Then I added the analytics.js code below and set the tag to fire on page load. This allowed me to use the existing ga calls in my code to fire custom events rather than re-writing all of my events to work with Universal Analytics through the dataLayer as the other answer suggested.

<!-- Google Analytics -->
<script>
    window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
    ga('create', 'UA-XXXXXXXXX-Y', 'auto');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->

Upvotes: 4

kgrg
kgrg

Reputation: 1633

Google Tag Manager (GTM) by default uses a random name for each tracker, generated for each Universal Analytics tag. AS GTM creates only named trackers, therefore no default (t0) tracker will be created. As no default tracker is created, you must provide a tracker name yourself. Therefore, you would need to now the tracker names, or somehow query and reference them, in order this to work, only by using ga() call directly from JavaScript.

There is a possibility to use fixed name for trackers, which is highly discouraged.

I have a recommended workaround for this. You still need to make a few GTM settings, but you can create a Google Analytics general event dispatcher tag, which you can later use to send any Analytics event calls from JavaScript.

Your tag setting will look something like this, where you can reference your Analytics settings, and all the event related variables from dataLayer:

enter image description here

Your event tracking code will look like this:

dataLayer.push({
  'event': 'GAEvent',
  'eventCategory': 'Videos',
  'eventAction': 'play',
  'eventLabel': 'Fall campaign', 
  'eventValue': undefined,
  'eventNI': true 
});

Please note, that it is recommended to always set all the relevant event values in dataLayer, even if no string or value should be tracked, so that no earlier dataLayer values would be inherited during the push merge. Also, you should update the non-interaction flag, as needed in your case. Your trigger should match the value of the event key.

Upvotes: 8

Related Questions