先日、Google Analyticsのイベントトラッキングを利用したいのでタグを埋め込んで欲しい、という依頼がありました。

最初はga()という関数を使うということだったのですがアナリティクスに反応がなく、改めて調べてみるとgtag()という関数を使うことが分かりました。

というのも、そのお客様はGoogle Tag Manager(GTM)を導入していたため、Google Analytics単体の時と書き方が異なっていたのです。

そこでこんな感じにコードを修正しました。

<a href="http://hoge.jp/" onclick="ga('send','event','カテゴリ','アクション','ラベル');">リンク</a>
↓
<a id="link" href="http://hoge.jp/" onclick="gtag('event', 'アクション', {'event_category': 'カテゴリ','event_label': 'ラベル'});">リンク</a>

しかし、今度はgtagに書き方を直しても、やはり動きません。

原因を探るべく、Chromeのデベロッパーツールを見てみると、クリックするたびにこんなエラーが出ていました。

gtag is not defined

「gtagという関数が定義されていません（だから使えません）」という内容、つまり、現在のタグの内容ではgtagに関する内容が足りないようです。

そこで改めて調べてみると、最初にgtagが使えるようにしておく必要がありました。

サイトに gtag.js を追加する | ウェブ向けアナリティクス（gtag.js） | Google Developers

これに従って下記スクリプトを追加したところ、ようやくアナリティクスに反応がありました。

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());

  gtag('config', 'GA_TRACKING_ID');
</script>

と言っても実はもう1回失敗していまして、上記タグでは「GA_TRACKING_ID」となっているのを、勘違いしてタグマネージャーの方のIDを入れてしまっていました。。。

こういったことは、慣れてくれば当たり前なんですが、最初は基本的なことが抜けてドハマりすることがありますので、今後の自分のためにもメモとしてブログに残しておきます。