Yahoo!タグマネージャーへのタグ設定方法

本ページでは、Yahoo!タグマネージャーを利用して、USERGRAMの計測タグを配信する方法をご説明します。

USERGRAMのタグは、現時点ではYahoo!タグマネージャーのタグカタログに含まれていません。このため、 「スマートカスタムタグ」から、タグを直接貼り付ける必要があります。

まず、サービスタグの選択画面右上に書かれた 「スマートカスタムタグを追加」リンクをクリックしてください。

タグの設定画面が開くので、「サービスタグ情報」欄に、 USERGRAMで発行されたタグを直接貼り付けて保存します。

タグを配信するURLを設定し、保存します。「サービスタグ管理」タブから先ほど登録したタグを選び、「新しいインプットを設定」ボタンを押して設定してください。

「「*」「**」などのワイルドカード記法や正規表現を使うことで、柔軟な指定も可能です。

指定方法の詳細は、ヤフー株式会社様にお問い合わせ頂くか、ヤフー株式会社様提供の ご利用ガイドをご参照ください。

ご利用ガイドダウンロード: http://tagmanager.yahoo.co.jp/download/

設定が完了したら、以下のいずれか、または全ての方法で、正しくタグが配信されているかどうかをご確認ください。

• ヤフー株式会社様提供のツール「タグインスペクター」を使用し、実際のページで必要なタグが配信されているかを確認する
• Yahoo!タグマネージャーの「サービスタグ管理」画面から、設置したタグのタグ実行数が増えることを確認する
• こちらのページ から「計測タグの設置と動作確認方法」マニュアルを参照し、_usergram.png へのビーコンリクエストを確認する

Yahoo!タグマネージャーで、サービスIDやコンバージョン・イベント属性を取得する場合、 タグマネージャーの機能でタグに値を埋め込む必要があります。

この機能は、Yahoo!タグマネージャーでは 「データエレメント」と呼ばれています。以下に簡単な手順をご説明しますので、テスト環境などで十分にお試しの上、ご活用ください。

なお、各機能や操作の詳細については、ヤフー株式会社様にお問い合わせ頂くか、ヤフー株式会社様提供の ご利用ガイドをご参照ください。

ご利用ガイドダウンロード: http://tagmanager.yahoo.co.jp/download/

まず、 サービスID/コンバージョン・イベント属性の埋め込みを行うページのHTMLソース上に、埋め込みたい値を準備しておきます。ここでは一番簡単な方法として、それぞれの値をJavaScript変数として準備する方法をご説明します。

HTML内の、Yahoo!タグマネージャーのユニバーサルタグよりも上部の位置に以下のように記述を行ってください。

:
<script type="text/javascript">
  window.ug_serviceId = 'AB123';
  window.ug_price = '1800'
</script>
:
:
<!-- Yahoo!タグマネージャーのユニバーサルタグ -->
:

この例では、 ug_serviceId という名前で会員ID「AB123」を、ug_price という名前で売上「1800」を準備しています。

「AB123」「1800」といった値は、HTMLの出力時にサーバ側のプログラムで埋め込むか、ページ表示時にブラウザ側のプログラムで値を格納する方法を用いて動的にセットしてください。

※既にページ上に値が存在する場合、この手順を省いても、複雑なデータバインディングエクスプレッションを用いれば取得することは可能ですが、詳しくわからない場合はこの方法を推奨します

注意 ： サービスIDを取得する場合

• サービスIDはユーザごとに異なるものにしてください
  • サービスIDは、ユーザ一人一人の行動を区別するためのものです。会員番号など、ユーザごとに固有の番号が付与されるものを利用してください。
• サービスIDが取得できない場合は、必ず
  • USERGRAMでは、サービスIDを取得できないときにエラー文字列やテンプレート文字列を渡してしまうと、該当のアクセスすべてが同じ一人のユーザのものとして扱われてしまいます。
  • 例えば「error」という文字列が渡された場合、サービスIDを取得できなかったアクセスすべてが「error」というIDを持った特定のユーザのものとみなされ、同じユーザのアクセスとしてまとめて集計されてしまいます。

