Gridsome 애플리케이션의 Google 애널리틱스

Photo by Olya Kobruseva on Pexels.

우리 모두 알고 있듯이 분석은 모든 웹사이트의 필수 구성 요소입니다. Google Analytics는 가장 효과적인 무료 도구입니다. 이 문서는 Google Analytics를 Gridsome 사이트에 통합하는 방법을 보여줍니다.

사용 가능한 플러그인 중 하나를 사용하여 Google Analytics를 추가하려고 했지만 예상대로 작동하지 않습니다. 그래서 "전통적인 수작업 방식으로 가면 어떨까?"라고 생각했습니다. 기존 플러그인에는 몇 가지 제한 사항이 있습니다. 동일한 위치에 갇혀 있고 사용자 지정 이벤트로 분석을 사용자 지정하려는 경우 다음을 따르십시오.

Google 애널리틱스에서 범용 추적 만들기

Google Analytics으로 이동합니다.

왼쪽 하단의 작은 기어 아이콘을 클릭하여 관리 섹션으로 이동한 다음 "속성 만들기"를 선택합니다.



양식을 작성하십시오. 웹사이트에 대한 분석을 수집하고 있으므로 '유니버설 애널리틱스 속성 만들기'가 사용 설정되어 있는지 확인하세요.



설정을 마치면 설정 스크립트와 추적 ID가 포함된 페이지로 리디렉션됩니다.

분석 데이터를 전송하도록 Gridsome 웹 사이트 구성

다음 코드를 main.js 파일에 붙여넣습니다. 추적 ID를 포함해야 합니다.

export default function (Vue, { router, head, isClient }) {
  // Global site tag (gtag.js) - Google Analytics
  head.script.push({
    src: "https://www.googletagmanager.com/gtag/js?id=UA-********-*", // replace it with your tracking id
    async: true,
  });

  if (isClient) {
    // Google Analytics
    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    if (typeof window.gtag === "undefined") window.gtag = gtag; // So we can you gtag() on our components
    gtag("js", new Date());
    gtag("config", "UA-********-*");
  }

  // rest code...
}

Note: It is necessary to check for if it's isClient because the window will not function during the build.

누군가 귀하의 웹사이트를 방문하면 Gridsome 애플리케이션을 구축하고 배포한 후 Google Analytics 대시보드에서 "활성 사용자"가 증가한 것을 볼 수 있습니다.

특정 블로그 게시물의 공유 수를 계산하고 싶다고 가정해 보겠습니다. 각 컴포넌트의 공유 기능에 다음 코드를 추가합니다.

async share() {
    // ...code
    const key = this.to; // Where to share (eg. Facebook, LinkedIn)
    // Google Analytics Event
    const params = {
        method: key,
        content_type: "article",
        item_id: location.href,
    };
    gtag("event", "share", params);
    // code... 
}

공유 이벤트만 계산하는 것으로는 충분하지 않을 수 있지만 사이트에 gtag.js를 추가하면 기본적으로 pageview를 보내는 구성 명령이 스니펫에 포함됩니다.

자세한 내용events 및 자세한 내용은 Google Analyticsdocumentation를 참조하십시오.