Docusaurus: Docusaurus 2 - Adding GTAG Manager doesn't work

[Alcatros]

🐛 Improvement (European E-Privacy directive and GDPR) - GTAG Manager not recognized

We add the google tag manager configuration like described in Docusaurus 1 but Docusaurus 2 seems not to recognize it. Responds with : Error: The field(s) 'gaTrackingId', 'gaGtag' are not recognized in docusaurus.config.js

I've realised that GTAG Manager can't be loaded with the current implementation, this is not according to the european data regulations eg. GDPR and E-Privacy. Therefore the errors below are not correct as stated as the feature is missing and we have changed it from a bug report to an improvement.

To Reproduce

Use the following config:

module.exports = {
  title: 'ProductMS Docs',
  tagline: 'Here we show you how you can use our software.',
  url: 'https://docs.companyname.com',
  baseUrl: '/',
  favicon: 'img/favicon.ico',
  organizationName: 'Company Compliance GmbH', // Usually your GitHub org/user name.
  projectName: 'Documentation', // Usually your repo name.
  gaTrackingId: 'GTM-ABCDEF', // Google Analytics GA TAG
  gaGtag: true,
  themeConfig: {
    navbar: {
      title: 'ProductMS Docs',
      logo: {
        alt: 'Product-Detail Logo',
        src: 'img/logo.svg',
      },
      links: [
        {to: 'docs/welcome', label: 'Docs', position: 'left'},
        {
          href: 'https://portal.companyname.com',
          label: 'Get Product-Detail',
          position: 'left',
        },
        {
          href: 'https://companyname.atlassian.net/servicedesk/customer/portals',
          label: 'Support',
          position: 'left',
        },
        {
          href: 'https://www.companyname.com/print_page.php',
          label: 'Imprint',
          position: 'right',
        },
        {
          href: 'https://www.companyname.com/privacy_policy_en.php',
          label: 'Privacy Policy',
          position: 'right',
        },
      ],
    },
    footer: {
      style: 'dark',
      links: [
        {
          title: 'Docs',
          items: [
            {
              label: 'Welcome',
              to: 'docs/welcome',
            },
          ],
        },
        {
          title: 'Support',
          items: [
            {
              label: 'EMail',
              href: 'mailto:[email protected]',
            },
          ],
        },
      ],
      logo: {
        alt: 'Company Compliance Logo',
        src: 'https://www.companyname.com/assets/img/Company.png',
      },
      copyright: `Copyright © ${new Date().getFullYear()} Company Compliance Limited`,
    },
  },
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
      },
    ],
  ],
};

Reproduction Steps:

yarn run v1.19.2
$ docusaurus build
Creating an optimized production build...
Error: The field(s) 'gaTrackingId', 'gaGtag' are not recognized in docusaurus.config.js

Expected behavior

I would have expected this to incorporate Google Tag Manager properly

Actual Behavior

It responded with the error message Error: The field(s) 'gaTrackingId', 'gaGtag' are not recognized in docusaurus.config.js

Your Environment

{
  "name": "g-3-dpms-documentation",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "docusaurus": "docusaurus",
    "start": "docusaurus start",
    "build": "docusaurus build",
    "swizzle": "docusaurus swizzle",
    "deploy": "docusaurus deploy"
  },
  "dependencies": {
    "@docusaurus/core": "^2.0.0-alpha.23",
    "@docusaurus/preset-classic": "^2.0.0-alpha.23",
    "classnames": "^2.2.6",
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Reproducible Demo

I dont have a runnable demo, as my build server is in a vpc, but i assume that you would be able to tell me if im doing something which is not possible or if its a bug / if im the first one to try, thank you

[yangshun]

Please read the docs - https://v2.docusaurus.io/docs/migrating-from-v1-to-v2/#gatrackingid

[Alcatros]

@yangshun thanks for the quick hint, how come the documentation doesnt show GTM-ABCDE , Google Tag Manager Identifications start with GTM and Universal Analytics from Google with UA

[Alcatros]

@yangshun Actually you should reopen the Issue. Docusaurus can't load GTAG Manager and is therefore uncompliant by default for European data regulations and privacy rights of the customer.

This makes docusaurus un-useable for european companies.

The modern GTAG (not to mistake by "GATAG or UA" which are the old versions), can understand if the customer wants his data to be taken or not for visiting the page. Otherwise docusaurus would need to implement an opt out banner itself to not load the Analytics.

[yangshun]

Ok then it's an improvement to make, and not a bug in the current implementation.

[Alcatros]

@yangshun Thanks, i've corrected the header accordingly

[amimas]

This would be a nice feature but just wanted to point out that google tag manager integration never existed in v1.

[shinebayar-g]

@Alcatros Is Google Tag Manager even supported in v1?

@amimas Do you know if it's there any workaround to get google tag manager working?

[amimas]

@shinebayar-g - I'm using V1 in several of my documentation website and have integrated with Google Tag Manager.

The way I've done it is this:

1. Add a script file in website/static/js/google-tag-manager.js that looks like this:

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','<GTM-TAG-ID-GOES-HERE>');

1. Refer to the above script in site configuration (website/siteConfig.js):

  scripts: [
    siteUrl + "js/ep-google-tag-manager.js",
    'https://buttons.github.io/buttons.js'
  ]

The above steps will add the integration for you.

This would be a very simple feature for the V1 so that we could just add tag manager in website/siteConfig.js like this:

...
gtm_id: <GTM-TAG-ID-GOES-HERE>
...

But the V1 code base is apparently locked now; no small features or even bug fixes, even though V2 is not even past the alpha release yet.

[Alcatros]

@Alcatros Is Google Tag Manager even supported in v1?

@amimas Do you know if it's there any workaround to get google tag manager working?

No it isnt, the naming made me think it was but it was the prior version

@shinebayar-g - I'm using V1 in several of my documentation website and have integrated with Google Tag Manager.

The way I've done it is this:

1. Add a script file in `website/static/js/google-tag-manager.js` that looks like this:

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','<GTM-TAG-ID-GOES-HERE>');

1. Refer to the above script in site configuration (`website/siteConfig.js`):

  scripts: [
    siteUrl + "js/ep-google-tag-manager.js",
    'https://buttons.github.io/buttons.js'
  ]

The above steps will add the integration for you.

This would be a very simple feature for the V1 so that we could just add tag manager in website/siteConfig.js like this:

...
gtm_id: <GTM-TAG-ID-GOES-HERE>
...

But the V1 code base is apparently locked now; no small features or even bug fixes, even though V2 is not even past the alpha release yet.

Would have been nice if you wrote it into the new codebase, the current Docusaurus cant be used without the consent notices for spying which documentation pages are visited. Makes it very unuseable, we like Docusaurus very much but compliance comes first

[amimas]

Would have been nice if you wrote it into the new codebase, the current Docusaurus cant be used without the consent notices for spying which documentation pages are visited. Makes it very unuseable, we like Docusaurus very much but compliance comes first

Not sure what you mean @Alcatros . It was just a workaround showing how gtm can be used with V1 as of this moment.