Gridsomeアプリケーションに関するGoogle Analytics

Photo by Olya Kobruseva on Pexels.

我々が知っているように、Analyticsはどんなウェブサイトの重要な構成要素です.Google Analyticsは、最も効果的な無料ツールが利用可能です.この記事では、Google AnalyticsをGridsomeサイトに統合する方法を示します.
私は利用可能なプラグインの1つを使用してGoogle Analyticsを追加しようとしていたが、彼らは期待通りに動作しません.それで、私は「伝統的なマニュアルの方法でどうしたらいいの?」既存のプラグインは、いくつかの制限を持っている場合は、同じ場所に立ち往生している場合は、カスタムイベントを使用して解析をカスタマイズしたい、一緒に従ってください.

Google Analyticsでユニバーサルトラッキングを作成

Google Analyticsに行く.
管理セクション(下の小さなギアのアイコンをクリックして)に移動し、[プロパティの作成]を選択します

フォームを完了します.我々はウェブサイトの分析を集めているので、“ユニバーサル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 Analytics documentationを読んでください.