はじめに

こんにちは。Takumiです

Web制作とアクセス解析を勉強しています。今回は初めてLPにGoogle タグマネージャー(GTM)を入れてみたので、今回はその過程で悩んだ箇所などや気づきなどを書いていきます。
※初心者の備忘録なので、技術的な内容に間違いがあればご指摘をお願いいたします。

なぜGoogleアナリティクスではなくタグマネージャーなのか？

前述の通り、タグマネージャー(以下:タグマネージャー)を今回初めて入れてみました。それまでもアナリティクス(以下:アナリティクス)を入れたサイトを作ったことはありましたが、今回GTMを知って、便利そうだったので挑戦してみました。また、今後仕事をする上で、使い方を知っておいたほうがアクセス解析のやり方に幅が出るだろうと言う理由からです。

タグマネージャーのポイント

使ってみて感じたポイントを紹介していきます。まずは"便利な点"から。

便利な点①:導入方法が簡単

アナリティクスにも共通することですが、タグマネージャーで測定するためにはまず下記のような規定のコードをWebサイトの特定の場所に挿入するだけで済みます。

※headのなるべく上に置くコード

 <!-- Google Tag Manager -->
    <script>
      (function (w, d, s, l, i) {
        w[l] = w[l] || [];
        w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
        var f = d.getElementsByTagName(s)[0],
          j = d.createElement(s),
          dl = l != "dataLayer" ? "&l=" + l : "";
        j.async = true;
        j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
        f.parentNode.insertBefore(j, f);
      })(window, document, "script", "dataLayer", "(GTMで始まる)タグマネージャーのID");
    </script>
    <!-- End Google Tag Manager -->

※bodyタグの直後に置くコード


    <!-- Google Tag Manager (noscript) -->
    <noscript
      ><iframe
        src="https://www.googletagmanager.com/ns.html?id=(GTMで始まる)タグマネージャーのID"
        height="0"
        width="0"
        style="display: none; visibility: hidden"
      ></iframe
    ></noscript>
    <!-- End Google Tag Manager (noscript) -->

ページに追加するコードはこれだけでOKです。

便利な点②:コードの追記が不要

①のコードを設定すれば、タグマネージャーはあとはタグマネージャー内の設定をすればいいです。
もしこれがアナリティクスだと、測定したいボタンやページのタグに下記コードをそれぞれ追記をしていかなければいけません。

onClick="ga("send","event","イベント","アクション","ラベル");"

これを毎回、アナリティクスでイベント名・アクション名・ラベル名を設定して、それをコード内に書き加えて...とするので手間がかかります。
その点タグマネージャーなら、コード内の設定は①で記述したコードだけで済みます。

便利な点③:管理が楽になる

タグマネージャーの場合、タグを追加すると一覧で蓄積されていきます。そうすると、どこにどんなタグを追加したかが一目で分かるようになり視認性が高いです。

アナリティクスの場合だと、測定するページが増えれば増えるほどコードの量も増え、タグの管理が煩雑になってきます。すると、確認する場合も削除したくなった場合でも、どこにタグを設定したかが把握していなければ対応に時間がかかります。
管理のしやすさという点では、タグマネージャーのほうが便利だと感じています。

ここまで読めば「アナリティクスめんどくさそー。タグマネージャーのほうが便利でいいじゃん

」と思われるかもしれませんが、タグマネージャーのタグを設定する部分で私はものすごくつまづきました。

次は"つまづいた点"について解説していきます。

つまづいた点①:タグの設定方法が難しい

アナリティクスでも同様ですが、専門用語が多くて初見ではどう操作すればいいのか分かりません。
導入こそ簡単にできたものの、設定をどのようにすればいいのか、これでいいのか、検索して表示された記事を片っ端から読んでいきました。

(主観ですが、"タグ"の設定はまだ簡単でした。タグの種類を選択して、測定したいイベントを選んで、アナリティクスのトラッキングIDを入力して...と、なんとなく分かる範囲です。
でも初めて"トリガー"を設定する際は「URLで設定すればいいのか？クラス名で設定すればいいのか？本当にこれで合っているのか？」と設定を何通りも試しながら、他の人が書いた記事を読みながら設定していきました)。

つまづいた点②:「反映がされていない」と格闘すること3時間

なぜか反映されていない。タグもトリガーも設定した。設定内容も間違えていないはず。なのになぜ。
タグとトリガーを設定したあとは、このような状態が続きました。
設定する→公開する→設定したボタンを押したり、ページを開いたりしてみる→なにも反応なし→なぜ→設定を見直す

これを繰り返すこと3時間(正しい操作方法は、タグマネージャーの設定を公開する前に"プレビュー"画面で確認しますが、そもそもそのプレビュー画面の使い方がよく分からなかったので本番環境で試してました)。

ちなみに...

※Takumiのプレビュー画面の使い方

①タグとトリガーを設定する
②プレビューボタンを押す
③別ページでサイトが開かれる
④「？？なにこれ？なんで？これからどうすればいいの？」
⑤諦めて公開して本番環境で確認

※正しいプレビュー画面の操作方法

①タグとトリガーを設定する
②プレビューボタンを押す
③別ページでサイトが開かれるから、設定した内容を試してみる(ボタンを押したり、ページを開くなど)
④アナリティクスを確認して、反応があれば正しく設定されている(反応がなければ設定を見直す)

そして本番環境でも試してみましたが、それでも反応がない。ここから設定を見直して何度もトライすること3時間経過。結論を言うと、タグマネージャーを設定していたパソコンからの確認からでは反応がなく、スマホ(別のデバイス)で確認したところ反応がありました！

設定したデバイスで確認すると、反応しない仕様になっていたようです(そのことに気づけてよかった...余談ですが、深夜1時まで格闘していて、これが終わらないと寝られなかったので本当よかったです笑)。

これからタグマネージャーを使ってみると言う方は、まずプレビュー画面できちんと確認するということをオススメします🙋‍♂️

つまづいた点③:使って慣れていくしかない

結局、新しいツールは使うまでに資料をどれだけ読むのではなく、基本的な操作方法を知ったらあとはどれだけ実践してみるかだと思います。ネットにある記事の執筆時期のバージョンと現在のバージョンが異なると、見た目や操作手順も少し変わってきますので。
時間に余裕を持ってトライアンドエラーを繰り返したほうが、理解度も高まり成功したときの喜びも大きいです。

終わりに

以上で終わります！
結論として、タグマネージャーは使い慣れればサイトを解析する上でとても便利で分かりやすいツールになります。私ももっと勉強して、より有益な情報記事が書けるように頑張ります！
この記事が読まれた方の参考になれば嬉しいです！