新しく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に
|
1 |
{
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にします。
外部リンクへのクリックをトラッキングしたい場合
自分のサイトには今のところそのようなリンクはないので試してないのですが、以下のようにしたらいいようです。
|
1 |
import { OutboundLink } from 'gatsby-plugin-gtag'
<outboundlink href="サイトのアドレス">リンク文字</outboundlink> |
<a>tagと同じですね。
テストする
「gatsby-plugin-gtag」は、
でないと動かないので、
debugモードで使用したい場合は環境変数を
とするといいようです。
「gatsby-plugin-google-gtag」の場合は
をしてから、ブラウザで「http://localhost:9000」でテストできると書いてあったので、「gatsby-plugin-gtag」でも試したらテストできました。
まとめ
Google Analyticsのみを使いたい場合は、「gatsby-plugin-gtag」で簡単に設定できました。