次に、Yahoo!タグマネージャーの管理画面を開き、 「データディクショナリー」から「データエレメントを追加」ボタンをクリックしてください。

この 「データエレメント」が、タグの中に値を埋め込む仕組みで、「どんな名前の値を拾ってきて、埋め込む予定なのか」を設定します。

「データエレメント名」には任意の名前を、「データエレメントの説明」にはどんな値を取得するのかを記入し、「保存」ボタンをクリックしてください。

設定するUSERGRAMコンバージョンタグの中に、サービスIDまたはコンバージョン・イベント属性として データエレメントを埋め込みます。

データエレメントは、 手順2で名づけた「データエレメント名」を「[[]] (二重四角かっこ)」で囲み、'[[ytm_serviceId]]' のような形で入力します。

※タグを取り出した際に 「●●●●」となっていた部分のみを書き換えてください。サービス ID ・属性を格納する配列名 (ugattr) ならびにその key 名  (serviceId, prop1, prop2, …) を書き換えてしまいますと、属性値が正しく取得できなくなりますので、そちらは変更しないようご注意ください。

最後に、通常のタグの設定と同様に、対象URLを設定します。ただしその際に、先ほど設定したデータエレメントと、 「具体的にどのページの、どの値を、どうやって拾ってくるのか」を表す「データバインディングエクスプレッション」を設定する必要があります。

「ウェブサイト」タブから設定したURL条件を選び、「バインディング」タブの中にある「データバインディング」タブから、「データバインディングを追加」ボタンを押します。

「データエレメント」では、手順2 で作成したものを選択します。「データバインディングエクスプレッション」には、データエレメントとページの組み合わせに対して、値を取得するためのJavaScript表現を記述します。

手順1 の例のように、単純にJavaScript変数を設定した場合は、その変数の名前を 「ug_serviceId」等と入力するだけで取得できます。

全て入力が終わったら、保存して設定完了です。実際にコンバージョン・イベント属性が取得できているか、こちらのページ から「計測タグの設置と動作確認方法」マニュアルを参照し、確認してください。

本章では、id/classを振った特定のリンクがクリックされたタイミングで、イベントまたはコンバージョンを計測する場合の設定例を解説します。

ページ上での特定のイベント発生をきっかけに計測を行う場合、Yahoo!タグマネージャー上でイベントの内容に応じた条件設定が必要になります。リンククリック以外のイベントについては、ヤフー株式会社様にお問い合わせ頂くか、またはヤフー株式会社様提供のご利用ガイドをご参照ください。 また、id/classを振らずにリンククリックを計測する場合も、ヤフー様へのお問い合わせあるいはヤフー様のご利用ガイドのご参照をお願いします。

ご利用ガイドダウンロード: http://tagmanager.yahoo.co.jp/download/

※イベント計測の際は、Yahoo!タグマネージャーの設定方法について詳しい知識が必要です。不慣れな場合には、 該当のタグだけはページに直接設置することをご検討ください。

注意 ： イベント発生時にページ遷移が発生する場合は、別タブで開いてください

計測したいイベントがページ遷移を伴う場合、一部のブラウザではイベントの計測処理よりもページ遷移が優先されてしまい、計測が行われません。計測処理を確実に行うために、遷移先のページは別タブで開くようにしてください。

例えば、<a>タグのリンククリックを別タブで開くようにする場合、該当する<a>タグに下記のように target="_blank" 属性を追加します。

<a id="onclick_id" target="_blank" href="https://xxxxxx.co.jp/yyyyyy.html">リンク</a>

ただし、別タブで開くことで、ユーザがウェブサイトを利用する際の体験を損ねてしまう場合もあります。別タブで開くことでユーザに悪影響を及ぼさないか、事前に検討されることを推奨します。

Yahoo!タグマネージャー上でイベント条件を設定するには、そのイベントに関わるページ内要素をYahoo!タグマネージャーが識別できるようにする必要があります。

リンクのクリックを計測する場合、計測したいリンク部分のHTML要素の中に、id="●●"またはclass="●●"という記述を付け加えます。（●●の部分には識別用に任意の名前を指定してください）

以下の例では、リンクに"onclick_id"というidを付与しています。

