Docusaurus, track actions with Google Analytics

Question

I have a docusaurus as front for my company website. And I'm wondering, how to track clicks on the link to the login form in the administrator's page.

This link is in the siteconfig.js:

headerLinks: [
    {href: 'https://demo.multifactor.ru', label: 'Demo'},
    {doc: 'intro', label: 'Documentation'},
    {doc: 'api', label: 'API'},
    {href: '/login', label: 'Login'}
  ],

I've tried to add custom tag, like in the example below, but docusaurus ignore this construction

headerLinks: [
    {href: 'https://demo.multifactor.ru', label: 'Demo'},
    {doc: 'intro', label: 'Documentation'},
    {doc: 'api', label: 'API'},
    {href: '/login', label: 'Login', onClick: 'ga (‘send’, ‘event’, ‘submit’, ‘login_link’);'}
  ],

does anybody has ideas about how to do this?

Answer 1

which version of Docusaurus you are using? I only know how to config the google-analytics on Docusaurus.v2 .

If you are using Docusaurus.v2, you can easily config the google-analytics by:

// docusaurus.config.js
module.exports = {
  plugins: ['@docusaurus/plugin-google-analytics'],
  themeConfig: {
    googleAnalytics: {
      trackingID: 'UA-141789564-1',
      // Optional fields.
      anonymizeIP: true, // Should IPs be anonymized?
    },
  },
};

or by:

// docusaurus.config.js
module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        // Will be passed to @docusaurus/plugin-google-analytics.
        googleAnalytics: {
          trackingID: 'UA-141789564-1',
          // Optional fields.
          anonymizeIP: true, // Should IPs be anonymized?
        },
      },
    ],
  ],
};

If you are using Docusarurus.v1, highly recommand you to migrate your website from v1 to v2 following instructions . Also, how to migrate the google-analytics plugin is also mentioned in the doc .

Answer 2

No way at the moment. You can swizzle the components or just look at the number of page views for that page within Google Analytics.