Googleタグマネージャーの使い方・応用編〜対象ページのURLが同じ場合〜

※本記事は、タグマネージャーの使い方をお届けするシリーズの第4回目です。
前回の基本編に続き今回は、URLは同じだが状況によってページ内容が異なる場合に、それぞれ別のタグを読み込ませるための設定方法について解説します。

前回までの記事は下記からお読みいただけますので、ぜひ合わせてご覧ください。

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

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

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

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

Googleタグマネージャーの基本をおさらい

サイト内のどのページにどのタグを貼り付けるかをリアルタイムで管理できる仕組みがタグマネージャーです。
サイト内の各ページにコンテナタグと呼ばれる共通のタグを貼っておくと、ページへのアクセスが実行されるたびに、コンテナタグがあらかじめ設定された条件の1つ1つに合致するかをチェックし、合致する場合に指定されたタグを読み込むという仕組みです。

GTMは、タグマネージャーの1つで、基本的な概念として「コンテナ」「タグ」「トリガー」「変数」があります。
「コンテナ」は通常1サイトの各ページに読み込むタグを管理するのに用いるまとまりで、コンテナ1つにつき1つのコンテナタグが用意されます。トリガーはタグを読み込むための条件で、「変数」と呼ばれるある指標が特定の値を持つ場合に、どの「タグ」を読み込ませるかという情報を設定します。
タグやトリガーはいつでも専用管理画面で変更できるので、タグの変更やON/OFFを、HTMLの変更なしで実現で切るのがメリットです。

詳しくは前回記事「Googleタグマネージャーの使い方・基本編〜対象ページのURLが別な場合〜」をご覧ください。

応用編では、ページURLを条件に使わない方法を紹介します

前回は、ページのURLが違う2種類のページに、それぞれ別のタグを読み込むという動作を実現するための設定方法について説明しました。
ページURLと内容は1対1対応しているケースが一般的ですから、大半は、この設定方法でタグの貼り分けの実現は可能だと思います。

しかし当然ながらこの方法では、URLが同じだが状況によってページ内容が違うケースには対応できません。

例えば、エントリーフォームで言えば、入力ページと入力確認ページのURLが同じになるケースなどが考えられます。
エフトラEFOでは、入力ページ、確認ページ、完了ページがあるフォームの場合、それぞれ別の内容のタグを貼る必要がありますのでこの場合対応が難しくなります。
そこで今回はページURLを条件に使わない方法を紹介したいと思います。

具体的には、YTMの2回目の記事と同様に、ページで宣言されたグローバル変数の値を元に判定する方法を説明します。

設定環境について

今回は検証用に、1/2の確率で2通りのどちらかの変数を宣言するHTMLを用意し、同じURLで2通りの内容のHTMLがある、という状況を用意しました。


<script type="text/javascript">
 var testPageId='typeA';
 console.log('testPageId is typeA.');
</script>

または、


<script type="text/javascript">
 var testPageId='typeB';
 console.log('testPageId is typeB.');
</script>

のどちらかが宣言されるようにします。

具体的な記述内容はGTMの設定とは関係ないため、割愛しますが、
JavaScriptでランダムな数値を生成し、その値を元に「testPageId」という変数が「typeA」または「typeB」という値を持つようにしています。

今回は「testPageId」という変数の値が「typeA」ならタグAを、値が「typeB」ならページB用のタグBを読み込むように設定したいと思います。

タグA、タグBはそれぞれ、検証用です。前回同様に、タグの読み込みが完了すると、コンソールにどちらのタグであるかを示すメッセージを出力する内容にしておきます。


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

設定の流れ

コンテナの作成、タグの登録は、前回の記事と全く同じです。タグA、タグBを登録しておきます。

今回は、新たに「変数」を登録します。

変数の登録

GTM管理画面で、「タグ > ユーザー定義変数」の「新規作成」に進みます。

ユーザー定義変数登録

ユーザー定義変数登録

今回、トリガーの主語となるのは、JavaScriptで宣言された変数なので、1)で「JavaScript変数」を指定、2)の変数を作成に「testPageId」を登録します。
変数名は、「テストページID」とします。
この変数名を、後述のトリガーの設定で指定します。

ユーザー定義変数登録済み

ユーザー定義変数登録済み

トリガーの設定

変数が登録できたら、トリガーを設定しましょう。タグは2種類あるので、トリガーも2つ作成します。

設定すべき箇所は「イベント」「トリガーを設定」「配信するタイミング」の3つです。
イベントは「ページビュー」、「トリガーを設定」は「DOM Ready」、配信するタイミングは、「テストページID」「含む」「typeA」とします。2つ目のトリガーの配信するタイミングは、「テストページID」「含む」「typeB」とします。

トリガー設定中

トリガー設定中

公開

最後に設定を「公開」し、設定完了です。

動作の確認

ページにアクセスし、ブラウザの開発者ツールのコンソール内に、

testPageId is typeA.
This is tag for typeA.

または

testPageId is typeB.
This is tag for typeB.

のどちらかの文字列が表示されることを確認しました。

一方で、

testPageId is typeA.
This is tag for typeB.

という結果はでませんでした。

さいごに

いかがだったでしょうか。今回は、YTMの2回目の記事と合わせて、ページ内でJavaScriptで宣言されたグローバル変数を条件に特定のタグを読み込む設定について説明し、GTMでも同じことが実現できることを確認しました。

次回のこのシリーズでは、グローバル変数ではなく、HTML内の要素の内容で判定する方法を紹介する予定です。

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です