Contains a plugin for analytics event emission to Google Analytics via gtag.js
part of the Uniform Platform. See our documentation for more details.
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
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