1
Yahoo!タグマネージャーのご利用について
タグマネージャーは、サイトそのものに手を入れること無く、「どのページでど のような条件のもと、何のタグを配信させるか」を一元管理できる便利なツール です。 中でも、Yahoo!タグマネージャーはウェブアンテナと正式に連携しております ので、安心してご利用いただけます。 ただし、ご設定方法が通常のタグの取り出し方とは異なりますので、本資料を ご参照の上でタグを設定してください。 ※本マニュアルはウェブアンテナのタグ設置用です。ユーザグラムのタグ設置については、ユーザグ ラム用のYahoo!タグマネージャーマニュアルが別にございますので、そちらをご参照ください。 ※本マニュアルの内容は、2017 年 2 月 17 日時点のものです。今後 Yahoo!タグマネージャーのインターフ ェースや仕様が変更され、操作方法が変わる可能性もありますのでご了承ください。2
カタログ掲載タグの設定方法
Yahoo!タグマネージャーでは、正式に連携したツールの「カタログ掲載タグ」 と、任意のタグを設置可能な「スマートカスタムタグ」の 2 種類があります。 ウェブアンテナは Yahoo!タグマネージャーと正式に連携しており、「カタログ掲 載タグ」をご利用頂けますので、ここでは「カタログ掲載タグ」の設定方法をご 案内します。 ただし、ウェブアンテナ管理画面から取り出せない特殊なタグは、本資料後半 の注意点をご覧の上で、「スマートカスタムタグ」で設定してください。 手順 1: タグの追加から、ウェブアンテナのタグを検索する まず、Yahoo!タグマネージャーにログインし、「サービスタグ管理」タブから、 「サービスタグを追加」ボタンをクリックし、新しいカタログ掲載タグの選択画 面を開いてください。 カタログ掲載タグの一覧が表示されるので、ここで検索欄に「ウェブアンテナ」 とカタカナで入力すると、ウェブアンテナのタグを見つけることができます。3 手順 2: タグの種類を選択する 次に、必要なタグを 4 つの種類から選択する必要があります。設定したいタグ の目的に合わせて、以下の表を参考に該当するタグの名前をクリックしてくださ い。 入口ページタグ ダイレクト方式の広告や自然流入 を計測するため、広告のリンク先 LP や全ページに一括で設置するタ グ 「ウェブアンテナ入口ページタグ」をクリック コンバージョンページタグ 通常のコンバージョンを計測する ため、フォームの完了ページや確認 ページなどに設置するタグ 「ウェブアンテナコンバージョンタグ（通常計測）」 をクリック onclick コンバージョンタグ リンクやボタンのクリックをコン バージョンとして計測する場合に 設置する特殊なタグ ※設置には Yahoo!タグマネージャー の詳細な知識が必要です 「ウェブアンテナコンバージョンタグ（オンクリッ ク計測）」をクリック イベントコンバージョンタグ その他、ページで発生した何らかの イベントをコンバージョンとして 計測する場合に設置する特殊なタ グ ※設置には Yahoo!タグマネージャー の詳細な知識が必要です 「ウェブアンテナコンバージョンタグ（その他イベ ント計測）」をクリック 尚、「onclick コンバージョンタグ」や「イベントコンバージョンタグ」を設置 する場合、あるいはコンバージョン属性を取得する場合は、Yahoo!タグマネージ ャーの設定方法について詳しい知識が必要となります。 ご不安な場合は、該当のタグだけはページに直接設置することをご検討くださ い。
4 手順 3: タグに必要な情報を、ウェブアンテナ管理画面からコピーする 必要なタグの種類を選択すると、タグに必要なID やパラメータを設定する画面 に移動します。これらの値は、ウェブアンテナの設定画面から「計測タグ」ペー ジを開き、通常のタグの該当する箇所からコピーして設定してください。 入口ページタグの場合 ウェブアンテナの管理画面で「入口ページタグ」を選択し、表示されたタグか ら下図のように「広告主 ID」をコピーして貼り付けてください。 「サービス名」には自由なタグの名前を設定できるので、「ウェブアンテナ 入 口ページタグ」等の分かり易い名前を入力し、「タグを作成」ボタンをクリックし てください。 ウェブアンテナ 計測タグページ Yahoo!タグマネージャー 1. タグの種類を選択 2. 通常のタグが表示される 3. 該当箇所から値をコピー <!-- WebAntenna --> <script type="text/javascript" src="http://DONTUSE.webantenna.info/js/webantenna.js"></script> <script type="text/javascript">
if ( typeof( webantenna ) == 'function' ) {
_wa.account = 'WA0000-1';
webantenna(); }
</script> <noscript>
<img width="1" height="1" alt=""
src="http://DONTUSE.webantenna.info/_webantenna.png?ga=WA0000-1& amp;jse=0"> </noscript> <!-- end WebAntenna --> WA0000-1 広告主 ID: 「WA」で始まり「-1」で終 わる 8 文字 ※コピーした値の前後に不要な空白や記号が入り込まないよう気を付けてください
5 コンバージョンタグの場合 (通常、オンクリック、その他イベント) ウェブアンテナの管理画面で該当する「コンバージョンページタグ」を選択し、 表示されたタグから下図のように「広告主 ID」と「コンバージョンパラメータ」 をコピーして貼り付けてください。 尚、「完了ページ用」「確認ページ用」等で複数のタグが表示された場合、Yahoo! タグマネージャー上のタグもそれぞれで複数設定する必要があります。 「サービス名」には自由なタグの名前を設定できるので、「ウェブアンテナ 会 員登録完了ページタグ」等の分かり易い名前を入力し、「タグを作成」ボタンをク リックしてください。 コンバージョン属性の取得について コンバージョンタグでコンバージョン属性を取得したい場合、ここでタグに取 得したい属性を設定する必要があります。 ただし、Yahoo!タグマネージャーでコンバージョン属性を取得するには複雑な 設定が必要となるため、Yahoo!タグマネージャーの機能を十分に把握されている 場合のみご利用ください。 具体的なコンバージョン属性の取得方法は、簡単な概要を本資料の次の章でご 説明いたします。 <!-- WebAntenna --> <script type="text/javascript" src="http://DONTUSE.webantenna.info/js/webantenna.js"></script> <script type="text/javascript">
if ( typeof( webantenna ) == 'function' ) {
_wa.account = 'WA0000-1'; _wa.cv = 'register_comp'; webantenna(); } </script> <noscript>
<img width="1" height="1" alt=""
src="http://DONTUSE.webantenna.info/_webantenna.png?ga=WA0000-1& amp;jse=0&cv=cv003"> </noscript> <!-- end WebAntenna --> WA0000-1 広告主 ID: 「WA」で始まり「-1」で終 わる 8 文字 ※コピーした値の前後に不要な空白や記号が入り込まないよう気を付けてください register_comp コンバージョンパラメータ: 1～20 文字の英数字、アンダー スコア、またはハイフン
6 手順 4: タグを配信する URL を設定する タグを配信する URL を設定し、保存します。「サービスタグ管理」タブから先 ほど登録したタグを選び、「新しいインプットを設定」ボタンを押して設定してく ださい。 URL に「*」「**」などのワイルドカード記法や正規表現を使うことで、柔軟な 指定も可能です。 指定方法の詳細は、ヤフー株式会社様にお問い合わせ頂くか、ヤフー株式会社 様提供のご利用ガイドをご参照ください。 ご利用ガイドダウンロード: http://tagmanager.yahoo.co.jp/download/ 手順 5: タグが正常に配信されるか確認する 設定が完了したら、以下のいずれか、または全ての方法で、正しくタグが配信 されているかどうかをご確認ください。 ・ ヤフー株式会社様提供のツール「タグインスペクター」を使用し、実際のペ ージで必要なタグが配信されているかを確認する ・ Yahoo!タグマネージャーの「サービスタグ管理」画面から、設置したタグの タグ実行数が増えることを確認する
7
コンバージョン属性の取得方法
Yahoo!タグマネージャーで、コンバージョン時のユニークな ID 等をコンバージ ョン属性として取得する場合、以下のステップを踏んで、タグマネージャーの機 能でタグに値を埋め込む必要があります。 この機能は、Yahoo!タグマネージャーでは「データエレメント」と呼ばれてい ます。以下に簡単な手順をご説明しますので、テスト環境などで十分にお試しの 上、ご活用ください。 尚、各機能や操作の詳細については、ヤフー株式会社様にお問い合わせ頂くか、 ヤフー株式会社様提供のご利用ガイドをご参照ください。 ご利用ガイドダウンロード: http://tagmanager.yahoo.co.jp/download/ 手順 1: ページ上に、埋め込みたい値を JavaScript 変数で準備しておく まず、Yahoo!タグマネージャーが取得できるよう、完了ページの HTML ソース 上に埋め込みたいコンバージョン属性の値を準備しておきます。 ここで は、 一番 簡単 な方 法とし て、 以下の よう に JavaScript 変数として 「window.wa_xxxx = ‘value’;」という形で記述し準備しておく方法でご説明しま す。 <script type="text/javascript"> window.wa_order_id = 'order_0123'; window.wa_total_amount = '29800'; </script> こ の 例 で は 、"wa_order_id" と い う 名 前 で 注 文 番 号 「 order_0123 」 を 、 "wa_total_amount"という名前で合計金額「29800」を準備しています。 ※既にページ上に値が存在する場合、この手順を省いても、複雑なデータバインディングエクスプレッ ションを用いれば取得することは可能ですが、詳しくわからない場合はこの方法を推奨します8 手順 2: Yahoo!タグマネージャー上で、「データエレメント」を追加する 次に、Yahoo!タグマネージャーの管理画面を開き、「データディクショナリー」 タブから「データエレメントを追加」ボタンをクリックしてください。 この「データエレメント」が、タグの中に値を埋め込む仕組みで、「どんな名前 の値を拾ってきて、埋め込む予定なのか」を設定します。 「データエレメント名」には任意の名前を、「データエレメントの説明」にはど んな値を取得するのかを記入し、「保存」ボタンをクリックしてください。
9 手順 3: タグにデータエレメントを埋め込む 設定するウェブアンテナコンバージョンタグの中に、コンバージョン属性とし てデータエレメントを埋め込みます。 埋め込みには「コンバージョン属性」欄を使用します。左側には、ウェブアン テナの「コンバージョン属性」設定画面に登録された、対応するコンバージョン 属性の「クエリ」を、右側にはデータエレメントを入力します。 データエレメントは、手順 2 で名づけた「データエレメント名」を「[[]] (二重 四角かっこ)」で囲み、"[[order_id]]"のような形で入力してください。 （データエレメント欄の右側にある矢印ボタンを押し、登録したデータエレメ ントを選択するという方法でも入力できます） 複数のコンバージョン属性を設定する場合は、「キーバリューペアの追加」リンク をクリックすると行を増やすことができます。 ウェブアンテナ側で設定した、 該当するコンバージョン属性の 「クエリ」 手順 2 で設定した データエレメント名 複数のコンバージョン属性を取得する 場合はクリック
10 手順 4: データエレメントとデータバインディングエクスプレッションをタグ に紐付ける 最後に、通常のタグの設定と同様に、対象URL を設定します。ただしその際に、 先ほど設定したデータエレメントと、「具体的にどのページの、どの値を、どうや って拾ってくるのか」を表す「データバインディングエクスプレッション」を設 定する必要があります。 「ウェブサイト」タブから設定した URL 条件を選び、「バインディング」タブ の中にある「データバインディング」タブから、「データバインディングを追加」 ボタンを押します。 「データエレメント」では、手順2 で作成したものを選択します。「データバイ ンディングエクスプレッション」には、データエレメントとページの組み合わせ に対して、値を取得するための JavaScript 表現を記述します。 今回の例の手順 1 のように、単純に JavaScript 変数を設定した場合は、その変 数の名前を「wa_order_id」等と入力するだけで取得できます。 複数のコンバージョン属性を取得したい場合は、以上の手順 2～手順 4 をサー ビス ID またはコンバージョン属性の数だけ繰り返してください。 全て入力が終わったら、保存して設定完了です。実際にコンバージョン属性が 取得できているか、「計測タグの設置と動作確認マニュアル」を参照し確認してく ださい。 ←手順 1 で設定した JavaScript 変数名 ←手順 2 で設定したデータエレメント名
11
イベントを計測する（リンククリックの場合）
本資料では、特定のリンクをクリックすること（リンククリック）を CV とし て計測したい場合の例について解説します。 イベントを計測する場合、その内容に応じて、Yahoo!タグマネージャー上で異 なる条件設定が必要となります。この他のイベントについては、ヤフー株式会社 様にお問い合わせ頂くか、またはヤフー株式会社様提供のご利用ガイドをご参照 ください。 ご利用ガイドダウンロード: http://tagmanager.yahoo.co.jp/download ※イベント計測の際は、Yahoo!タグマネージャーの設定方法について詳しい知識が 必要となります。ご不安な場合は、該当のタグだけはページに直接設置することを ご検討ください。 注意点 ページ遷移のあるリンククリックは、別タブで開くようにする ウェブアンテナの仕様上、ページ遷移のあるリンククリックは、リンク先が別 タブで開く形式でなければ計測することができません。ページ遷移が起こるか・ 遷移先のページはどのように開くかを事前にご確認ください。 ・ ページ遷移なし 計測できる ・ ページ遷移あり ・ 遷移先のページは別タブで開く 計測できる ・ ページ遷移あり ・ 遷移先のページは同じタブで開く 計測できない リンククリックを別タブで開くようにするには、下記のように該当する<a>タグ に、target=”_blank”属性を追加します。<a id="onclick_id" target="_blank" href="https://xxxxxx.co.jp/yyyyyy.html">リンク</a>
ただし、別タブで開くことで、ユーザがウェブサイトを利用する際の体験を損 ねてしまう場合もございます。別タブで開くことでユーザに悪影響を及ぼさない か、事前に検討しておくことを推奨いたします。
12 手順 1: 計測したいリンクに id/class を振る Yahoo!タグマネージャー上でイベント条件を設定するには、そのイベントに関 わるページ内要素を Yahoo!タグマネージャーが識別できるようにする必要があり ます。 リンクのクリックを計測する場合、計測したいリンク部分のHTML 要素の中に、 id="●●"または class="●●"という記述を付け加えます。（●●の部分には識別用 に任意の名前を指定してください） 以下の例では、リンクに"onclick_id"という id をつけています。
<p><a id="onclick_id" target="_blank" href="http://xxxxxx.co.jp/yyyyyy.html">リンク</a></p>
注意点
イベント計測用の id/class 名は、計測したい要素のみに付与する
手順 1 で指定した id または class の名前が目的外の要素に記述されていると、 その要素がクリックされたときにもタグが配信され、計測数値が上振れしてしま います。特に既存の id または class 名を流用される場合はご注意ください。
13 手順 2: 新しいイベントを作る 次に、イベントを計測するための箱を作ります。 「ウェブサイト」画面の中にある「イベント」タブから、新しいページイベン トを追加できます。 「イベント名」には分かりやすい識別子を、「イベントの説明」にはどんなイベ ントを計測するのかを記入し、「ページイベントを追加」ボタンをクリックしてく ださい。 ←任意の名前 ←イベントの説明
14 手順 3: イベント条件を設定する 通常と同様に、タグと対象サイトの設定をします。それに加えて、手順 2 で作 った箱を対象サイトの設定と紐付け、その箱がイベントを計測するための条件を 指定しておく必要があります。 今回の場合、「特定のリンクをクリックしたときのみタグが配信される」という 条件を設定する必要があります。 ページ詳細画面の「バインディング」タブの中にある「イベントバインディン グ」タブから、新しいページイベントを追加できます。「イベント」は手順 2 で作 ったものを選び、「トリガー」は一覧の中から「click」を選択します。「バインデ ィング方法」については、「？」マークをクリックしてヘルプを確認し、いずれか を選択してください。 「エレメントセレクター」には、手順1 で設定した id または class の名前を記 入します。このとき、id であれば頭に「#」を、class であれば頭に「.」をつけて 記入してください。 ←手順 1 で設定した id または class 名 ←手順 2 で設定したイベント名
15 手順 4: タグ実行条件を設定する 最後に、先ほど作ったイベントをタグ自体の実行条件に結びつける設定が必要 です。これを忘れると、リンクがあるページにアクセスしただけでコンバージョ ンが上がってしまいます。 「サービスタグ管理」画面から設定中のタグを選択し、「タグ実行条件」タブを 選択してください。画面下部にある「イベントに対する条件の追加」を押し、プ ルダウンの中から手順 2・3 で作ったイベントを選択します。下図のように、イベ ント名がプルダウンの上に表示されれば、選択済みとなっています。 全て入力が終わったら、保存して設定完了です。指定したイベントが発生する タイミングで実際にタグが動作するか、「計測タグの設置と動作確認方法」マニュ アルを参照し確認してください。 ←手順 2・3 で設定したイベント名
16
つまずきやすいポイント
タグを正しく設定したはずなのにうまく動作しない場合、まずは以下のような ポイントをご確認ください。 配信先ページに、「ユニバーサルタグ」は埋まっていますか？ Yahoo!タグマネージャー上で配信設定を行っても、配信先のページ自体に Yahoo!タグマネージャーの「ユニバーサルタグ」が設置されていない限り、タグ は配信されません。 例えば、PC サイトでは「ユニバーサルタグ」を設置していても、スマートフォ ンサイトには設置していない、といった場合もございますのでお気を付けくださ い。 ページ設定の URL は間違っていませんか？ 配信先ページの URL パターンは、1 文字でも一致しなければタグは配信されま せん。 例えば、次のような場合に想定通りタグが配信されないことがあります。「*」 や「**」といったワイルドカード記法をうまく使い、正しく URL パターンを設定 してください。 ・ 「https」のページに、「http」の URL パターンを設定してしまった ・ URL の最後にスラッシュがあるのに、無い URL パターンを設定してしまっ た (もしくは、その逆) ・ ウェブアンテナやGoogle Analytics などの計測パラメータが付いた結果、設 定したURL とは異なる URL でアクセスされていた タグは有効になっていますか？ Yahoo!タグマネージャー上では、タグを追加した直後は「無効」に設定されて おり、これを「有効」にしなければ配信されません。 尚、「プレビュー」になっている場合は、Yahoo!タグマネージャーを管理してい る自分だけには配信されるのに、一般ユーザがアクセスしたときは配信されない といった状況も起こりますのでお気を付けください。17 同じ URL でも内容が違うページはありませんか？ 例えば申込フォームの「確認ページ」と「完了ページ」等、URL は同じでも内 容が異なり、配信したいタグも異なる場合があります。 こういった場合は、単純に URL で配信先を設定することができないため、該当 ページには直接設置するか、「タグ実行条件」等を活用して、「完了ページ用タグ」 は「完了ページ」のみに配信されるようご設定ください。 タグに設定した「広告主 ID」や「コンバージョンパラメータ」に不要な文字が 混じっていませんか？ 「広告主ID」や「コンバージョンパラメータ」が誤っている場合、タグは配信 されても、ウェブアンテナ上では正しく計測がされません。 コピーするときにスペースや記号が混じってしまっていないかを確認してくだ さい。 同じページに Yahoo!タグマネージャーと直接設置のタグが混ざっていません か？ 同じページに、Yahoo!タグマネージャーで配信されるウェブアンテナのタグと、 直接設置したウェブアンテナのタグが混在する場合、環境によっては片方がうま く動作しなくなる場合があります。 例えば、入口ページタグはYahoo!タグマネージャーを使って一括配信している が、コンバージョンタグは直接設置している場合等が考えられます。 こういった場合は、該当ページへは全て直接設置するか、Yahoo!タグマネージ ャー上で該当ページを「対象外 URL」に追加して除外するなどして、同じページ へのウェブアンテナタグ配信方法が混在しないようにしてください。
18
スマートカスタムタグの使用方法
Yahoo!タグマネージャーでは、ウェブアンテナの管理画面から取り出せない特 殊タグを含む任意のタグを、「スマートカスタムタグ」という形で設定することが 可能です。 スマートカスタムタグを追加したい場合は、サービスタグ選択画面の左下か右 上に書かれた「スマートカスタムタグを追加」リンクをクリックしてください。 タグの設定画面が開くので、「サービスタグ情報」欄にタグを直接貼り付けて保 存すれば設定が完了します。 ここにタグを直接貼り付け19 注意点 スマートカスタムタグを使用する場合、ウェブアンテナのタグは、同じページ に複数配信することができません。複数配信してしまうと、タグが正常に動作し ない場合があります。 特に、一括で入れている「入口ページタグ」と、個別のページに入れている「コ ンバージョンタグ」とが重複するケースが多いので、「対象外 URL」を活用する などして、配信設定が重複しないようにお気を付けください。
20
