Search code examples
reactjsgoogle-analyticsdocusaurus

Docusaurus V2 - Activating Google Analytics hides navbar and footer


We want to implement Google Analytics into our online website, however when we add the code our menu and footer disappears.

According to documentation on the official website https://v2.docusaurus.io/docs/using-plugins/#docusaurusplugin-google-analytics this can be achieved through updating the docusaurus.config.js and adding a plugin @docusaurus/plugin-google-analytics or by by adding to the present @docusaurus/preset-classic.


  1. Installing as a plugin with the following code, hides our menu and footer (just vanishes). But Google Analytics does register the real-time traffic.
  themeConfig: {
    googleAnalytics: {
      trackingID: 'UA-GACODE-1',
      // Optional fields.
      anonymizeIP: true, // Should IPs be anonymized?
    },
  },

  1. Trying to activate it through the existing @docusaurus/present-clasic doesn't process anything (Chrome inspector has no traffic to Google and AdBlock is not active)
presets: [
    [
      '@docusaurus/preset-classic',
      {
        googleAnalytics: {
          trackingID: 'UA-GACODE-1',
        },
        docs: {
          sidebarPath: require.resolve('./sidebars.js')
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
        highlight: { 
          theme: 'default',
        },
      },
    ],
  ],

Has anyone activated Google Analytics successfully on Docusaurus V2?

Thank you for the help!


Solution

  • I think the accepted answer is no longer valid after this PR. So both the gtag and googleAnalytics should go back into the presets configuration now.

    // docusaurus.config.js
    
    module.exports = {
      presets: [
        [
          '@docusaurus/preset-classic',
          {
            docs: /* ... */,
    +       gtag: {
    +         trackingID: 'xxx',
    +       },
    +       googleAnalytics: {
    +         trackingID: 'xxx',
    +       },
          },
        ],
      ],
      themeConfig: {
    -   gtag: {
    -     trackingID: 'xxx',
    -   },
    -   googleAnalytics: {
    -     trackingID: 'xxx',
    -   },
        // other options
      },
    };