[gatsby-plugin-google-gtag] ReferenceError: Can't find variable: dataLayer (Safari)

[ilyagru]

Description

Getting ReferenceError: Can't find variable: dataLayer and no content at all (empty window) when opening a website in Safari with Content Blocker enabled. A feature added from Ads Blocker extensions like "Ka-Block!". In Chrome everything is fine.

The console shows that the error is here.

Some additional check should be added to let the content be loaded even this tracking script is blocked.
The line function function gtag(){dataLayer.push(arguments);} should be replaced with function gtag(){window.dataLayer && window.dataLayer.push(arguments);}.
(With this change it works correctly even the tracker is blocked.)

If you need help, let me know, or I can prepare a quick PR.

Steps to reproduce

1. This config:

{
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        trackingIds: [
          `MY-ID1111111-1`,
        ],
        gtagConfig: {
          anonymize_ip: true,
        },
        pluginConfig: {
          head: false,
          respectDNT: true,
        },
    },
},

2. Build and serve locally.
3. Open the webiste in Safari with an Ads Blocker enabled.

Expected result

It should load the content despite that the script is blocked by the Blocker.

Actual result

Getting ReferenceError: Can't find variable: dataLayer and no content at all (empty window) when opening a website in Safari with Content Blocker enabled.

Environment

System:
OS: macOS 10.14.3
CPU: (4) x64 Intel(R) Core(TM) i5-5287U CPU @ 2.90GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.3.0 - /usr/local/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Languages:
Python: 2.7.15 - /usr/local/bin/python
Browsers:
Chrome: 71.0.3578.98
Safari: 12.0.3
npmPackages:
gatsby: ^2.0.76 => 2.0.76
gatsby-image: ^2.0.22 => 2.0.25
gatsby-plugin-feed: ^2.0.8 => 2.0.11
gatsby-plugin-google-gtag: ^1.0.10 => 1.0.10
gatsby-plugin-manifest: ^2.0.5 => 2.0.12
gatsby-plugin-offline: ^2.0.5 => 2.0.20
gatsby-plugin-react-helmet: ^3.0.0 => 3.0.5
gatsby-plugin-sharp: ^2.0.6 => 2.0.16
gatsby-plugin-sitemap: ^2.0.4 => 2.0.4
gatsby-plugin-styled-components: ^3.0.4 => 3.0.4
gatsby-plugin-typography: ^2.2.0 => 2.2.3
gatsby-remark-copy-linked-files: ^2.0.5 => 2.0.8
gatsby-remark-external-links: 0.0.4 => 0.0.4
gatsby-remark-images: ^2.0.4 => 2.0.6
gatsby-remark-prismjs: ^3.0.0 => 3.1.4
gatsby-remark-responsive-iframe: ^2.0.5 => 2.0.8
gatsby-remark-smartypants: ^2.0.5 => 2.0.7
gatsby-source-filesystem: ^2.0.2 => 2.0.12
gatsby-transformer-remark: ^2.1.6 => 2.1.17
gatsby-transformer-sharp: ^2.1.3 => 2.1.9
npmGlobalPackages:
gatsby-cli: 2.4.8

Quick fix

For those who is looking for a quick fix, modify the file node_modules/gatsby-plugin-google-gtag/gatsby-ssr.js and build with that.

// From this
function gtag(){dataLayer.push(arguments);}
// To this
function gtag(){window.dataLayer && window.dataLayer.push(arguments);}

[JacobBlomgren]

Hm. I can't seem to reproduce, neither with Ka-Block nor any other Safari ad blocker. 🤔 Anyhow, after looking around it does seem like the best practice in the Google tracking community is to do as you suggested to be safe. It certainly doesn't hurt at all. So I would say please go ahead and create a PR!

[sidharthachatterjee]

The code in https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-google-gtag/src/gatsby-ssr.js seems to be correct according to from https://developers.google.com/analytics/devguides/collection/gtagjs/

While I see the point of the fix, I wonder if it a small edge case that only applies to the blocker in question or more generally.

Could you please post a minimal reproduction of this? We'd be happy to receive a PR if this indeed is a a bug!

[JacobBlomgren]

For added info @ilyagru I'm on the same safari and macOS version as you.

[ilyagru]

@sidharthachatterjee I've added a repo with a reproduction. Check it out here: https://github.com/ilyagru/gatsby-plugin-google-gtag-reproduction-bug. Possibly for reproduction you also need to turn on the setting Ask websites not to track me in Safari.

[JacobBlomgren]

@ilyagru Thanks for getting back. I'm now able to reproduce in Safari with Ka-Block. What was missing for reproduction was the do not track part. Did you say that other adblockers gave the same problem or only Ka-Block, because I can only get it with Ka-Block?

[ilyagru]

Hmm, I don't know actually if other adblockers gave the same problem. But some of them could work with a similar principal.

[JacobBlomgren]

I'm starting to think this is a bug in Ka-Block because that code should not execute in the first place, according to my understanding of the relevant lines of code.

[ilyagru]

Maybe you're right, but in this case, I think window.dataLayer will be a safer option, as we can't be aware of all adblockers that exist and that will appear and the technologies they use. Also, accessing the variable dataLayer directly isn't the best option here. So I can prepare a PR very soon.

[ilyagru]

@sidharthachatterjee @JacobBlomgren I've just created a PR, so please take a look. :)