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