# 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](https://uniform.app). See our [documentation](https://docs.uniform.app) for more details.

## Usage:

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

```tsx
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`:
```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
