Googleタグマネージャーからアナリティクスを管理しよう！
digimarl
こんにちは
デジマール技術部です。
ここテックブログではマーケターの方々に参考にしていただけるような技術的な情報をどんどん発信していきたいな！と思っております😄
前回は、Googleタグマネージャーの概要についてご説明させていただいたのですが（まだ目を通されていない方はコチラからご覧いただけます！）。今回は実際に設定を行う方法についてご説明させていただければと思います✨
なお、Googleタグマネージャーのアカウントはコチラの『お申し込み』ボタンからご登録いただけますので、まだの方はぜひ登録してみてください（無料です！）
また、googleアナリティクスのアカウントを新規に登録したい方がいらっしゃいましたら、コチラの『登録』ボタンからご登録ください（無料です！）
今回も最後までお付き合いいただけますと幸いでございます😊
Googleタグマネージャーの管理画面
Googleタグマネージャーのアカウントを作成してログインしてみますと、このような画面が表示されることと思います。
これがタグマネージャーの管理画面といわれるものでして、各種の設定を行う場所になります！
アカウントが一つもない状態でしたら、『アカウント作成』ボタンが表示されると思いますので、そのままアカウントを作成しちゃってくださいー🙌
このアカウントは、Googleアカウントは別物で、たとえば1つのGoogleアカウントに3つのタグマネージャーアカウントを作成することも可能です！
設定内容は大体このような感じになるかと思います😊
アカウント名は任意なので、わかりやすい名前をつけるようにしてください。アカウント名は後から変えることもできちゃいます😊
Webページに埋め込む、タグマネージャー自身のタグはアカウント単位に発行されます。
コンテナ名は管理するURLがそのまま使われることが多いですが、わかりやすい名前を設定していただければと思います。こちらも後から変更することができちゃいます👏
コンテナはタグマネージャーで管理する箱のようなものになります。例えば、アナリティクスのトラッキングIDが異なる複数のWebサイトを管理するような場合ですと、コンテナは分けたほうが管理しやすくなりますし、またWebだけではなく、iOS、AndroidアプリやGoogleが推進しているAMPページも管理する場合はそれぞれ別のコンテナを作成して『コンテナの使用場所』を『ウェブ』、『iOS』、『Android』、『AMP』の中から選択してください^^
無事、アカウントが作成されますとこんな画面が表示されると思います！
この2つのコードをそのままWebサイトの各ページに貼り付けていくことになります。すでにアナリティクスや他のタグをHTMLに埋め込んでいらっしゃる場合は、タグマネージャーへ移行するとすべて貼り替えることになりますので、作業が大変になるかもしれません😢
そのようなケースでは、サイトリニューアルのタイミングなどを見計らって計画的に行う必要があるかと思います。
もし新規にサイトを構築する場合でしたら、初めからこのコードを<head>内のなるべく上のほうと<body>の直後に埋め込みます。
もしWordpressをお使いでしたら、外観-テーマの編集からheader.php（デフォルトの場合）に埋め込んでいただければ全ページに書かなくても楽に設定できると思います🤗
今設定したアカウントやコンテナの設定、先ほど表示された各ページに埋め込むタグマネージャーのタグを確認する場合など、画面上部にある管理タブから行うことができます。
では、タグマネージャーのタグをWebページに埋め込んだものとして、次は作成したコンテナの中にGoogleアナリティクスのページビュータグを設定してみましょう！
Googleアナリティクスのページビュータグを設定する
管理画面の左側メニューのサマリーを選択すると、新しいタグを追加という文字がありますので、これをクリックします❗️
左側メニューからタグを選択して、新規ボタンを押すのでも追加できちゃいます🤗
こんな画面が表示されると思います♪
まずはじめに、これから作成するタグに名前をつけます。デフォルトでは、名前のないタグと表示されていると思いますので、これをわかりやすい名前に変更します。
次に、『タグの設定』の中にマウスを置きますとポインタが『指マークアイコン』に変わりますのでクリックします！
そうしますと、このような画面が表示されたかと思います😆
この中の『おすすめ』の一番上にある『Googleアナリティクス・ユニバーサルアナリティクス』を選択してください！
今度は、次のような画面が表示されます。
このタグにも名前をつけてみましょう。ここでは、Googleアナリティクスページビュータグとつけてみました。ちなみに名前をつけないと、デフォルトでは『{{Googleアナリティクス設定}}』という名前がつきます。
次に、トラッキングタイプはページビューを指定してください。
また、Googleアナリティクス設定の下にある設定変数を選択をクリックして変数の設定を行います。
トラッキングIDの入力フィールドにGoogleアナリティクスのトラッキングIDを設定します。
トラッキングIDがわからないよー！な方がいらっしゃいましたら、Googleアナリティクスの管理画面を開いて左下にある⚙アイコンをクリックしてみてください💫
すると、Googleアナリティクスの各種設定ができるメニューがたくさん表示されますので、そこから『トラッキングコード』を選択してください。
そうしますと、画面上部にトラッキングIDが表示されることと思います🤗
このトラッキングIDをタグマネージャーのトラッキングID入力フィールドにそのままコピペします♪
次のCookieドメインや詳細設定については、今は何も触らないでおきます！
詳細な設定方法につきましては、次回以降の記事でお伝えしていきたいと思っております😊
では、トリガーを設定してみましょう！
トリガーは、前回もお話ししましたが、『どんなタイミングでタグを発火させるか』を指定するものになります。
『トリガーを選択してこのタグを配信』をクリックすると、All Pagesというものが設定されているのではないかと思います。これをそのままクリックして保存ボタンを押します。
なお、トリガーのタイプはAll Pagesだけではなく、クリックやエンゲージメント、カスタムイベントなども設定することができるのですが、これらにつきましてはまたの機会にご紹介したいと思います😚
設定は以上となります🙌
プレビュー・公開してみよう
Googleタグマネージャーには、プレビュー機能というものがございます。
タグマネージャーで設定したタグは『公開』ボタンを押してしまうとすぐにサイトに反映されてしまいますので、うまく動かなかった時に計測できていなかったという事態になってしまうかもしれません💦
そこで、実際に公開する前に『プレビューモード』でタグが正常に機能するかを確認します❗️
この画面の右上にある『プレビュー』ボタンをクリックすると、次のような画面が表示されます。
プレビュー中のワークスペースと表示されることと思います！
この下にある『プレビューモードを終了』を押すと、プレビューモードを終了します。
では、このプレビューモードを実行した場合にはどのような事が起きるのでしょう？？？
実は、この状態で、タグマネージャーのタグを埋め込んでいるページを表示すると、ブラウザ上に次のような画面が表示されてしまうのです👏
この画面でタグマネージャーがきちんと機能しているかを確認する事ができます。
なお、別のPCや別のブラウザからアクセスしても、このウインドウは表示されませんので、デバッグ用のものになります。
タグが機能していることを確認したらいよいよ公開します。
プレビューモードを終了して、画面右上にある公開ボタンをクリックすると、このような画面が表示されることと思います😊
『バージョンの公開と作成』のままにして、バージョン名は1.0などバージョンを設定します。タグマネージャーはバージョン管理ができまして、古いバージョンに戻すこともできちゃったりします😲
バージョンの説明には、このバージョンでの変更事項などを記入しておくと便利かと思います！
公開しますと、次のような画面が表示されることと思います！
これで、タグマネージャーのタグを設定したページ全てについて、Googleアナリティクスのページビューが取得できるようになります🙌
まとめ
今回は、簡単な例としてGoogleアナリティクスのページビューをタグマネージャー経由で設定・計測する方法について書いてみました。これだけではあまりメリットは感じられないかもしれませんが、同じコンテナに、クリックイベントやGoogle広告のコンバージョントラッキング、カスタムHTMLタグなどを追加することも簡単にできてしまいます！
さらに、全ページに同じタグマネージャーのタグを埋め込んでいるにも関わらず、特定のページやクリックなどのイベントだけに発火するトリガーを設定することまでできちゃうのです❗️
今後、さまざまなタグを設定する方法について触れていきたいと思っている次第でございますので、今後ともよろしくお願い申し上げます✨
最後まで読んでくださり、ありがとうございます😭
digimarlでは、アナリティクスやタグマネージャーを使って、お客様のWeb改善に向けたご提案やタグの設計や設定も承っております。
是非、お気軽にお問い合わせいただければと思います🤗
お問い合わせは コチラ
