ushiyaDevLog

ものを作ったり、修理したり、色々

Gatsby

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

更新日:

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

gatsby-plugin-google-gtag

と、

gatsby-plugin-gtag

がありました。

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」は、

process.env.NODE_ENV === 'production'

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

GATSBY_GTAG_DEBUG=true gatsby develop

とするといいようです。

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

gatsby build && gatsby serve

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

まとめ

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

-Gatsby
-,

Copyright© ushiyaDevLog , 2021 All Rights Reserved Powered by STINGER.