Google Analytics Web+App event config: Error 'gtag is not defined'

Question

I'm trying to setup ecommerce event configuration of Google Analytics App+Web for a website. Refer to the documentation here.

Because there is a lot of custom code for the ecommerce configuration, I cannot use the general GA App+Web webevent template, so instead I'm using a custom HTML-tag in this case.

As a first test, I tried to fire the following simple event:

<script>

  gtag('event', 'blabla', {
  'test_param1': 'test_value_1'
});

</script>

However, the event is not correctly sent to GA; instead, the following error in the console is returned:

Uncaught ReferenceError: gtag is not defined

To reproduce, see the following page: https://www.hema.nl/mooi-gezond/make-up/make-up-accessoires/toilettassen-1/toilettas-11830901.html

Additional information:

• The GA App+Web base initialization is (successfully) done via GTM, via the GA App+Webconfiguration template tag.
• I also configured a few other (simple non-ecommerce) GA App+Web events via GTM via the GA App+Web webevent template tag , and these events are sent to GA successfully.

Does anyone know what's going wrong, why the console error appears and why the event is not sent to GA?

Grained

Answer 1

The cause of the problem has been found. The problem seemed to be that gtag() does not work if the App+Web base setup is done with the GTM App+Web base template tag. Instead, an event should first be pushed to the GTM datalayer, and then the GTM App+Web event template should be used to send the event to Google Analytics.

Lots of thanks Gino (working at Merkle) for fixing the issue!

Grained

Hi Timo, is there any chance you could provide a code snippet of the solution? Thanks! – Tobe

Answer 2

Short answer

Additionally to the GTM GA App+Web tag, you need to add the following code to have gtag() defined:

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
</script>

Long answer

According to the official documentation (https://developers.google.com/analytics/devguides/collection/ga4) this is the code you should include in your site:

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

  gtag('config', 'MEASUREMENT_ID');
</script>

After inspecting a website with this tag I found GTM has injected that first line, which is enough to make analytics work. But it didn't add the other lines, some of which effectively defines the gtag global function as a "syntax sugar" for pushing things to the Analytics Data Layer.

Personally, I find this really strange, since using GTM is the most cannonical of adding Google Analytics to a website and it's by the same company.

Eclair

I reached this same conclusion. Do you think it's just an oversight in their docs? It's super confusing and you end up going round in circles. My browser tells me that GTM loads analytics.js which loads ec.js and GTM also loads gtag/js, but the generated code they give me doesn't define gtag. What you have above is literally the only way it could possibly work so I have to conclude there's just a gaping hole in their docs. – Bessiebessy

Also for anyone wondering why this isn't automatic when you add GA4 to the GTM configuration as a new tag: The script is loaded async, so your page can continue to load - but clearly wherever you want to call the API you don't want to check 'is it loaded' every time. So that's what dataLayer is, just a list of commands to be executed when it IS ready. And gtag is literally just an alias to push to that list. All my existing code was just doing dataLayer.push because that's what they tell us to do! developers.google.com/tag-manager/devguide – Bessiebessy

It's like one day someone said 'Urm why don't we just make an alias for dataLayer.push and call it gtag ?', but not every one got that memo! – Bessiebessy

Answer 3

This may be a bit of a repeat of the accepted answer, but I wanted to confirm that it is indeed recommended by (some) Google documentation to manually add the following snippet of code to the <head> section of your website, just above your existing Tag Manager container snippet:

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
</script>

This is necessary if:

• You are deploying your Analytics Tags using Google Tag Manager rather than the "Google Tag"
• You wish to utilize the gtag() syntax to send Events to your GA4 Analytics property

Source: https://developers.google.com/analytics/devguides/migration/ecommerce/gtm-ga4-to-ua#4_enable_the_gtagjs_api

Fundy

Answer 4

In my case Uncaught ReferenceError: gtag is not defined was caused by uBlock/adblock turned on.

I think it's worth testing if accepted answer doesn't work.

Jacintojack

Answer 5

If you're using Google Tag Manager, the gtag function doesn't exist. Follow this guide to create custom events

1. Basically the code you use is: dataLayer.push({event: 'event_name'});

2. Then you setup a tag in GTM for "GA4 event".

3. Use the event name that you want to see in Google analytics.

4. For the trigger, use custom event. Here, in the event name, use the name that you used in your code event_name

Niemi

Answer 6

I found out that it was due to an AD Blocking Extensions added to my chrome

Masefield

Answer 7

2022 Year answer:

For anyone struggling with using GA4 gtag and GTM (Google Tag Manager) simultaniously in your SPA/Angular/React app, you should do next:

• don't use built-in GTM's "Google Analytics: GA4 Configuration" tag configuration
• do use "Custom HTML" GTM tag with exactly that gtag JS code from your Google Analytics, i.e.

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

  gtag('config', 'GA_MEASUREMENT_ID');
</script>

After that you can use gtag in your code as you intended to do, all should work. No whole Firebase needed or something. Possibly you will need to have

gtag('config', 'GA_MEASUREMENT_ID', {
  send_page_view: false
});

to disable automatic page_view tracking.

Anchor

That's a dirty way of doing things. Why not setup proper tags that GTM provides? – Niemi

@Niemi I think I tried ofc, in that case gtag is not available to use in JS as I remember. – Anchor

You don't need gtag. See my answer https://mcmap.net/q/547671/-google-analytics-web-app-event-config-error-39-gtag-is-not-defined-39 – Niemi

@Niemi still, having it as gtag is the usual way of using it, as in many other examples over the internet. – Anchor