Skip to content

Instantly share code, notes, and snippets.

View DopamineDriven's full-sized avatar
🎯
cloud hopping

Andrew Ross DopamineDriven

🎯
cloud hopping
View GitHub Profile
NEXT_PUBLIC_GA_TRACKING_ID=G-ABC4850XYZ
import '@/styles/index.css';
import '@/styles/chrome-bug.css';
import { AppProps, NextWebVitalsMetric } from 'next/app';
import { useEffect, FC } from 'react';
import { useRouter } from 'next/router';
import * as gtag from '@/lib/analytics';
const Noop: FC = ({ children }) => <>{children}</>;
@DopamineDriven
DopamineDriven / _app.tsx
Created June 7, 2021 08:52
app routing
const router = useRouter();
useEffect(() => {
const handleRouteChange = (url: URL) => {
gtag.pageview(url);
};
router.events.on(
'routeChangeComplete',
handleRouteChange
);
import Document, {
Head,
Html,
Main,
NextScript,
DocumentContext,
DocumentProps,
DocumentInitialProps
} from 'next/document';
import { GA_TRACKING_ID } from '@/lib/analytics';
@DopamineDriven
DopamineDriven / _document.tsx
Created June 7, 2021 08:50
Document.tsx full
import Document, {
Head,
Html,
Main,
NextScript,
DocumentContext,
DocumentProps,
DocumentInitialProps
} from 'next/document';
import { GA_TRACKING_ID } from '@/lib/analytics';
@DopamineDriven
DopamineDriven / _document.tsx
Created June 7, 2021 08:49
Document Script Tags
<Head>
<meta charSet='utf-8' />
<script
async
src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
/>
<script
dangerouslySetInnerHTML={{
__html: `window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
import Document, {
Head,
Html,
Main,
NextScript,
DocumentContext,
DocumentProps,
DocumentInitialProps
} from 'next/document';
import { GA_TRACKING_ID } from '@/lib/analytics';
@DopamineDriven
DopamineDriven / analytics.ts
Created June 7, 2021 08:46
final-analytics-code
export const GA_TRACKING_ID =
process.env.NEXT_PUBLIC_GA_TRACKING_ID ?? '';
export const pageview = (url: URL) => {
window.gtag('config', GA_TRACKING_ID, {
page_path: url
});
};
export const event = (
interface EventParams {
checkout_option?: string;
checkout_step?: number;
content_id?: string;
content_type?: string;
coupon?: string;
currency?: string;
description?: string;
fatal?: boolean;
items?: Item[];
type EventNames =
| 'add_payment_info'
| 'add_to_cart'
| 'add_to_wishlist'
| 'begin_checkout'
| 'checkout_progress'
| 'exception'
| 'generate_lead'
| 'login'
| 'page_view'