Googleタグマネージャーの使い方・基本編〜対象ページのURLが別な場合〜

※本記事は、タグマネージャーの使い方をお届けするシリーズの第3回目です。
第2回までは、おもにYahoo!タグマネージャーの使い方について説明してきましたが、今回から2回にわたってはGoogleタグマネージャーについて説明していきます。

第2回までの記事は下記からお読みいただけますので、ぜひ合わせてご覧ください。タグマネージャーそのものについても下記の記事内で説明しています。

Yahoo!タグマネージャーの使い方・基本編～対象ページのURLが別な場合～
https://f-tra.jp/blog/howto/7360

Yahoo!タグマネージャーの使い方・詳細編～URLが同じ複数のページが存在する場合～
https://f-tra.jp/blog/howto/7393

※GTMの管理画面は、2015年11月時点のものです。Google社側の仕様変更により画面の見た目は変更されることが予想されます。あらかじめご了承ください。

Googleタグマネージャーの基本

Googleタグマネージャーには基本的な概念として「コンテナ」「タグ」「トリガー」「変数」の４つがありますのでそれぞれ説明します。

コンテナを除く、タグ、トリガー、変数は、Yahoo!タグマネージャーのときと同様に、GTMでも管理画面左側のメニューに相当します。GTMでも、この順に設定していくのがいいでしょう。

コンテナ

読みこむタグや読みこむための条件一式を格納するひとまとまりの情報がコンテナです。
ウェブサイト用にGTMを用いる場合、サイトごとにコンテナを１つ作成し、コンテナ１つにつきGTMタグが１つ用意されます。１つのアカウントで複数のコンテナを登録することができます。通常は、１サイトの各ページに共通のGTMタグを貼り、ページのURLなどを条件に読みこむタグをどれにするかを設定します。

トリガー

タグを読みこむための条件はトリガーと呼ばれています。
GTMでは「ページビュー」（ページ読み込み時）「クリック」「フォームの送信」「履歴の変更」「カスタムイベント」「JavaScriptエラー」「タイマー」という７つのイベントが用意されていて、利用時はこれらのどれかを選ぶことになります。

トリガー登録画面

変数

トリガーを実行するために使用されるのが変数です。

例えば、トリガーの条件として、「ページのURLがurl1.html（という文字列）を含む」というものがあったとすると、変数はこの条件の主語「ページのURLが」にあたるものです。

変数は「ページ」「ユーティリティ」「エラー」「クリック」「フォーム」「履歴」「ユーザー定義変数」の７つのカテゴリーがGTM側であらかじめ用意されています。ユーザー定義変数以外では、30種以上の変数があります。
今回は、あらかじめ用意されている変数を使用するため、変数登録は行いません。

基本的な設定の流れ

今回は、以下のための設定を行ってみます。

urlが「http://xxxx/url1.html」であればタグ1だけを読み込む
urlが「http://xxxx/url2.html」であればタグ2だけを読み込む

これらは、タグとトリガーの設定を行うだけで実現可能です。以降、設定の流れを説明します。

コンテナの作成とタグの設置

まず、GTM管理画面にログインしたら、コンテナを作成します。コンテナ名はサイト名にしましょう。

コンテナを登録するとGTMタグが表示されるのでコピー＆ペーストしてテキストファイルとして保存しておき、対象のページに貼り付けましょう。

タグの登録

次に、読みこむタグを登録します。タグの登録画面は、以下の３つのステップに分かれています。

プロダクトを選択
タグを設定
配信するタイミング

タグ登録画面

ステップ１では、タグの種類を指定します。よく使うと想定される各種ツール用の登録画面が用意されています（ロゴをクリックして指定）が、今回は該当しないため、「カスタムHTMLタグ」を選択します。

次にステップ２で、タグのソースを入力します。

今回は、以下のタグを挿入してみます。
DOM（ページの表示内容）の読み込みが終わったらメッセージを出す、という動作検証用の内容です。


<script type="text/javascript">
　　$(document).ready(function(){console.log('This is tag for url1.html.')});
</script>

ステップ３の「配信するタイミング」はトリガーを登録した後で設定するので、ここでは飛ばします。

トリガーの登録

次にトリガーを登録します。トリガーの登録は、以下の３つのステップに分かれます。

イベントを選択
トリガーを設定
配信するタイミング

トリガー登録画面

今回の場合、イベントとトリガーはともに「ページビュー」を指定し、配信するタイミングは、「Page URL」「含む」「url1.html」とします。
「Page URL」を指定したプルダウンには「変数」で有効な組み込み変数としてチェックされているものが選択肢として表示されます。

トリガーのタイミングの登録画面

トリガーの指定

トリガーの登録が完了したら、さきほどのタグの設定画面に戻ってトリガーを指定しましょう。

タグのトリガー設定画面

公開

最後に設定を「公開」することで、登録した設定内容がGTMタグが実行する処理に反映されます。

言い換えれば、この公開を行うまで、設定変更は反映されません。これを忘れて、設定したのに本番に反映されない…という事態にならないよう気をつけて下さい。

ちなみにGTMでは、今すぐに公開する以外にも、プレビューとデバッグのモードも用意されており、公開前に設定内容をテストすることも可能です。

動作の確認

今回の場合は、ページを表示して開発者ツールのコンソール内に
「This is tag for url1.html」
「This is tag for url2.html」
それぞれのページでそれぞれの文字列が表示されたことで目的のタグが読み込まれ、動作したことを確認しました。

さいごに

いかがだったでしょうか。
次回のこのシリーズでは、ページURLが同じだが、状況によって別のタグを読み込みたい場合のGTMの設定方法について説明します。

Googleタグマネージャーの使い方・基本編〜対象ページのURLが別な場合〜

Googleタグマネージャーの基本

コンテナ

タグ

トリガー

変数