<a id="onclick_id" target="_blank" href="http://xxxxxx.co.jp/yyyyyy.html">リンク</a>

注意 ： イベント計測用のid/class名は、計測したい要素のみに付与してください

手順1で指定したidまたはclassの名前が目的外の要素に記述されていると、その要素がクリックされたときにもタグが配信され、計測数値が上振れしてしまいます。特に既存のidまたはclass名を流用される場合はご注意ください。

次に、 イベントを計測するための箱を作ります。

「ウェブサイト」画面の中にある「イベント」タブから、新しいページイベントを追加できます。

「イベント名」には分かりやすい識別子を、「イベントの説明」にはどんなイベントを計測するのかを記入し、「ページイベントを追加」ボタンをクリックしてください。

通常と同様に、タグと対象サイトの設定をします。それに加えて、手順2で作った箱を対象サイトの設定と紐付け、その箱がイベントを計測するための条件を指定しておく必要があります。

今回の場合、 「特定のリンクをクリックしたときのみタグが配信される」という条件を設定する必要があります。

ページ詳細画面の「バインディング」タブの中にある「イベントバインディング」タブから、新しいページイベントを追加できます。「イベント」は 手順2で作ったものを選び、「トリガー」は一覧の中から「click」を選択します。「バインディング方法」については、「？」マークをクリックしてヘルプを確認し、いずれかを選択してください。

「エレメントセレクター」には、手順1で設定したidまたはclassの名前を記入します。このとき、idであれば頭に「#」を、classであれば頭に「.」をつけて記入してください。

最後に、先ほど作ったイベントをタグ自体の実行条件に結びつける設定が必要です。 これを忘れると、リンクがあるページにアクセスしただけでコンバージョンが上がってしまいますのでご注意ください。

「サービスタグ管理」画面から設定中のタグを選択し、 「タグ実行条件」タブを選択してください。画面下部にある「イベントに対する条件の追加」を押し、プルダウンの中から手順2・3で作ったイベントを選択します。下図のように、イベント名がプルダウンの上に表示されれば、選択済みとなっています。

全て入力が終わったら、保存して設定完了です。指定したイベントが発生するタイミングで実際にタグが動作するか、 こちらのページ から「計測タグの設置と動作確認方法」マニュアルを参照し、確認してください。

タグを設定しても うまく動作しない場合、以下のような点をご確認ください。

Yahoo!タグマネージャー上で配信設定を行っても、配信先のページ自体にYahoo!タグマネージャーの 「ユニバーサルタグ」が設置されていない限り、タグは配信されません。

例えば、PCサイトでは「ユニバーサルタグ」を設置していても、スマートフォンサイトには設置していない、といった場合もございますのでお気を付けください。

配信先ページのURLパターンは、 1文字でも一致しなければタグは配信されません。

例えば、次のような場合に想定通りタグが配信されないことがあります。 「*」や「**」といったワイルドカード記法をうまく使い、正しくURLパターンを設定してください。

• 「https」のページに、「http」のURLパターンを設定してしまった
• URLの最後にスラッシュがあるのに、無いURLパターンを設定してしまった (もしくは、その逆)
• USERGRAMやGoogle Analyticsなどの計測パラメータが付いた結果、設定したURLとは異なるURLでアクセスされていた

Yahoo!タグマネージャー上では、タグを 追加した直後は「無効」に設定されており、これを「有効」にしなければ配信されません。

なお、 「プレビュー」になっている場合は、Yahoo!タグマネージャーを管理している自分だけには配信されるのに、一般ユーザがアクセスしたときは配信されないといった状況も起こりますのでお気を付けください。

例えば申込フォームの「確認ページ」と「完了ページ」等、 URLは同じでも内容が異なり、配信したいタグも異なる場合があります。

こういった場合は、単純にURLで配信先を設定することができないため、該当ページには直接設置するか、 「タグ実行条件」等を活用して、「完了ページ用タグ」は「完了ページ」のみに配信されるようご設定ください。

「広告主ID」や「コンバージョンパラメータ」が誤っている場合、タグは配信されても、 USERGRAM上では正しく計測がされません。

コピーするときに スペースや記号が混じってしまっていないかを確認してください。