Honmushi blog
2018/10/19

アナリティクスの導入

googleアナリティクスを導入します。

SEOとかアフィリエイトを導入するに当たって、流入であったり効果を測定する目的で導入します。
いろいろなデータを見ながら効果的に施策・運用を行えるようになりたいです。

結論

Gatsbyを使っている場合、プラグインgatsby-plugin-google-analyticsを利用することで簡単に実装できました。

  • アナリティクスでトラッキングID取得
  • プラグインを導入
  • gatsby-config.jsを編集

ただしシングルページアップリケーションの場合は特別な対処が必要そう。 https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications?hl=ja

非同期でURLが変わるタイミングで効果を取得するようにjsで対応する必要がありそうです。
後日対応します。

参考

https://analytics.google.com/analytics/web/provision/?authuser=0#/provision

すること

  1. Google アナリティクスに申し込む
    上記のサイトから進んで申し込み完了 ドメインなど必要な情報を登録します。
    トラッキングIDが発行されます。
  2. トラッキング コードを追加する
    通常はグローバルサイトタグという項目内のスクリプトをコピーしてサイトの<head>タグに貼り付けることで利用できるようです。
    Gatsbyの場合は専用のプラグインがある様子なので、それを利用します。

    gatsby-plugin-google-analytics

gatsby-config.jsに設定を追記します。

{
    resolve: 'gatsby-plugin-google-analytics',
    options: {
        trackingId: 'ここにはトラッキングIDを挿入する',
    },
},
  1. オーディエンスの詳細を確認する
    localの環境ではアナリティクスのタグは出力されない様子。
    gatsby buildした結果のソースに出力されるので、そちらで確認する。
  2. SPA用の対応を導入する
    以下のページに記載されているような内容が必要そうです。
    調査した上で対応してみます。

https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications?hl=ja

SPAの対応ができていなさそう?

シングルページアップリケーションの場合は特別な対処が必要そう。 https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications?hl=ja

非同期でURLが変わるタイミングで効果を取得するようにjsで対応する必要がありそうです。
後日対応します。

  • このエントリーをはてなブックマークに追加