※本記事は、タグマネージャーの使い方をお届けするシリーズの第２回目です。
前回の記事（第１回）は下記からお読みいただけますので、ぜひ合わせてご覧ください。
Yahoo!タグマネージャーの使い方・基本編～対象ページのURLが別な場合～
https://f-tra.jp/blog/howto/7360
単純にURLのみを条件に設定できない場合に対応する
前回は、URLを条件にしてページを登録し読み込むタグを分ける設定について説明しました。この方法は、最も一般的な設定方法です。
一般的に、静的なページであれば、＜ページ内容＞と＜URL＞は一対一対応していることが多いと思いますので、この方法で対応できるケースも多いと思います。
しかし、システムが関わる動的なページ遷移の場合は、同じURLだが状態が違い、かつ、読み込みたいタグも状態によって別、という状況もありうると思います。
例えば、当社EEFOツールを導入いただいたお客様のケースでは、エントリーフォームの入力ページと確認ページのURLが同じ、という状況がありました。
当社EFOツールは、ページ毎に別々のタグを貼っていただくことを前提にしているので、URLが同じでも内容が違うページ同士については、何らかの方法で、タグをページの内容によって貼り分けていただく必要があります。
データエレメントを使ってタグを貼り分ける
その解決法の１つとして、タグマネージャー側に用意されている、URL以外の条件でタグを貼り分ける方法を使うことがあります。Yahoo!タグマネ―ジャーでは「データエレメント」というものを使い、ページ認識の条件とする方法が用意されています。
データエレメントによる方法は、簡単にいえば、特定のページであることを示す目印をつけてそれをタグマネージャーが見つけてどのページかを認識する、というイメージです。
今回は、このYahoo!タグマネージャーのデータエレメントを使ったタグ貼り分けの設定方法をお伝えします。
設定の流れ
設定の流れは、大きく以下の5ステップです。以下このステップに沿って解説していきます。
- ページ側HTMLに、変数A=値Bという形式のJavaScriptを追記する
- ページ認識の目印となるデータエレメントを登録する
- タグを登録する
- ページを登録し、ページ毎にデータエレメントを設定する
- ページ毎にタグを有効にする
前提条件
今回は、先に例を挙げて説明します。
例えば、ある問い合わせフォームでは、以下のように、入力ページ、入力エラー時の入力ページ、確認ページのURLがそれぞれ同じだったとします。※URLはダミーです。
- 入力ページ
https://aaa.bbb.com/form/ - 確認ページ
https://aaa.bbb.com/form/
これらに当社EFOツール「エフトラEFO」のタグを貼ることを考えます。
当社EFOツールの場合、入力ページと確認ページは別のタグを貼る前提です。
今回の場合、入力ページと、入力エラー時の入力ページには入力ページ用タグを、確認ページには確認ページ用タグを貼り付けることがゴールになります。
１）データエレメントをページHTMLに記述する
データエレメントには、いくつかの種類がありますが、今回の例では、html内に下記のような<script>タグを追加し、変数（と値）を用意する方法をとります。
<script type="text/javascript">
var fcode_page_id = "efo_inquiry_input";
</script>
言うまでもありませんが、これは「fcode_page_id」という変数が「efo_inquiry_input」という値を持つという意味です。どちらの文字列も内容についてのルールはYahoo!タグマネージャー側にはありませんが、他のJavaScriptの変数名とは重複しないようにし、値はページ毎に別々の内容にしましょう。
例えば確認ページであれば、
<script type="text/javascript">
var fcode_page_id = "efo_inquiry_confirm";
</script>
とします。
上記をHTMLに追加したら、値が参照できるかをブラウザの開発者ツールで確認しておきましょう。
対象のページを開いたあと（Google Chromeであれば）Consoleパネルを開き、変数名を入力しましょう。値が参照できればOKです。
consoleで変数名を入力してENTERして値が表示されればOK
２）データエレメントを登録する
タグマネージャーが個々のページを識別するための「目印」の存在を先に登録します。
YTM管理画面上部メニューの「データ/イベント」から進み、登録します。データエレメント名、データエレメントの説明の内容はYTM利用者がわかる内容にすればOKです。
今回は、データエレメント名は「ページID」としました。データバインディングエクスプレッションに、HTMLに記述した変数名「fcode_page_id」を登録します。
登録した後の画面。データバインディングエクスプレッションを変数名「fcode_page_id」にする。
３）タグを登録し、実行条件を設定する
読み込みたいタグ（YTMではサービスタグと呼ばれる）を登録します。
今回は、さらにタグの「実行条件」を設定します。「タグの実行条件」に進み、「エレメントの選択」には、データエレメント名「ページID」を、条件は「=」を、「値を入力」には、「efo_inquiry_confirm」とします。
条件は、以下のような候補、および値の指定が可能です。
- 等しい
- 等しくない
- 左＞右
- 左＜右
- 左＞＝右
- 左＜＝右
- 左の値が右の値を含む場合
- 左の値が右の値を含まない場合
- 左の値が存在する場合
- 左の値が存在しない場合
設定が有効になると稲妻マークが入ります。
上が登録済みの内容、下が未入力の状態。
４）ページを登録し、ページ毎にページ認識の目印となるデータバインディングを登録
ページ管理に進み、ページを登録したら、ページにタグを紐づけます。
ページ毎の「データバインディング」に進み「データバインディング」を追加、からデータエレメント「ページID」、データバインディングエクスプレッション「fcode_page_id」を登録します。
ページに目印（データバインディング）を登録する
５）ページ毎にタグを有効にする
ページ毎の「サービスタグ設定」で、タグの「未設定」ボタンをクリックして「設定済み」にします。
以上で、入力ページ、確認ページそれぞれに行うことで、URLが同じでも別のタグが読み込まれるようになるはずです。
詳しい説明は、Yahoo!タグマネージャー提供のマニュアルをご確認ください。
Yahoo!タグマネージャー資料ダウンロード
http://tagmanager.yahoo.co.jp/download/
今回はここまでです
いかがだったでしょうか。今回の方法は、HTMLの変更が必要であり、タグマネージャーの設定だけでは完結しない方法ですが、URLが同じで違うページがある場合は有効な解決方法ですので試してみましょう。
次回はGoogleのタグマネージャーについて解説したいと思いますので、お楽しみに。
