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

* Cleanup old ga-lite tag and refactor GA4

* cleanup

* cleanup2
This commit is contained in:
Kathryn Middleton
2023-10-24 10:35:15 -04:00
committed by GitHub
parent a0cacd7d3a
commit 717f9b5da0
7 changed files with 18 additions and 27 deletions

View File

@@ -1 +1 @@
NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4' NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT'

View File

@@ -30,7 +30,6 @@
"classnames": "^2.2.6", "classnames": "^2.2.6",
"date-fns": "^2.16.1", "date-fns": "^2.16.1",
"debounce": "^1.2.1", "debounce": "^1.2.1",
"ga-lite": "^2.1.4",
"github-slugger": "^1.3.0", "github-slugger": "^1.3.0",
"next": "^13.4.1", "next": "^13.4.1",
"next-remote-watch": "^1.0.0", "next-remote-watch": "^1.0.0",

View File

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

View File

@@ -5,7 +5,6 @@
import {useEffect} from 'react'; import {useEffect} from 'react';
import {AppProps} from 'next/app'; import {AppProps} from 'next/app';
import {useRouter} from 'next/router'; import {useRouter} from 'next/router';
import {ga} from '../utils/analytics';
import '@docsearch/css'; import '@docsearch/css';
import '../styles/algolia.css'; import '../styles/algolia.css';
@@ -13,13 +12,13 @@ import '../styles/index.css';
import '../styles/sandpack.css'; import '../styles/sandpack.css';
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
if (process.env.NODE_ENV === 'production') {
ga('create', process.env.NEXT_PUBLIC_GA_TRACKING_ID, 'auto');
ga('send', 'pageview');
}
const terminationEvent = 'onpagehide' in window ? 'pagehide' : 'unload'; const terminationEvent = 'onpagehide' in window ? 'pagehide' : 'unload';
window.addEventListener(terminationEvent, function () { window.addEventListener(terminationEvent, function () {
ga('send', 'timing', 'JS Dependencies', 'unload'); // @ts-ignore
gtag('event', 'timing', {
event_label: 'JS Dependencies',
event: 'unload',
});
}); });
} }
@@ -44,8 +43,10 @@ export default function MyApp({Component, pageProps}: AppProps) {
useEffect(() => { useEffect(() => {
const handleRouteChange = (url: string) => { const handleRouteChange = (url: string) => {
const cleanedUrl = url.split(/[\?\#]/)[0]; const cleanedUrl = url.split(/[\?\#]/)[0];
ga('set', 'page', cleanedUrl); // @ts-ignore
ga('send', 'pageview'); gtag('event', 'pageview', {
event_label: cleanedUrl,
});
}; };
router.events.on('routeChangeComplete', handleRouteChange); router.events.on('routeChangeComplete', handleRouteChange);
return () => { return () => {

View File

@@ -11,11 +11,11 @@ const MyDocument = () => {
<Head /> <Head />
<script <script
async 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 <script
dangerouslySetInnerHTML={{ 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"> <body className="font-text font-medium antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">

View File

@@ -17,5 +17,4 @@ exports.siteConfig = {
apiKey: 'e8451218980a351815563de007648b00', apiKey: 'e8451218980a351815563de007648b00',
indexName: 'beta-react', indexName: 'beta-react',
}, },
googleAnalyticsTagId: 'G-B1E83PJ3RT',
}; };

View File

@@ -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" resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc= 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: gensync@^1.0.0-beta.2:
version "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" resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"