Parcel: google gtag global snippet being changed to $s8z$var$gtag inside index.html

[pocesar]

🐛 bug report

Google gtag snippet is getting broken and rewritten as this:

<script>function $s8z$var$gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],$s8z$var$gtag("js",new Date),$s8z$var$gtag("config","UA-xxx-xx");</script>

🎛 Configuration (.babelrc, package.json, cli command)

{
  "plugins": [
    "babel-plugin-styled-components"
  ]
}

🤔 Expected Behavior

Inline snippet stays intact

😯 Current Behavior

The global is being changed to some garbage variables

💁 Possible Solution

🔦 Context

package.json scripts (using the build one):

  "scripts": {
    "develop": "concurrently -r \"npm:type-check:watch\" \"npm:start\"",
    "start": "parcel serve ./src/index.html",
    "sw": "sw-precache --config=sw-precache-config.js",
    "build": "npm run type-check && rm -rf ./app/* && cross-env NODE_ENV=production parcel build ./src/index.html --experimental-scope-hoisting --public-url / --out-dir ./app --no-source-maps && npm run sw",
    "deploy": "npm run build && rm -f ./app/report.html && npm run deploy-now",
    "deploy-now": "sls syncToS3",
    "test": "jest",
    "type-check": "tsc --noEmit",
    "type-check:watch": "tsc --noEmit --watch",
    "postbuild": "react-snap"
  },

💻 Code Sample

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

    gtag('config', 'UA-xxx-xx');
  </script>

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.11.0
| Node | v11.8.0
| npm/Yarn | 6.7.0
| Operating System | windows 10

[mischnic]

Parcel processes the code in every script tag, there is currently no way to disable that.
But the output should still work?

[pocesar]

code expects to call gtag() thorough other part of the code, not $s8z$var$gtag (aka, not inside the index.html) https://developers.google.com/analytics/devguides/collection/gtagjs/events

[mischnic]

That's unfortunately not possible at the moment. Closing as a duplicate of https://github.com/parcel-bundler/parcel/issues/2398

[tiborsaas]

@pocesar I've just ran into this and came up with the following solution:

Add this to the HTML:

<meta type="google-analytics">

Run the following code as postprocess.js

const path = require('path');
const fs = require('fs').promises;

async function replace() {
    const placeholder = '<meta type="google-analytics">';
    const indexPath = path.resolve(__dirname, '../dist/index.html');
    const html = await fs.readFile(indexPath);
    const code = await fs.readFile(path.resolve(__dirname, './analytics.html'));
    const replaced = html.toString().replace(placeholder, code);
    fs.writeFile(indexPath, replaced);
}

replace();

Finally update my NPM build script using npm-run-all to run the above script when the build has finished.

[stephenmathieson]

FWIW I've just done this on my end:

  <script>
    window.dataLayer = window.dataLayer || [];
    window.gtag = function gtag(){dataLayer.push(arguments);} // <-- note `window.gtag =`
    gtag('js', new Date());

    gtag('config', 'UA-xxx-xx');
  </script>

This ensures the gtag global is defined properly and Parcel doesn't get in the way.