@docusaurus/plugin-google-gtag

What is @docusaurus/plugin-google-gtag?

@docusaurus/plugin-google-gtag is a plugin for Docusaurus that integrates Google Analytics (via gtag.js) into your Docusaurus site. It allows you to track page views and other events to gain insights into your site's traffic and user behavior.

What are @docusaurus/plugin-google-gtag's main functionalities?

Basic Setup

This feature allows you to set up the Google Analytics tracking ID and anonymize IP addresses. The tracking ID is required to link your site to your Google Analytics account.

{
  "plugins": [
    [
      "@docusaurus/plugin-google-gtag",
      {
        "trackingID": "YOUR_GOOGLE_ANALYTICS_TRACKING_ID",
        "anonymizeIP": true
      }
    ]
  ]
}

Custom Events

This feature allows you to track custom events such as button clicks. You can use the `useGtag` hook to send custom events to Google Analytics.

{
  "plugins": [
    [
      "@docusaurus/plugin-google-gtag",
      {
        "trackingID": "YOUR_GOOGLE_ANALYTICS_TRACKING_ID",
        "anonymizeIP": true
      }
    ]
  ]
}

// In your React component
import React from 'react';
import { useGtag } from '@docusaurus/plugin-google-gtag';

const MyComponent = () => {
  const gtag = useGtag();

  const handleClick = () => {
    gtag('event', 'click', {
      event_category: 'button',
      event_label: 'my_button'
    });
  };

  return <button onClick={handleClick}>Click me</button>;
};

export default MyComponent;

Other packages similar to @docusaurus/plugin-google-gtag

react-ga

react-ga is a JavaScript module that allows you to easily add Google Analytics to your React application. It provides a simple API for tracking page views and custom events. Compared to @docusaurus/plugin-google-gtag, react-ga is more general-purpose and can be used with any React application, not just Docusaurus.

gatsby-plugin-google-gtag

gatsby-plugin-google-gtag is a Gatsby plugin that integrates Google Analytics using gtag.js. It offers similar functionalities to @docusaurus/plugin-google-gtag but is specifically designed for Gatsby sites. It allows you to track page views and custom events in a Gatsby application.

next-google-analytics

next-google-analytics is a Next.js plugin for integrating Google Analytics using gtag.js. It provides an easy way to add Google Analytics to your Next.js application and track page views and custom events. Like @docusaurus/plugin-google-gtag, it is tailored for a specific framework, in this case, Next.js.

README

The README file is missing

Changelog

2.0.0-alpha.32 (2019-11-04)

Features

• Add <Redirect> component for client side redirect. Example Usage:

import React from 'react';
import {Redirect} from '@docusaurus/router';

function Home() {
  return <Redirect to="/docs/test" />;
}

• Allow user to add custom HTML to footer items. #1905
• Added code block line highlighting feature (thanks @lex111)! If you have previously swizzled the CodeBlock theme component, it is recommended to update your source code to have this feature. (#1860)

Bug Fixes

• Fix @theme/Tabs component to be able to create tabs with only one item.
• Fix MDX @theme/Heading component. If there is no id, it should not create anchor link.
• Fixed a bug in which if themeConfig.algolia is not defined, the custom searchbar won't appear. If you've swizzled Algolia SearchBar component before, please update your source code otherwise CSS might break. See #1909 for reference.

- <Fragment>
+ <div className="navbar__search" key="search-box">

• Slightly adjust search icon position to be more aligned on small width device. (#1893)
• Fix algolia styling bug, previously search suggestion result is sometimes hidden. (#1915)
• Changed the way we read the USE_SSH env variable during deployment to be the same as in v1.
• Fix accessing docs/ or /docs/xxxx that does not match any existing doc page should return 404 (Not found) page, not blank page. (#1903)
• Prioritize @docusaurus/core dependencies/ node_modules over user's node_modules. This fix a bug whereby if user has core-js@3 on its own node_modules but docusaurus depends on core-js@2, we previously encounter Module not found: core-js/modules/xxxx (because core-js@3 doesn't have that).
• Fix a bug where docs plugin add /docs route even if docs folder is empty. We also improved docs plugin test coverage to 100% for stability before working on docs versioning. (#1912)

Performance Improvement

• Reduce memory usage consumption. (#1900)
• Significantly reduce main bundle size and initial HTML payload on production build. Generated files from webpack is also shorter in name. (#1898)
• Simplify blog metadata. Previously, accessing /blog/post-xxx will request for next and prev blog post metadata too aside from target post metadata. We should only request target post metadata. (#1908)

Others

• Convert sitemap plugin to TypeScript. (#1894)
• Refactor dark mode toggle into a hook. (#1899)