@uniformdev/context-gtag
TypeScript icon, indicating that this package has built-in type declarations

19.207.0 • Public • Published

Uniform Context Google Global Site Tag (GTAG) Plugin

Contains a plugin for analytics event emission to Google Analytics via gtag.js

part of the Uniform Platform. See our documentation for more details.

Usage:

This package is a plugin for Uniform Context, so we just add it like this:

import { Context, ManifestV2, ContextPlugin } from "@uniformdev/context";
import { NextCookieTransitionDataStore } from "@uniformdev/context-next";
import { NextPageContext } from "next";
import manifest from "./manifest.json";
import { enableGoogleGtagAnalytics } from '@uniformdev/context-gtag';

export function createUniformContext(serverContext?: NextPageContext) {
  const plugins: ContextPlugin[] = [enableGoogleGtagAnalytics()];

  const context = new Context({
    manifest: manifest as ManifestV2,
    transitionStore: new NextCookieTransitionDataStore({
      serverContext,
    }),
    plugins: plugins
  });

  return context;
}

and then load Google Analytics tracking itself in _document.tsx:

class MyDocument extends Document {
  render(): React.ReactElement {
    return (
      <Html lang="en">
        <Head />
        <body className="leading-normal tracking-normal text-white gradient">
          <script async src={`https://www.googletagmanager.com/gtag/js?id=${process.env.YOUR_GA_ID}`}></script>
          <script
            dangerouslySetInnerHTML={{
              __html: `
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());
                gtag('config', '${gaTrackingId}', {
                  page_path: window.location.pathname,
                });
                `
            }}
          />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

or you can include Gtag via GTM - https://support.google.com/tagmanager/answer/6102821?hl=en_US

Google Analytics 4

This package uses event_category, event_label properties from GA UA

which are not supported by GA4 by default. Also Uniform is using property is_control_group.

You will have to create these as Custom Dimensions yourself. See https://support.google.com/analytics/answer/10075209?hl=en#new-custom-dimension for more info

Readme

Keywords

none

Package Sidebar

Install

npm i @uniformdev/context-gtag

Weekly Downloads

1,264

Version

19.207.0

License

SEE LICENSE IN LICENSE.txt

Unpacked Size

13.6 kB

Total Files

8

Last publish

Collaborators

  • serhiiouniformdev
  • jakub-uniform
  • m1r1k
  • originalexe
  • ilyasmez
  • drolexan
  • alenpelin
  • kamsar
  • adamluniform