[Gatsbyで構築]Google Adsenseのgtag.jsを使うプラグイン

新しくGoogle Adsenseを追加しようとしたら、Adsense自体が新しくなっていました。
トラッキングの追跡にはgtag.jsを使うようになってたので、それを扱えるプラグインを探したら

と、

がありました。

Gatsbyの「gatsby-plugin-gtag」ページ
Gatsbyの「gatsby-plugin-google-gtag」ページ

「gatsby-plugin-gtag」がアナリティクス用のプラグインで、
「gatsby-plugin-google-gtag」はアナリティクス以外も「Google Ads」等にもイベントデータを送ることができるそうです。

じつは、「gatsby-plugin-google-gtag」を先にインストールして使っていて、この記事を書こうと調べ直したときに「gatsby-plugin-gtag」を見つけました。アナリティクスしか必要ない場合は後者の「gatsby-plugin-gtag」の方が設定が簡単なのでこっちを使います。

インストール

npm install --save gatsby-plugin-gtag

か、

yarn add gatsby-plugin-gtag

プラグインの設定

上記Gatsbyのサイトに書かれているように、gatsby-config.jsに


{
    resolve: `gatsby-plugin-gtag`,
    options: {
        // your google analytics tracking id
        trackingId: `UA-XXXXXXXX-X`,
        // Puts tracking script in the head instead of the body
        head: false,
        // enable ip anonymization
        anonymize: true,
    },
},


（gatsbyjs.comより引用）
を追加するだけです。

オプションの「head」はbodyではなくheadにスクリプトを置きたい場合にtrueにします。

外部リンクへのクリックをトラッキングしたい場合

自分のサイトには今のところそのようなリンクはないので試してないのですが、以下のようにしたらいいようです。


import { OutboundLink } from 'gatsby-plugin-gtag'

リンク文字

<a>tagと同じですね。

テストする

「gatsby-plugin-gtag」は、

でないと動かないので、
debugモードで使用したい場合は環境変数を

とするといいようです。

「gatsby-plugin-google-gtag」の場合は

をしてから、ブラウザで「http://localhost:9000」でテストできると書いてあったので、「gatsby-plugin-gtag」でも試したらテストできました。

まとめ

Google Analyticsのみを使いたい場合は、「gatsby-plugin-gtag」で簡単に設定できました。