지난 주에 우리는 놀라운 클라이언트(uWork AS)를 위한 새로운 웹사이트( https://uwork.no )를 출시했으며 Google 태그 관리자(GTM)를 설치하고 실행해야 했습니다. 글쎄요!

관심 있는 사람들을 위해 스택은 다음과 같습니다.

Next.js

TailwindCSS

라라벨(API)

DigitalOcean에서 호스팅되는 Kubernetes(K8S)

배포용 Bitbucket 파이프라인이 포함된 Bitbucket

문제

GTM이 이미 설정되어 있으므로 GTM 스크립트를 삽입하기만 하면 된다고 생각했습니다. 그래서 우리는 했습니다!

스크립트가 로드되었는지 ✅, Chrome ✅용 Google 태그 관리자 확장 프로그램을 사용하여 GTM이 올바르게 로드되었는지도 확인했습니다.

그런 다음 출시 전 체크리스트를 완료한 후 PROD로 푸시하고 DEPLOY를 실행했습니다 🚀😎

다음날 우리는 Google Analytics를 모니터링하고 인덱스 페이지(경로: /)의 모든 데이터를 발견하여 조사를 시작했고 다음을 발견했습니다.

페이지에서 페이지로 이동할 때 GA 태그가 실행되지 않았습니다!

해결책

하루 종일 인터넷에서 조사하고 읽은 후 이 문제를 해결하는 방법에 대한 다양한 제안을 찾은 후 아래에서 기존 Google 애널리틱스 태그를 사용한 구현을 보여줍니다.
pages/_document.tsx에 GMT 스크립트 삽입:

<>
    {/* Google Tag Manager */}
    <script
        dangerouslySetInnerHTML={{
            __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
                'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
                })(window,document,'script','dataLayer','${GTM_ID}');`,
        }}
    />
    {/* End Google Tag Manager */}
    {/* Google Tag Manager (noscript) */}
    <noscript
        dangerouslySetInnerHTML={{
            __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${GTM_ID}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
        }}
    />
    {/* End Google Tag Manager (noscript) */}
</>

교체/정의GTM_ID를 기억하십시오!

그런 다음 페이지 보기 유틸리티 함수utils/gtm.ts를 만듭니다.

export const GTMPageView = (url: string) => {
    interface PageEventProps {
        event: string;
        page: string;
    }

    const pageEvent: PageEventProps = {
        event: 'pageview',
        page: url,
    };
    //@ts-ignore
    window && window.dataLayer && window.dataLayer.push(pageEvent);
    return pageEvent;
};

그런 다음 모든 페이지에서 "pageview"이벤트를 실행해야 합니다. useEffectpages/_app.tsx를 사용하여 라우터에 리스너(routeChangeComplete)를 설정하면 됩니다.

import { AppProps } from 'next/app';
import Router from 'next/router';
import React, {useEffect } from 'react';
import { GTMPageView } from '../utils/gtm';

function MyApp({ Component, pageProps }: AppProps) {
    // ...

    // Initiate GTM
    useEffect(() => {
        const handleRouteChange = (url: string) => GTMPageView(url);
        Router.events.on('routeChangeComplete', handleRouteChange);
        return () => {
            Router.events.off('routeChangeComplete', handleRouteChange);
        };
    }, []);

    // ...
}

export default MyApp;

거의 완료되었습니다. 이제 GA 태그를 실행할 새 맞춤 이벤트를 추가해야 합니다.

GTM 콘솔에서:

트리거로 이동하여 "새로 만들기"를 클릭합니다

.

원하는 대로 이름을 지정합니다. 여기서는 이름을 "PageViewCustom"으로 지정하겠습니다

.

"트리거 구성"에서 "사용자 정의 이벤트"를 선택하고 "이벤트 이름"에서 "페이지뷰"를 작성합니다. <- 이것은 코드/함수에 정의된 것과 같아야 합니다GTMPageView.

그런 다음 태그로 이동하여 GA 태그를 찾고 위에서 생성한 이벤트를 사용하도록 구성합니다.

변경 사항을 테스트하고 게시합니다 :)

업데이트: 다른 대안

"기록 변경"트리거를 사용하여 동일한 결과를 얻을 수도 있습니다.

그게 다야! 행복한 추적 🙃