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

すでに一般的になっており、ご存知の方も多いと思いますが、タグマネージャーとは、、さまざまなタグを、直接ソースに貼ることなく管理できる仕組みです。
サイト内の各ページに共通のタグを貼り、タグマネージャーの管理画面にて「どのページにどのタグを送信するか」を設定することができ、Yahoo、Google、Adobeなど各社が提供しています。

最初に　～タグマネージャーが生まれた背景～

タグマネージャーが生まれた背景には、近年煩雑化しているタグ管理の問題があります。

アクセス解析に限らず、様々な計測、広告、ABテストなど、サイトに導入するツールの種類や量が増えていると思います。
外部ツールはページにタグと呼ばれるHTMLを貼って動作することが一般的ですから、貼るタグの種類も多いはずです。コンバージョンを計測したいページにはそのページにだけ専用のタグを貼る必要があるなど、ページごとに貼るべきタグの管理も煩雑になってきていることと思います。
当社EFOツールもご多聞に漏れず、フォームの＜入力／確認／完了＞それぞれのページ用にユニークなタグを貼り付けることをツール動作およびご利用の前提とさせていただいております。

この問題を解決すべく生まれたのがタグマネージャーです。
タグマネージャーは、タグマネージャー用のタグが貼ってあれば、ページURLやその他の条件から、ページを識別し、特定のページに、あらかじめ登録してあるタグをリアルタイムに貼り付けることができます。

すでにこのブログでも、何度かタグマネージャーについての記事を公開してきましたが、その後もお問い合わせをいただいくこともあり、今後、あらためてテーマとして取り上げたいと思います。

今回は、Yahoo!タグマネージャーを例に説明します

以前、掲載した記事は、Yahoo!タグマネージャーのベンダーに認定された際に、「ベンダータグ」の登録を中心に説明した内容でした。

※過去に掲載した記事

タグの管理が劇的に楽になる「Yahoo!タグマネージャー」を設定してみた
https://f-tra.jp/blog/howto/1621

Yahoo!タグマネージャー設定方法
https://f-tra.jp/ytm.html

※ベンダータグは、タグのパラメータを入力することでEFOタグが登録できるというものですが、これ以外にも「スマートタグ」という、タグのHTMLを直接管理画面に貼り付けて登録する方法も提供されており、どちらの方法でもYahoo!タグマネージャーでのEFO利用は可能です。

まず、ページとタグの関連付けの方法として、ページのURLを指定する方法があります。今回は、そのURLで指定する際の注意点についてまとめます。

Yahoo!タグマネージャーの基本

基本的な概念として、「サイト」「タグ」「ページ」「データ/イベント」があります。
これらは、管理画面の４つのメインメニューにも該当します。設定する際は、この順でおこなっていくのが良いでしょう。

サイトを登録した直後の画面。管理画面上部の４つのメニューはそれぞれ「サイト」「タグ」「ページ」「データ/イベント」に対応している

サイト

いうまでもなく、タグをはる対象のサイトです。
サイト１つに対して、１つの（タグマネージャーを動作させるための）タグが用意され、それをサイト下の各ページに貼ることになります。

タグ（サービスタグ）

YTMでは「サービスタグ」と呼ばれています。
当社EFOでいえば、＜入力ページ用＞＜確認ページ用＞＜完了ページ用＞の３つのタグがサービスタグに該当し、それぞれ別々にサイト下に登録する必要があります。

登録方法は、ベンダータグとして、またスマートカスタムタグとして登録する方法があります。

スマートカスタムタグの登録画面。

ページ

サービスタグを読み込みたいページです。
ユニバーサルタグが、サービスタグを呼び出す対象のページを認識するためには、ページの登録が必要です。

さらに、登録したページ毎にページを認識するための条件設定（URLで指定する場合は「URLパターン」）を登録する必要があります。

データ/イベント

タグを登録したURLに合致するか以外の方法で呼び出す場合に使います。今回は「データ/イベント」の設定については触れません。次回扱う予定です。

ページの登録までが完了したら、ページ毎に、サービスタグを呼び出すための条件設定を行います。

ページの設定（サービスタグの呼び出し）

ユニバーサルタグがページを認識するための「URLパターン」の設定を行います。

今回は、最も基本的な、URLでの設定について説明します。URLの指定には、あらかじめ便利なワイルドカード、正規表現が用意されています。

URLパターンを実際に登録した画面。

もしかすると、「ワイルドカード」「正規表現」という言葉を聞き慣れない方もいらっしゃるかもしれませんが、ぜひこの機会に活用してみてください。

ワイルドカード

ワイルドカードとは、一定範囲の文字列を指定するために用意されたパターンです。YTMでは以下２通りのワイルドカードが用意されています。

• **（半角アスタリスク２つ）
  任意の複数の文字列０文字以上を意味します。正規表現の「.*」に相当。
• *（半角アスタリスク１つ）
  “/”（スラッシュ）を含まない任意の複数の文字列０文字以上を意味します。正規表現の「[^/]*」に相当。

正規表現

より多様な表現をするために正規表現も使えるようになっています。正規表現を波カッコ「{}」で囲んで使います。

※詳しくはYahoo!様が公開しているマニュアルを見てください。

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

具体的なページ設定例

例えば、以下のようなURLの３つのページに設定をしたいとします。（URLはダミーです。）

これだけならそのまま上記のURLを登録すればOKです。
しかし、URL末尾にいわゆるGETパラメーターがつく可能性がある場合などは、条件に一致せず、読み込むべきタグが読み込まれない、という事態になりかねません。

例えば、下記のようなURLが存在する場合です。

このような場合には、ワイルドカードを使い、

とするか、
終了を意味する正規表現「$」を使って、

を登録しましょう。どれかが満たされた場合に、入力ページとして認識されます。

今回はここまでです

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