Google Analytics를 Nextjs AMP 모드로 이동하려면
가장 중요한 일
GA4가 아닌 일반 에뮬레이션 속성 사용(UA-시작 ID)!(2021년 8월 4일까지 조사)
[AmpAnalytics <unknown id>] No triggers were found in the config. No analytics data will be sent.
GA4의 ID를 이동할 수 없습니다...실시 방침
AMP는 해당 페이지에 대해 amp-anaalythics를 사용하며 이 외에는 사용하지 않습니다.
설치 단계
환경 변수 사용
next.config.js
const config = {
webpack5: false,
webpack: (config) => {
},
...
env: {
GOOGLE_ANALYTICS_ID: process.env.GOOGLE_ANALYTICS_ID,
},
}
gtag.ts
yarn add @types/gtag.js
gtag.tsdeclare global {
interface Window {
gtag: Gtag.Gtag
}
}
export const GA_ID = process.env.GOOGLE_ANALYTICS_ID
export const existsGaId = GA_ID !== ''
export const pageview = (path) => {
window.gtag('config', GA_ID, {
page_path: path,
})
}
export const event = ({ action, category, label, value = '' }) => {
if (!existsGaId) {
return
}
window.gtag('event', action, {
event_category: category,
event_label: JSON.stringify(label),
value,
})
}
_document.tsx
this.props.inAmpMode를 사용하여 AMP 페이지인지 여부에 따라 스크립트를 구분합니다.
_document.tsx
...
import { existsGaId, GA_ID } from '@/utils/gtag'
class MyDocument extends Document {
static async getInitialProps(ctx) {
...
}
}
render() {
const isAmp = this.props.inAmpMode
const ampAnalyticsScriptObject = () => {
return {
vars: {
account: GA_ID,
gtag_id: GA_ID,
config: {
[GA_ID]: { groups: 'default' },
},
},
triggers: {
trackPageview: {
on: 'visible',
request: 'pageview',
},
},
}
}
return (
<Html>
<script
async
custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"
/>
{/* Google Analytics */}
{existsGaId && !isAmp ? (
<head>
<script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`} />
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${GA_ID}', {
page_path: window.location.pathname,
});`,
}}
/>
</head>
) : null}
<Head />
<body>
{existsGaId && isAmp ? (
<amp-analytics type="gtag" data-credentials="include">
<script
type="application/json"
dangerouslySetInnerHTML={{
__html: JSON.stringify(ampAnalyticsScriptObject()),
}}
/>
</amp-analytics>
) : null}
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
_app.tsx
useEffect를 사용하여 활동 등록
_app.tsx
// import '../styles/globals.css'
import { Layout } from '@/components/Layout'
import Router from 'next/router'
import React, { useEffect } from 'react'
import * as gtag from '@/utils/gtag'
function MyApp({ Component, pageProps }) {
useEffect(() => {
if (!gtag.existsGaId) {
return
}
const handleRouteChange = (path) => {
gtag.pageview(path)
}
Router.events.on('routeChangeComplete', handleRouteChange)
return () => {
Router.events.off('routeChangeComplete', handleRouteChange)
}
}, [])
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}
export default MyApp
가장 중요한 일
GA4가 아닌 일반 아날로그 속성을 사용합니다!
Reference
이 문제에 관하여(Google Analytics를 Nextjs AMP 모드로 이동하려면), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/dl10yr/articles/021c1b0fc2ec35텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)