この記事では
- GatsbyJS + Contentfulで作成した、サイトにGoogleタグマネージャーでGoogleアナリティクスを導入する方法
について紹介します。
前提として以下は登録済みの想定として説明していきます。
まだ設定していない方は先に設定をお願いします。
- Googleタグマネージャー登録済み
- GoogleタグマネージャーでGoogleアナリティクス設定済み
手順としては以下のようになります。
- プラグインのインストール
- プラグイン設定
- Netlifyに環境変数追加
- Googleタグマネージャーで公開前の確認
- Googleタグマネージャーで公開
プラグインのインストール
まずは、必要となるgatsby-plugin-google-tagmanagerというプラグインをインストールしていきます。
gatsby-plugin-google-tagmanager
以下のコマンドでインストールします。
$ yarn add gatsby-plugin-google-tagmanagerまたは、以下のコマンドでインストールします。
$ npm install -S gatsby-plugin-google-tagmanagerプラグインの設定
インストールが終わったら、プラグインの設定をしていきます。
gatsby-config.jsにgatsby-plugin-google-tagmanagerの設定を追加します。
optionsのidの部分には、GoogleタグマネージャーのID（GTMから始まるID）を記載します。
自分の場合は、Netlifyに設定した環境変数を使用するために以下のような設定にしました。
{
resolve: `gatsby-plugin-google-tagmanager`,
options: {
id: process.env.SITE_GTM_ID,
defaultDataLayer: { platform: "gatsby" },
},
}環境変数の設定方法に関しては、以下の記事を参考にしてみてください。
GatsbyJS + Netlifyで環境変数を設定する方法
Netlifyに環境変数追加
次にNeitlifyにGoogleタグマネージャーのID（GTMから始まるID）を登録していきます。
NetlifyのBuild & deployの項目にEnvironment variablesという環境変数を追加できる部分があるので、Gatsbyで設定した環境変数SITE_GTM_IDを追加します。
Googleタグマネージャーで公開前の確認
次にGoogleタグマネージャーでタグがサイトに設定されているかの確認をしていきます。
Googleタグマネージャーにあるプレビューボタンを押し、タグを設定したサイトを確認します。
プレビューボタンを押すと、以下のようにオレンジ色になりプレビュー中となります。
タグを設定したサイトを確認すると、ページ下部に以下のようにGoogleタグマネージャーの画面が表示されているかと思います。
Tags Firedをクリックすると、Googleタグマネージャーで設定したGoogleアナリティクスが確認できると思います。
以上で公開前の確認は終わりです！
Googleタグマネージャーで公開
公開前の確認ができたら、Googleタグマネージャーを公開していきます。
Googleタグマネージャー右上の公開ボタンを押し、公開します。
以上で作業が完了しました！
サイトにGoogleアナリティクスが設定されているか、Googleアナリティクスの画面で確認してみてください。
おわりに
今回はGatsbyJSで作ったサイトにGoogleタグマネージャーを導入してみました。
今まではGoogleアナリティクスのプラグインを使用していたのですが、Googleアナリティクス以外のタグを追加する場合などに便利そうです！
簡単に導入できるので、ぜひ追加してみてください。
最後までお読みいただきありがとうございました！