Yahoo!タグマネージャーの使い方・詳細編~URLが同じ複数のページが存在する場合~

※本記事は、タグマネージャーの使い方をお届けするシリーズの第2回目です。

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

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

単純にURLのみを条件に設定できない場合に対応する

前回は、URLを条件にしてページを登録し読み込むタグを分ける設定について説明しました。この方法は、最も一般的な設定方法です。
一般的に、静的なページであれば、<ページ内容>と<URL>は一対一対応していることが多いと思いますので、この方法で対応できるケースも多いと思います。

しかし、システムが関わる動的なページ遷移の場合は、同じURLだが状態が違い、かつ、読み込みたいタグも状態によって別、という状況もありうると思います。

例えば、当社EEFOツールを導入いただいたお客様のケースでは、エントリーフォームの入力ページと確認ページのURLが同じ、という状況がありました。
当社EFOツールは、ページ毎に別々のタグを貼っていただくことを前提にしているので、URLが同じでも内容が違うページ同士については、何らかの方法で、タグをページの内容によって貼り分けていただく必要があります

データエレメントを使ってタグを貼り分ける

その解決法の1つとして、タグマネージャー側に用意されている、URL以外の条件でタグを貼り分ける方法を使うことがあります。Yahoo!タグマネ―ジャーでは「データエレメント」というものを使い、ページ認識の条件とする方法が用意されています。

データエレメントによる方法は、簡単にいえば、特定のページであることを示す目印をつけてそれをタグマネージャーが見つけてどのページかを認識する、というイメージです。

今回は、このYahoo!タグマネージャーのデータエレメントを使ったタグ貼り分けの設定方法をお伝えします。

設定の流れ

設定の流れは、大きく以下の5ステップです。以下このステップに沿って解説していきます。

  1. ページ側HTMLに、変数A=値Bという形式のJavaScriptを追記する
  2. ページ認識の目印となるデータエレメントを登録する
  3. タグを登録する
  4. ページを登録し、ページ毎にデータエレメントを設定する
  5. ページ毎にタグを有効にする

前提条件

今回は、先に例を挙げて説明します。

例えば、ある問い合わせフォームでは、以下のように、入力ページ、入力エラー時の入力ページ、確認ページのURLがそれぞれ同じだったとします。※URLはダミーです。

  • 入力ページ
    https://aaa.bbb.com/form/
  • 確認ページ
    https://aaa.bbb.com/form/

これらに当社EFOツール「エフトラEFO」のタグを貼ることを考えます。
当社EFOツールの場合、入力ページと確認ページは別のタグを貼る前提です。
今回の場合、入力ページと、入力エラー時の入力ページには入力ページ用タグを、確認ページには確認ページ用タグを貼り付けることがゴールになります。

1)データエレメントをページ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

consoleで変数名を入力してENTERして値が表示されればOK

2)データエレメントを登録する

タグマネージャーが個々のページを識別するための「目印」の存在を先に登録します。

YTM管理画面上部メニューの「データ/イベント」から進み、登録します。データエレメント名、データエレメントの説明の内容はYTM利用者がわかる内容にすればOKです。
今回は、データエレメント名は「ページID」としました。データバインディングエクスプレッションに、HTMLに記述した変数名「fcode_page_id」を登録します。

登録した後の画面。データバインディングエクスプレッションを変数名「fcode_page_id」にする。

登録した後の画面。データバインディングエクスプレッションを変数名「fcode_page_id」にする。

3)タグを登録し、実行条件を設定する

読み込みたいタグ(YTMではサービスタグと呼ばれる)を登録します。

今回は、さらにタグの「実行条件」を設定します。「タグの実行条件」に進み、「エレメントの選択」には、データエレメント名「ページID」を、条件は「=」を、「値を入力」には、「efo_inquiry_confirm」とします。

条件は、以下のような候補、および値の指定が可能です。

  • 等しい
  • 等しくない
  • 左>右
  • 左<右
  • 左>=右
  • 左<=右
  • 左の値が右の値を含む場合
  • 左の値が右の値を含まない場合
  • 左の値が存在する場合
  • 左の値が存在しない場合

設定が有効になると稲妻マークが入ります。

上が登録済みの内容、下が未入力の状態。

上が登録済みの内容、下が未入力の状態。

4)ページを登録し、ページ毎にページ認識の目印となるデータバインディングを登録

ページ管理に進み、ページを登録したら、ページにタグを紐づけます。

ページ毎の「データバインディング」に進み「データバインディング」を追加、からデータエレメント「ページID」、データバインディングエクスプレッション「fcode_page_id」を登録します。

ページに目印(データバインディング)を登録する

ページに目印(データバインディング)を登録する

5)ページ毎にタグを有効にする

ページ毎の「サービスタグ設定」で、タグの「未設定」ボタンをクリックして「設定済み」にします。

以上で、入力ページ、確認ページそれぞれに行うことで、URLが同じでも別のタグが読み込まれるようになるはずです。

詳しい説明は、Yahoo!タグマネージャー提供のマニュアルをご確認ください。

Yahoo!タグマネージャー資料ダウンロード
http://tagmanager.yahoo.co.jp/download/

今回はここまでです

いかがだったでしょうか。今回の方法は、HTMLの変更が必要であり、タグマネージャーの設定だけでは完結しない方法ですが、URLが同じで違うページがある場合は有効な解決方法ですので試してみましょう。

次回はGoogleのタグマネージャーについて解説したいと思いますので、お楽しみに。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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