React-Next.js 애플리케이션에 Google 애널리틱스를 추가하는 방법 📈⚛️

4503 단어 tutorialjavascriptreactprogramming
데이터는 오늘날 세계에서 가장 가치 있는 상품입니다. 따라서 사용자가 플랫폼을 사용하는 방식을 이해하는 것은 비즈니스를 다음 단계로 끌어올리는 데 매우 중요합니다.

그리고 분석의 세계에서는 Google이 리더입니다. 그리고 좋은 소식은 완전히 무료로 사용할 수 있다는 것입니다! 👌

오늘은 Google 분석을 Next.js 애플리케이션에 통합하는 방법을 살펴보겠습니다. 순수한 React에 관심이 있다면 다른 기사가 도움이 될 것입니다.

Step-1️⃣ 열쇠 받기




https://analytics.google.com/에서 새 계정을 만듭니다. 처음 등록할 때 새 속성을 추가하라는 메시지가 표시됩니다.



계정의 관리 부분에서는 이미 Google 애널리틱스 계정이 있는 경우 새 속성을 추가할 수 있습니다. 다음 단계는 데이터 스트림을 구성하는 것입니다. 우리는 이것을 웹에서 구현할 것이기 때문에 웹을 선택할 것입니다.



그런 다음 웹 사이트에 대한 정보를 제공해야 합니다. 지금은 가상의 데이터를 입력하고 방송을 시작합니다.



이제 전체 과정에서 가장 중요한 것Measurement ID을 잡아야 합니다.



패턴은 다음과 유사합니다G-XXXXXXXXXX. 그것을 적응시키십시오.

이제 이것을 프로젝트 자체에 통합할 수 있습니다. 그럼 그렇게 하세요!

Step-2️⃣ 프로젝트 초기화




npx create-next-app nextjs-google-analytics-demo


Step-3️⃣ 환경에 추가



프로젝트 루트에 .env.local라는 파일을 만듭니다. 그런 다음 거기에 후속 코드를 삽입하십시오. 코드에서 직접 이 작업을 수행할 수 있지만 환경 변수를 사용하는 것이 좋습니다.

NEXT_PUBLIC_GOOGLE_ANALYTICS= 'G-LXXGTJJDFX'


Step-4️⃣ 로드 분석


__app.tsx 파일을 열고 여기에 2개의 스크립트 태그를 추가합니다.

import { AppProps } from 'next/app';
import Head from 'next/head';
import React, { useEffect } from 'react';
import './styles.css';
import Script from 'next/script';
import Router from 'next/router';


function CustomApp({ Component, pageProps, router }: AppProps) {

    return (
        <>
            <Script strategy="lazyOnload" src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`} />

            <Script strategy="lazyOnload">
                {`
                    window.dataLayer = window.dataLayer || [];
                    function gtag(){dataLayer.push(arguments);}
                    gtag('js', new Date());
                    gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
                    page_path: window.location.pathname,
                    });
                `}
            </Script>


            <Head>
                <title>Welcome!</title>
                <meta name="viewport" content="initial-scale=1, width=device-width" />
            </Head>

            <Component {...pageProps} />
        </>
    );
}


export default CustomApp;


Step-5️⃣ 브라우저 확인



다음 명령을 사용하여 앱을 실행합니다.
npm run dev 또는 yarn run
그리고 URLhttp://localhost:3000로 이동하여 콘솔을 엽니다.

Step-6️⃣ 분석이 활성화되어 있는지 확인



브라우저에서 콘솔을 열고 거기에 dataLayer를 입력하십시오.



정의되지 않음은 문제가 있음을 나타냅니다. 위의 이미지와 비슷한 것을 본다면 축하합니다! 분석이 활성화되었습니다.

**Guarapo Labs **는 사람들이 아이디어를 개발하는 데 도움이 되는 디지털 제품을 만듭니다. 우리 직원은 웹 및 가상 현실 게임 프로젝트 작업에 필요한 모든 기술을 갖추고 있습니다. 솔루션을 통해 최상의 고객 경험을 제공하는 방법에 대해 고객을 교육하려는 우리의 약속은 고품질 소프트웨어에 반영됩니다.

100일 간의 코드: 2022년을 위한 완전한 Python Pro 부트캠프 - 3일차(보물섬)
Nginx 뒤에서 coTurn 실행

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage