Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove unsupported ga-lite and update existing calls to GA4 #6366

Merged
merged 3 commits into from
Oct 24, 2023
Merged

Remove unsupported ga-lite and update existing calls to GA4 #6366

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cd5045f
Cleanup old ga-lite tag and refactor GA4
kmiddleton14 Oct 20, 2023
f5d5553
cleanup
kmiddleton14 Oct 20, 2023
952a8ff
cleanup2
kmiddleton14 Oct 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .env.production
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT'
1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@
"classnames": "^2.2.6",
"date-fns": "^2.16.1",
"debounce": "^1.2.1",
"ga-lite": "^2.1.4",
"github-slugger": "^1.3.0",
"next": "^13.4.1",
"next-remote-watch": "^1.0.0",
Expand Down
15 changes: 6 additions & 9 deletions src/components/Layout/Feedback.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@

import {useState} from 'react';
import {useRouter} from 'next/router';
import {ga} from '../../utils/analytics';

export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) {
const {asPath} = useRouter();
Expand Down Expand Up @@ -48,14 +47,12 @@ const thumbsDownIcon = (
function sendGAEvent(isPositive: boolean) {
// Fragile. Don't change unless you've tested the network payload
// and verified that the right events actually show up in GA.
ga(
'send',
'event',
'button',
'feedback',
window.location.pathname,
isPositive ? '1' : '0'
);
// @ts-ignore
gtag('event', 'feedback', {
event_category: 'button',
event_label: window.location.pathname,
value: isPositive ? 1 : 0,
});
}

function SendFeedback({onSubmit}: {onSubmit: () => void}) {
Expand Down
17 changes: 9 additions & 8 deletions src/pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,20 @@
import {useEffect} from 'react';
import {AppProps} from 'next/app';
import {useRouter} from 'next/router';
import {ga} from '../utils/analytics';

import '@docsearch/css';
import '../styles/algolia.css';
import '../styles/index.css';
import '../styles/sandpack.css';

if (typeof window !== 'undefined') {
if (process.env.NODE_ENV === 'production') {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why was this check removed? Does this mean that PR preview deploys and locally hosted environments will now send GA4 events?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This check was for the two deprecated ga calls that were also removed so it's no longer needed

ga('create', process.env.NEXT_PUBLIC_GA_TRACKING_ID, 'auto');
ga('send', 'pageview');
}
const terminationEvent = 'onpagehide' in window ? 'pagehide' : 'unload';
window.addEventListener(terminationEvent, function () {
ga('send', 'timing', 'JS Dependencies', 'unload');
// @ts-ignore
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you install the gtag typescript typtes instead of a ts-ignore here? I think yarn add @types/gtag.js --dev should do the trick.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh nice! I can follow up and add this in a separate PR

gtag('event', 'timing', {
event_label: 'JS Dependencies',
event: 'unload',
});
});
}

Expand All @@ -44,8 +43,10 @@ export default function MyApp({Component, pageProps}: AppProps) {
useEffect(() => {
const handleRouteChange = (url: string) => {
const cleanedUrl = url.split(/[\?\#]/)[0];
ga('set', 'page', cleanedUrl);
ga('send', 'pageview');
// @ts-ignore
gtag('event', 'pageview', {
event_label: cleanedUrl,
});
};
router.events.on('routeChangeComplete', handleRouteChange);
return () => {
Expand Down
4 changes: 2 additions & 2 deletions src/pages/_document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ const MyDocument = () => {
<Head />
<script
async
src={`https://www.googletagmanager.com/gtag/js?id=${siteConfig.googleAnalyticsTagId}`}
src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_TRACKING_ID}`}
/>
<script
dangerouslySetInnerHTML={{
__html: `window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', '${siteConfig.googleAnalyticsTagId}');`,
__html: `window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', '${process.env.NEXT_PUBLIC_GA_TRACKING_ID}');`,
}}
/>
<body className="font-text font-medium antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
Expand Down
1 change: 0 additions & 1 deletion src/siteConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,4 @@ exports.siteConfig = {
apiKey: 'e8451218980a351815563de007648b00',
indexName: 'beta-react',
},
googleAnalyticsTagId: 'G-B1E83PJ3RT',
};
5 changes: 0 additions & 5 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2765,11 +2765,6 @@ functional-red-black-tree@^1.0.1:
resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=

ga-lite@^2.1.4:
version "2.1.4"
resolved "https://registry.yarnpkg.com/ga-lite/-/ga-lite-2.1.4.tgz#f0c1fd3234bc44d8b15db640a93b34dbce84d43a"
integrity sha512-OJqPbutD8SfgF8SebyLh0uHdpQH32d5TuviXao5yPjyO2sGW3Gm+ooDmOhvXITgPepwwKxzv7ZMVKk2/hg/+lg==

gensync@^1.0.0-beta.2:
version "1.0.0-beta.2"
resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
Expand Down
Loading