本記事ではサイト計測の土台として必須のGoogleタグマネージャーについて解説します。Googleタグマネージャーはタグに関する一定の知識が必要ではありますが、シンプルなルールを理解することで広告、サイト運用に関わる方がメインにはなりますがどのような方でも扱うことができるツールです。本記事を見ることでタグマネージャーの使い方や具体的な導入イメージをつけることができるでしょう。
Googleタグマネージャー（GTM）とは？
Googleタグマネージャー（通称：GTM）はGoogleが提供する無料のタグマネジメントツールです。一般的にタグ設置はサイトのソースコードを更新する必要があり、エンジニアリング工数が必要になります。しかしながら、タグは1つに限らず様々な種類が存在するため、都度ソースコードに直接埋めるやり方を続けるとエンジニア工数以外にもソースコード管理上の問題など様々な課題が生じます。Googleタグマネージャーはそのようなタグ管理上の課題を解決する画期的なツールと言えます。サイトにGoogleタグマネージャーが導入されていると他のタグの設置や制御を管理画面上で一括で管理できます。
タグとは
タグはWebサイトのコードに埋め込む命令文です。サイト内の指定されたエリアに、特有の文字列が書かれたコードを設置します。現代のサイト運営やマーケティングの仕事において、タグが必要になるツール・サービスは非常に多く必ず何かしらのタグを設置する場面は発生するといっても過言ではありません。
一般的に、タグは大別して以下の種類があります。
▼タグの種類
- HTMLタグ：Webページの表示に関わるタグ
- コンバージョンタグ：登録、申込など広告の成果地点を計測するタグ
- 計測タグ：サイトの様々なデータを取得するためのタグ
Googleタグマネージャーでできることは？導入する4つのメリット
続いてGoogleタグマネージャで実際に何ができるのかをご紹介します。
メリット1．HTMLを変更することなくタグを変更できるようになる
Googleタグマネージャーを使うことでHTMLを変更することなくタグの設置や変更が可能になります。前述の通り、タグをサイトに直接埋めるにはソースコードを変更する必要があります。これには工数や管理上の様々な課題が発生します。万が一本番のソースコードを誤って変更してしまった場合は取り返しのつかないインシデントにつながりかねません。Googleタグマネージャーは、サイトに一度設置さえすれば管理画面上でタグの設置が容易にできます。ソースコードを変更するリスクはありません。
メリット2．タグを一元管理できる
Googleタグマネージャーは大量のタグを一元管理できます。過去に設置して現在使われていないタグを除去することも簡単ですし、現在作用しているタグを一時停止したり再開したりもできます。以下のように現在のタグの内容やステータスが一覧で管理できます。
メリット3．タグの動作確認をプレビューから確認できる
Googleタグマネージャーではプレビュー機能（=デバッグ機能）があります。この機能によってタグの動作確認をリアルタイムに確認できます。例えば新しく埋めたタグが反応しているか・正しく計測されているかを実際のサイトの挙動をみながらチェックできます。
メリット4．タグの変更履歴を確認できる
Googleタグマネージャーではタグの変更履歴管理ができます。「誰が」「いつ」「どのような内容で」タグを変更したのかが一目瞭然です。バージョン管理も可能ですので変更を取り消して過去の状態に戻すことも可能です。
Googleタグマネージャーの使い方6ステップ
続いてはGoogleタグマネージャーの具体的な使い方を解説します。
STEP1．Googleタグマネージャーにアカウントを作成・ログインする
まずはGoogleタグマネージャーのアカウント作成をします。こちらのリンクから開始できます。Googleアカウントが必要になりますので、ない場合はまずGoogleアカウント作成からはじめましょう。
「新しいアカウントの追加」からサービスのアカウント名と対象国を設定します。
STEP2．コンテナを設定する
続いてコンテナを設定します。Googleタグマネージャーにおけるコンテナとは、タグを管理する箱のようなものです。一般的には管理するサイト、アプリによってそれぞれ作ります。例えば、管理するサイトが3つある場合はコンテナも3つ作ることになります。本記事ではWebサイトを前提として解説します。
STEP3．サイトにGTMタグを設置する
最後のステップとしてサイトにGoogleタグマネージャーのタグを設置します。
サイトに直接埋め込む場合
サイトに直接埋め込む場合は指定された箇所にタグを設置します。基本的に埋め込むスクリプトは2つです。1つはサイトの<head></head>の間のなるべく上部に埋め込みます。もう1つはサイトのHTMLの<body></body>に埋め込みます。
より詳細を知りたい場合はGoogle公式のクイックスタートガイドを参照ください。
WordPress（ワードプレス）から埋め込む場合
WordPress（ワードプレス）でサイトを作成している場合の設置方法を説明します。管理画面からソースコードに直接貼り付けることも可能（「外観」>「テーマエディター」>「テーマヘッダー（header.php)」を編集）ですが、ソースコードの編集を誤るとサイト表示に影響が出てしまうためプラグインでの利用をおすすめします。プラグインの場合は所定の箇所にコピー&ペーストするのみで、ソースコード編集は必要ありません。
Site Kit by GoogleはGoogleが公式に提供しているおすすめのプラグインです。WordPress管理画面からプラグインの新規追加で、「Site Kit by Google」と検索すると出てきます。「Site Kit by Google」はタグマネージャーはもちろんのこと、Googleアナリティクス、Googleサーチコンソール、Googleアドセンスなどが簡単に管理できます。
STEP4．タグをワークスペースで追加する
STEP3まででタグマネージャーのサイト設置が完了したら、完成したワークスペースで具体的なタグを追加していきましょう。
「タグ」「トリガー」「変数」について
Googleタグマネージャーでは「タグ」「トリガー」「変数」の3つの概念さえ理解していればスムーズに利用ができます。
- タグ：ページで実行されるコードの内容（例）コンバージョンタグ
- トリガー：タグが実行される条件（例）特定のページを表示したら
- 変数：変動する値が入る場合の受け皿（例）商品名、価格、日付など
上記は「どのような条件になったら（=トリガー）、どのタグが実行されて（=タグ）、その内容はどのようなものか（=変数）」がわかります。タグとトリガーは基本的に必須ですが、変数は状況によって使わない場合も出てきます。
それではタグの作成方法を説明します。以下のようなタグ作成画面が表示されます。タグの名前、タグの内容、トリガーの設定の3つが必要になります。
まず、タグの名前をつけます。命名ルールはありませんが、タグの量が増えても判別しやすい名前にすることをおすすめします。タグの名前をつけたら、「タグの設定」をクリックします。タグタイプ選択のモーダルが出てきます。すでにGoogleに連携しているサービスはおすすめリストとして出てきますのでそのままクリックしても大丈夫です。この場合は、指示通りに進めるとタグ設定ができます。
おすすめに出てこない場合は「カスタムHTML」を選択します。赤枠にタグをコピー&ペーストします。これでタグ設定は完了です。
続いて、トリガーの設定を行います。過去にトリガー設定をしている場合は以下のようにリストが出てきます。このリストからそのまま選択も可能です。トリガーを新規で作る場合は右上の「+」を選択します。
トリガーの個別作成表示が出ます。まずはわかりやすいトリガー名を入力しましょう。
続いて、トリガーのタイプを選択します。主なトリガータイプがリストで表示されます。今回はページ表示をトリガーにする例にしますので「ページビュー」を選択します。
サイト全体でページ表示をトリガーにしたい場合は「すべてのページビュー」を選択します。例えば、「商品ページ」など特定ページの表示を指定したい場合は「一部のページビュー」を選択します。そして条件を追加入力します。例えば、ページのURLに「cart」という文字列が含んでいる場合は「Page URL | 含む | cart」と設定します。
設定が完了したら右上の「保存」をクリックします。
STEP5．プレビューからタグを確認する
タグ&トリガーの作成が完了したら、指定した条件で動作しているかを確認するためにプレビュー表示をおこないます。メイン画面右上の「プレビュー」をクリックします。
デバッグツールが立ち上がるので、確認したいページを含むURLを入力します。
接続が成功するとページ右下に「Tag Assistant Connected」という表示が出ます。
同時に別タブで現在のタグの発火状況を示すデバッグページが立ち上がります。タグが実行されている状態を「Fire（発火する）」と表現します。デバッグページは以下のような画面で表示されます。「Tags Fired」は発火しているタグのリストが出ます。一方で「Tags Not Fired」は発火していないタグのリストが出ます。新しく設定したタグが「Tags Fired」になっているかを確認しましょう。タグの発火条件（=トリガー）を特定の条件にしている場合は必ずその条件を実行しましょう。例えば、サンクスページ表示をトリガーにしている場合はサイトでサンクスページを開かない限りタグの動作は確認できません。
STEP6．タグを公開する
プレビューでタグの正常動作が確認できた場合はいよいよ公開です。メイン画面右上の「公開」ボタンから公開に進めます。どのような変更を行なったかをメモすると、バージョン管理の観点で他メンバーが把握しやすい利点があります。
表示の指示通りに進めると公開が完了します。以下のようにバージョン情報が表示されますので、正しく公開されているか確認ができます。
Googleタグマネージャーを導入するときの注意点
最後にGoogleタグマネージャー導入に際しての注意点を記載します。思わぬ計測ミスに繋がる可能性があるので必ずチェックしましょう。
Google Analyticsタグがある場合二重計測に注意
Googleタグマネージャーを設置する前に、Googleアナリティクスタグをサイトに直接設置していないかどうか必ず確認しましょう。Googleアナリティクスタグがすでに設置されている場合は、Googleアナリティクスタグを一度除去して、Googleタグマネージャー経由で設置することをおすすめします。Googleアナリティクスでイベント設計など各種設計を行う場合にタグマネージャー経由の方が設定が簡単であることに加え管理がしやすいためです。
複数のドメインに利用する場合は別のコンテナを作成する
ドメインが複数にわたる場合は原則コンテナを分けて管理しましょう。そのうえで、複数ドメインを同じ計測環境で管理したい場合はクロスドメイントラッキング設定を行うことをおすすめします。
アクセス権限を設定しておく
Googleタグマネージャーではアクセスや公開に関する権限管理が可能です。然るべきメンバーに然るべき権限を設定しましょう。「管理」 > 「ユーザー管理」で設定できます。
Googleタグマネージャーを使ってタグを一元管理しよう
本記事ではGoogleタグマネージャーによるタグ管理について解説しました。タグマネージャーを使うことで安全に手軽にタグ管理ができることをおわかりいただけたかと思います。
Looker Studio（旧 Googleデータポータル）のテンプレートならDatafolio
Datafolio（データフォリオ）はデータポータルのテンプレートストアです。通常大変な労力がかかるLooker Studioのレポート作成がプロマーケターのテンプレート活用でわずか1分程度で利用ができます。価格も数百円〜数千円のレンジなのでリーズナブルにデータポータルレポート作成ができます。ぜひご参照ください。
