12

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.

Improve this question
2
  • 2
    We have so much in common! Commented Sep 7, 2019 at 20:52
  • 2
    For anyone looking to set custom fields (instead of events), especially campaign related ones check this article out bounteous.com/insights/2016/09/27/… Trying to do it in code turned out to be too complicated / not even possible. Commented Sep 7, 2019 at 22:20

2 Answers 2

Reset to default
8

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you for this answer. What a mess.... this essentially boils down to "if you use Google Tag Manager, you can no longer do custom Javascript tracking without also doing a TON of setup inside GTM for each and every type of JS call you want to make." :-(
4

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 -->
Improve this answer

4 Comments

That's pretty brilliant.
@eric but doesn't this completely circumvent Tag Manager's Universal Analytics tags? So why even use tag manager? Surely this mean you can't add a GA tag such as the one in kgrg's answer.
I would love to get rid of Tag Manager altogether, but it seems that Google "strongly" recommends it, and their docs are heavily weighted toward Tag Manager, too. I would much rather just do it all in my code/programmatically.
I now this is old, but how did you implement the custom html tag? I have been fighting with dataLayer.push() for two days now and getting nowhere. I am trying to send custom evens when certain things happen our website which might for example come from say a AJAX / SQL return or something like that. The Google docs are basic at best. Who uses onclick="" anymore? Thanks!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.