Yahoo! タグマネージャーのご利用について タグマネージャーは サイトそのものに手を入れること無く 任意のページに任意のタグを配信できる便利なツールですが 中でも Yahoo! タグマネージャー はウェブアンテナと連携しており 安心してご利用頂くことが可能です ただし ご設定方法が通常のタグの取り出し方とは異なりますので 本資料をご参照の上でタグを設定してください ご注意点 1. タグの設定 配信したいタグの種類を選択したり パラメータを設定して配信の準備を行います 2. ページの設定 準備したタグが配信される先のページを設定し そのページにどんなタグを配信するかを選択します 3. より高度な設定 コンバージョン属性を取得したり クリック等のイベントによってタグを発火したり 条件によってタグを出し分けたりします 本資料をご参照ください ヤフー様提供の資料をご覧頂くか またはヤフー様にお問い合わせください タグマネージャーをお使いの場合 タグの設定 と ページへの配信 の 2 つのステップが必要ですが 本資料では タグの設定 についてのみ扱っております ページへの配信 を含む Yahoo! タグマネージャーの基本的な設定方法については ヤフー株式会社様にお問い合わせ頂くか またはヤフー株式会社様提供のご利用ガイドをご参照ください ご利用ガイドダウンロード : http://tagmanager.yahoo.co.jp/download/ 1
カタログ掲載タグの設定方法 Yahoo! タグマネージャーでは 正式に連携したツールの カタログ掲載タグ と 任意のタグを設置可能な スマートカスタムタグ の 2 種類があります ウェブアンテナは Yahoo! タグマネージャーと正式に連携しており カタログ掲載タグ をご利用頂けますので ここでは カタログ掲載タグ の設定方法をご案内します ただし ウェブアンテナ管理画面から取り出せない特殊なタグは 本資料後半の注意点をご覧の上で スマートカスタムタグ で設定してください 手順 1: タグの追加から ウェブアンテナのタグを検索する まず Yahoo! タグマネージャーにログインし サービスタグ管理 タブから サービスタグを追加 ボタンをクリックし 新しいカタログ掲載タグの選択画面を開いてください カタログ掲載タグの一覧が表示されるので ここで検索欄に ウェブアンテナ とカタカナで入力すると ウェブアンテナのタグを見つけることができます 手順 2: タグの種類を選択する 次に 必要なタグを 4 つの種類から選択する必要があります 設定したいタグの目的に合わせて 以下の表を参考に該当するタグの名前をクリックしてください 2
入口ページタグ ウェブアンテナ入口ページタグ をクリック ダイレクト方式の広告や自然流入を計測するため 広告のリンク先 LP や全ページに一括で設置するタグ コンバージョンページタグ 通常のコンバージョンを計測するため フォームの完了ページや確認ページなどに設置するタグ ウェブアンテナコンバージョンタグ ( 通常計測 ) をクリック onclick コンバージョンタグ リンクやボタンのクリックをコンバージョンとして計測する場合に設置する特殊なタグ ウェブアンテナコンバージョンタグ ( オンクリック計測 ) をクリック 設置には Yahoo! タグマネージャーの詳細な知識が必要です イベントコンバージョンタグ その他 ページで発生した何らかのイベントをコンバージョンとして計測する場合に設置する特殊なタグ ウェブアンテナコンバージョンタグ ( その他イベント計測 ) をクリック 設置には Yahoo! タグマネージャーの詳細な知識が必要です 尚 onclick コンバージョンタグ や イベントコンバージョンタグ を設置する場合 あるいはコンバージョン属性を取得する場合は Yahoo! タグマネージャーの設定方法について詳しい知識が必要となります ご不安な場合は 該当のタグだけはページに直接設置することをご検討ください 手順 3: タグに必要な情報を ウェブアンテナ管理画面からコピーする 必要なタグの種類を選択すると タグに必要な ID やパラメータを設定する画面に移動します これらの値は ウェブアンテナの設定画面から 計測タグ ページを開き 通常のタグの該当する箇所からコピーして設定してください 3
ウェブアンテナ計測タグページ 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 コピーした値の前後に不要な空白や記号が入り込まないよう気を付けてください サービス名 には自由なタグの名前を設定できるので ウェブアンテナ入口ページタグ 等の分かり易い名前を入力し タグを作成 ボタンをクリックしてください コンバージョンタグの場合 ( 通常 オンクリック その他イベント ) ウェブアンテナの管理画面で該当する コンバージョンページタグ を選択し 表示されたタグから下図のように 広告主 ID と コンバージョンパラメータ をコピーして貼り付けてください 尚 完了ページ用 確認ページ用 等で複数のタグが表示された場合 Yahoo! タグマネージャー上のタグもそれぞれで複数設定する必要があります 4
<!-- 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 コピーした値の前後に不要な空白や記号が入り込まないよう気を付けてください サービス名 には自由なタグの名前を設定できるので ウェブアンテナ会員登録完了ページタグ 等の分かり易い名前を入力し タグを作成 ボタンをクリックしてください コンバージョン属性の取得について コンバージョンタグでコンバージョン属性を取得したい場合 ここでタグに取得したい属性を設定する必要があります ただし Yahoo! タグマネージャーでコンバージョン属性を取得するには複雑な設定が必要となるため Yahoo! タグマネージャーの機能を十分に把握されている場合のみご利用ください 具体的なコンバージョン属性の取得方法は 簡単な概要を本資料の次の章でご説明いたします 手順 4: 追加したタグを 必要なページへ配信する タグの追加が完了したら 追加したタグが対応するページに配信されるよう ページ管理 からページを追加し 各ページの サービスタグ設定 で該当するタグを 設定済み に変更します 尚 オンクリック や その他イベント計測 のコンバージョンタグは ページ設定だけではなくイベントハンドラーの設定も必要となりますので 併せてご設定ください 設定が完了したら 以下のいずれか または全ての方法で 正しくタグが配信されているかどうかをご確認ください 5
実際にウェブアンテナの管理画面に数値が上がってくるか テスト計測を実施する Yahoo! タグマネージャーの サービスタグ管理 画面から 設置したタグのタグ実行数が増えることを確認する ヤフー株式会社様提供のツール タグインスペクター を使用し 実際のページで必要なタグが配信されているかを確認する つまづきやすいポイント タグを正しく設定したはずなのにうまく動作しない場合 まずは以下のようなポイントをご確認ください 配信先ページに ユニバーサルタグ は埋まっていますか? Yahoo! タグマネージャー上で配信設定を行っても 配信先のページ自体に Yahoo! タグマネージャーの ユニバーサルタグ が設置されていない限り タグは配信されません 例えば PC サイトでは ユニバーサルタグ を設置していても スマートフォンサイトには設置していない といった場合もございますのでお気を付けください ページ設定の URL は間違っていませんか? 配信先ページの URL パターンは 1 文字でも一致しなければタグは配信されません 例えば 次のような場合に想定通りタグが配信されないことがあります * や ** といったワイルドカード記法をうまく使い 正しく URL パターンを設定してください https のページに http の URL パターンを設定してしまった URL の最後にスラッシュがあるのに 無い URL パターンを設定してしまった ( もしくは その逆 ) ウェブアンテナや Google Analytics などの計測パラメータが付いた結果 設定した URL とは異なる URL でアクセスされていた タグは有効になっていますか? Yahoo! タグマネージャー上では タグを追加した直後は 無効 に設定されており これを 有効 にしなければ配信されません 尚 プレビュー になっている場合は Yahoo! タグマネージャーを管理してい 6
る自分だけには配信されるのに 一般ユーザがアクセスしたときは配信されないといった状況も起こりますのでお気を付けください 同じ URL でも内容が違うページはありませんか? 例えば申込フォームの 確認ページ と 完了ページ 等 URL は同じでも内容が異なり 配信したいタグも異なる場合があります こういった場合は 単純に URL で配信先を設定することができないため 該当ページには直接設置するか タグ実行条件 等を活用して 完了ページ用タグ は 完了ページ のみに配信されるようご設定ください タグに設定した 広告主 ID や コンバージョンパラメータ に不要な文 字が混じっていませんか? 手順 3 で設定する 広告主 ID や コンバージョンパラメータ が誤っている場合 タグは配信されても ウェブアンテナ上では正しく計測がされません コピーするときにスペースや記号が混じってしまっていないかを確認してください 同じページに Yahoo! タグマネージャーと直接設置のタグが混ざっていま せんか? 同じページに Yahoo! タグマネージャーで配信されるウェブアンテナのタグと 直接設置したウェブアンテナのタグが混在する場合 環境によっては片方がうまく動作しなくなる場合があります 例えば 入口ページタグは Yahoo! タグマネージャーを使って一括配信しているが コンバージョンタグは直接設置している場合等が考えられます こういった場合は 該当ページへは全て直接設置するか Yahoo! タグマネージャー上で該当ページを 対象外 URL に追加して除外するなどして 同じページへのウェブアンテナタグ配信方法が混在しないようにしてください 7
コンバージョン属性の取得方法 Yahoo! タグマネージャーで コンバージョン時のユニークな ID 等をコンバージョン属性として取得する場合 以下のステップを踏んで タグマネージャーの機能でタグに値を埋め込む必要があります 1. ページ上に 取得したい値を準備しておく 2. Yahoo! タグマネージャーの機能を使い ページからその値を拾ってくる 3. 拾ってきた値を 設定済みタグの配信時にタグの中に埋め込む この機能は 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 を準備しています 既にページ上に値が存在する場合 この手順を省いても 複雑なデータバインディングエクスプレッションを用いれば取得することは可能ですが 詳しくわからない場合はこの方法を推奨します 手順 2: Yahoo! タグマネージャー上で データエレメント を追加する 次に Yahoo! タグマネージャーの管理画面を開き データ タブから データエレメントの追加 ボタンをクリックしてください 8
この データエレメント が タグの中に値を埋め込む仕組みで どんな名前の値を拾ってきて 埋め込む予定なのか を設定します データエレメント名 には分かりやすい識別子を データエレメントの説明 にはどんな値を取得するのかを記入し 続ける ボタンをクリックしてください 手順 3: データエレメントに データバインディングエクスプレッションを設定 する データエレメントを追加したら 具体的にどのページの どの値を どうやって拾ってくるのか を設定する必要があります これは データバインディングエクスプレッション と呼ばれており データエレメントとページの組み合わせに対して 値を取得するための JavaScript 表現を記述します 今回の例の手順 1 のように 単純に JavaScript 変数を設定した場合は その変数の名前を wa_order_id 等と入力するだけで取得できます 9
手順 1 で設定した JavaScript 変数名 どのページから値を拾ってくるかの組み合わせも設定 複数のコンバージョン属性を取得したい場合は 以上の手順 2~ 手順 3 をコンバージョン属性の数だけ繰り返してください 手順 4: タグにデータエレメントを埋め込む 最後に 設定済みのウェブアンテナコンバージョンタグを サービスタグ管理 タブから開き コンバージョン属性としてデータエレメントを埋め込みます 埋め込みには コンバージョン属性 欄を使用します 左側には ウェブアンテナの コンバージョン属性 設定画面に登録された 対応するコンバージョン属性の クエリ を 右側にはデータエレメントを入力します ただし データエレメントは 手順 2 で名づけた データエレメント名 を [[]] ( 二重四角かっこ ) で囲み "[[order_id]]" のような形で入力します ウェブアンテナ側で設定した 該当するコンバージョン属性の クエリ その属性として取得したい値の データエレメント名 を [[]] で囲んだもの 複数のコンバージョン属性を取得する場合はクリック 複数のコンバージョン属性を設定する場合は キーバリューペアの追加 リンクをクリックすると行を増やすことができます 全て入力が終わったら サービスタグを保存 ボタンをクリックすれば設定完了です あとは 実際にコンバージョン属性が取得できているか テストコンバージョンを実施して確認してください 10
スマートカスタムタグの使用方法 Yahoo! タグマネージャーでは ウェブアンテナの管理画面から取り出せない特殊タグを含む任意のタグを スマートカスタムタグ という形で設定することが可能です スマートカスタムタグを追加したい場合は サービスタグの選択画面を一番下までスクロールし 画面左下に書かれた スマートカスタムタグの追加 リンクをクリックしてください タグの設定画面が開くので サービスタグ情報 欄にタグを直接貼り付けて保存すれば設定が完了します ここにタグを直接貼り付け 注意点 スマートカスタムタグを使用する場合 ウェブアンテナのタグは 同じページ 11
に複数配信することができません 複数配信してしまうと タグが正常に動作しない場合があります 特に 一括で入れている 入口ページタグ と 個別のページに入れている コンバージョンタグ とが重複するケースが多いので 対象外 URL を活用するなどして 配信設定が重複しないようにお気を付けください 12
お問い合わせ先 Yahoo! タグマネージャーでウェブアンテナのタグを追加する方法等 ウェブアンテナにかかわる内容は弊社サポート窓口までお問い合わせください ウェブアンテナサポート窓口 営業時間 : 午前 10 時 ~ 午後 7 時 ( 土日 祝日 年末年始除く ) Tel: 03-5210-3894 Email: wa_support@bebit.com その他 タグをページへ配信する方法や イベントハンドラの設定など Yahoo! タグマネージャーに関する詳細な内容は ヤフー株式会社様にお問い合わせ頂くか ヤフー株式会社様ご提供のご利用ガイドをご参照ください ご利用ガイドダウンロード : http://tagmanager.yahoo.co.jp/download/ 13