Make gtag compliant with GDPR

🐛 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:[e-mail]',
            },
          ],
        },
      ],
      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

[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]

@slorber since my initial comments a lot of things have changed. You can achieve a GDPR compliant integration with GTAG which is Google Tag Manager Nowadays you can also turn off data sharing with google analytics which is the GA-TAG im not 100% comfortable with my knowhow on UA but last time i reviewed this, that was uncompliant. (This is not legal advice here)

Here the reference for GTAG: https://support.google.com/tagmanager/answer/7582054?hl=en I wrote modern formerly as many people tend to host javascripts on their own pages 😃