ページ閲覧を計測する Yahoo! タグマネージャーには正式に連携したツールのカタログ掲載タグと任意のタグを設置可能なスマートカスタムタグの 2 種類がありますウェブアンテナは Yahoo! タグマネージャーと正式に連携しておりカタログ掲載タグをご利用いただけますのでここではカ

Size: px

Start display at page:

Download "ページ閲覧を計測する Yahoo! タグマネージャーには正式に連携したツールのカタログ掲載タグと任意のタグを設置可能なスマートカスタムタグの 2 種類がありますウェブアンテナは Yahoo! タグマネージャーと正式に連携しておりカタログ掲載タグをご利用いただけますのでここではカ"

ゆゆこかたいわ
5 years ago
Views:

1 Yahoo! タグマネージャーへのタグ設定方法タグマネージャーはサイトそのものに手を入れること無くどのページでどのような条件のもと何のタグを配信させるかを一元管理できる便利なツールです本マニュアルでは Yahoo! タグマネージャーを利用してウェブアンテナの計測タグを配信する方法をご説明します本マニュアルの内容は 2017 年 12 月時点のものです今後 Yahoo! タグマネージャーのインターフェースや仕様が変更され操作方法が変わる可能性もありますのでご了承くださいこのマニュアルの見方以下の順番で計測タグの設定手順をご説明します計測する内容に応じた項目を参照し設定を行ってくださいタグと配信条件を設定するまず基本の設定手順をページ閲覧を計測する ( p.2) にて説明しますこの項目ではページを表示したタイミングで計測タグが実行されるように設定を行いますリンククリックなどページ上で特定のイベントが発生したタイミングで計測を行いたい場合は上記とは異なる設定が必要ですイベントを計測する ( リンククリックの場合 ) ( p.7) を参照して計測タグを設定してくださいコンバージョン属性の設定を行う ( 必要な場合のみ ) コンバージョンタグでコンバージョン属性を取得する場合はコンバージョン属性を取得する ( p.12) を参照して属性値の埋め込みを行ってください属性を取得しない計測タグではこの設定は不要です動作確認する最後にタグが正しく配信されているか動作確認を行います思ったようにタグが動作しない場合はつまずきやすいポイント ( p.16) を参考に設定内容を再確認してください 2017 年 12 月 22 日更新版 1

2 ページ閲覧を計測する Yahoo! タグマネージャーには正式に連携したツールのカタログ掲載タグと任意のタグを設置可能なスマートカスタムタグの 2 種類がありますウェブアンテナは Yahoo! タグマネージャーと正式に連携しておりカタログ掲載タグをご利用いただけますのでここではカタログ掲載タグの設定方法をご案内しますスマートカスタムタグはタグが正しく動作しないケースがあり利用は推奨しません計測タグ本体の特殊な加工がどうしても必要な場合のみスマートカスタムタグの使用方法 (p.18) の設定方法注意点をご確認の上設定を行ってください手順 1: タグの追加からウェブアンテナのタグを検索するまず Yahoo! タグマネージャーにログインしサービスタグ管理タブからサービスタグを追加ボタンをクリックし新しいカタログ掲載タグの選択画面を開いてくださいカタログ掲載タグの一覧が表示されるのでここで検索欄にウェブアンテナとカタカナで入力するとウェブアンテナのタグを見つけることができます 2

3 手順 2: タグの種類を選択する次に必要なタグを 4 つの種類から選択する必要があります設定したいタグの目的に合わせて以下の表を参考に該当するタグの名前をクリックしてください入口ページタグウェブアンテナ入口ページタグをクリックダイレクト方式の広告や自然流入を計測するため広告のリンク先 LP や全ページに一括で設置するタグコンバージョンページタグ通常のコンバージョンを計測するためフォームの完了ページや確認ページなどに設置するタグウェブアンテナコンバージョンタグ ( 通常計測 ) をクリック onclick コンバージョンタグリンクやボタンのクリックをコンバージョンとして計測する場合に設置する特殊なタグウェブアンテナコンバージョンタグ ( オンクリック計測 ) をクリック設置には Yahoo! タグマネージャーの詳細な知識が必要ですイベントコンバージョンタグその他ページで発生した何らかのイベントをコンバージョンとして計測する場合に設置する特殊なタグウェブアンテナコンバージョンタグ ( その他イベント計測 ) をクリック設置には Yahoo! タグマネージャーの詳細な知識が必要です尚 onclick コンバージョンタグやイベントコンバージョンタグを設置する場合あるいはコンバージョン属性を取得する場合は Yahoo! タグマネージャーの設定方法について詳しい知識が必要となりますご不安な場合は該当のタグだけはページに直接設置することをご検討ください 3

4 手順 3: タグに必要な情報をウェブアンテナ管理画面からコピーする必要なタグの種類を選択するとタグに必要な ID やパラメータを設定する画面に移動しますこれらの値はウェブアンテナの設定画面から計測タグページを開き通常のタグの該当する箇所からコピーして設定してくださいウェブアンテナ計測タグページ Yahoo! タグマネージャー 1. タグの種類を選択 2. 通常のタグが表示される 3. 該当箇所から値をコピー入口ページタグの場合ウェブアンテナの管理画面で入口ページタグを選択し表示されたタグから下図のように広告主 ID をコピーして貼り付けてください  <script type="text/javascript" src=" <script type="text/javascript"> if ( typeof( webantenna ) == 'function' ) { _wa.account = 'WA0000-1'; webantenna(); } </script> <noscript> <img width="1" height="1" alt="" src=" amp;jse=0"> </noscript>  広告主 ID: WA で始まり -1 で終わる 8 文字 WA コピーした値の前後に不要な空白や記号が入り込まないよう気を付けてくださいサービス名には自由なタグの名前を設定できるのでウェブアンテナ入口ページタグ等の分かり易い名前を入力しタグを作成ボタンをクリックしてください 4

5 コンバージョンタグの場合 ( 通常オンクリックその他イベント ) ウェブアンテナの管理画面で該当するコンバージョンページタグを選択し表示されたタグから下図のように広告主 ID とコンバージョンパラメータをコピーして貼り付けてください尚完了ページ用確認ページ用等で複数のタグが表示された場合 Yahoo! タグマネージャー上のタグもそれぞれで複数設定する必要があります  <script type="text/javascript" src=" 広告主 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=" 1~20 文字の英数字アンダー amp;jse=0&cv=cv003"> スコアまたはハイフン </noscript>  WA register_comp コピーした値の前後に不要な空白や記号が入り込まないよう気を付けてくださいサービス名には自由なタグの名前を設定できるのでウェブアンテナ会員登録完了ページタグ等の分かり易い名前を入力しタグを作成ボタンをクリックしてくださいコンバージョン属性の取得についてコンバージョンタグでコンバージョン属性を取得したい場合ここでタグに取得したい属性を設定する必要がありますコンバージョン属性を取得する ( p.12) の手順に沿って設定を行ってくださいただし Yahoo! タグマネージャーでコンバージョン属性を取得するには複雑な設定が必要となるため Yahoo! タグマネージャーの機能を十分に把握されている場合のみご利用ください 5

6 手順 4: タグを配信する URL を設定するタグを配信する URL を設定し保存しますサービスタグ管理タブから先ほど登録したタグを選び新しいインプットを設定ボタンを押して設定してください URL に * ** などのワイルドカード記法や正規表現を使うことで柔軟な指定も可能です指定方法の詳細はヤフー株式会社にお問い合わせいただくかヤフー株式会社提供のご利用ガイドをご参照くださいご利用ガイドダウンロード : 手順 5: タグが正常に配信されるか確認する設定が完了したら以下のいずれかまたは全ての方法で正しくタグが配信されているかどうかをご確認くださいヤフー株式会社提供のツールタグインスペクターを使用し実際のページで必要なタグが配信されているかを確認する Yahoo! タグマネージャーのサービスタグ管理画面から設置したタグのタグ実行数が増えることを確認する 6

7 イベントを計測する ( リンククリックの場合 ) この項目では特定のリンクがクリックされたタイミングでコンバージョンを計測する場合の設定例を解説しますページ上での特定のイベント発生をきっかけに計測を行う場合イベントの内容に応じた Yahoo! タグマネージャーの設定が必要になりますリンククリック以外のイベントについてはヤフー株式会社にお問い合わせいただくかまたはヤフー株式会社提供のご利用ガイドをご参照くださいご利用ガイドダウンロード : イベント計測の際は Yahoo! タグマネージャーの設定方法について詳しい知識が必要です不慣れな場合には該当のタグだけはページに直接設置することをご検討ください注意点イベント発生時にページ遷移が発生する場合は別タブで開いてください計測したいイベントがページ遷移を伴う場合一部のブラウザではイベントの計測処理よりもページ遷移が優先されてしまい計測が行われません計測処理を確実に行うために遷移先のページは別タブで開くようにしてくださいページ遷移なし計測できるページ遷移あり遷移先のページは別タブで開く計測できるページ遷移あり遷移先のページは同じタブで開く計測できない例えば <a> タグのリンククリックを別タブで開くようにする場合該当する <a> タグに下記のように target= _blank 属性を追加します <a id="onclick_id" target="_blank" href=" リンク </a> ただし別タブで開くことでユーザがウェブサイトを利用する際の体験を損ねてしまう場合もあります別タブで開くことでユーザに悪影響を及ぼさないか事前に検討されることを推奨します 7

8 手順 1: 計測したいリンクに id/class を振る Yahoo! タグマネージャー上でイベント条件を設定するにはそのイベントに関わるページ内要素を Yahoo! タグマネージャーが識別できるようにする必要がありますリンクのクリックを計測する場合計測したいリンク部分の HTML 要素の中に id=" " または class=" " という記述を付け加えます ( の部分には識別用に任意の名前を指定してください ) 以下の例ではリンクに "onclick_id" という id を付与しています <p><a id="onclick_id" target="_blank" href=" リンク </a></p> 注意点イベント計測用の id/class 名は計測したい要素のみに付与してください手順 1 で指定した id または class の名前が目的外の要素に記述されているとその要素がクリックされたときにもタグが配信され計測数値が上振れしてしまいます特に既存の id または class 名を流用される場合はご注意ください 8

9 手順 2: 新しいイベントを作る次に計測するイベントの名前を登録しますウェブサイト画面の中にあるイベントタブから新しいページイベントを追加できますイベント名には分かりやすい識別子をイベントの説明にはどんなイベントを計測するのかを記入しページイベントを追加ボタンをクリックしてください任意の名前イベントの説明 9

10 手順 3: イベント条件を設定するページ閲覧を計測するの手順 1(p.2)~ 手順 4(p.6) に沿ってタグと対象サイトの設定をしますそれに加えて前の手順 (p.9) で作ったイベントを対象サイトの設定と紐付け対象サイト内でイベントを計測する条件を指定しておく必要がありますここでは特定のリンクをクリックしたときのみタグが配信されるという条件の設定例をご紹介しますページ詳細画面のバインディングタブの中にあるイベントバインディングタブから新しいページイベントを追加できますイベントは手順 2 で作ったものを選びトリガーは一覧の中から click を選択しますバインディング方法については? マークをクリックしてヘルプを確認しいずれかを選択してくださいエレメントセレクターには手順 1 で設定した id または class の名前を記入しますこのとき id であれば頭に # を class であれば頭に. をつけて記入してください手順 2 で設定したイベント名手順 1 で設定した id または class 名 10

11 手順 4: タグ実行条件を設定する最後に先ほど作ったイベントをタグ自体の実行条件に結びつける設定が必要ですこれを忘れるとリンクがあるページにアクセスしただけでコンバージョンが上がってしまいますのでご注意くださいサービスタグ管理画面から設定中のタグを選択しタグ実行条件タブを選択してください画面下部にあるイベントに対する条件の追加を押しプルダウンの中から手順 2 3 で作ったイベントを選択します下図のようにイベント名がプルダウンの上に表示されたら設定完了です手順 2 3 で設定したイベント名全て入力が終わったら設定を保存します指定したイベントが発生するタイミングで実際にタグが動作するか計測タグの設置と動作確認方法マニュアルを参照し確認してください 11

12 コンバージョン属性を取得する Yahoo! タグマネージャーでコンバージョン属性を取得する場合タグマネージャの機能でタグに値を埋め込む必要がありますこの機能は Yahoo! タグマネージャーではデータエレメントと呼ばれています以下に簡単な手順をご説明しますのでテスト環境などで十分にお試しの上ご活用ください尚各機能や操作の詳細についてはヤフー株式会社にお問い合わせいただくかヤフー株式会社提供のご利用ガイドをご参照くださいご利用ガイドダウンロード : 手順 1: ページ上に埋め込みたい値を JavaScript 変数で準備しておくまずコンバージョン属性の埋め込みを行うページの HTML ソース上に埋め込みたい値を準備しておきますここでは一番簡単な方法としてそれぞれの値を JavaScript 変数として準備する方法をご説明します HTML 内の Yahoo! タグマネージャーのユニバーサルタグよりも上部の位置に以下のように記述を行ってください : <script type="text/javascript"> window.wa_order_id = 'order_0123'; window.wa_total_amount = '29800'; </script> : :  : この例では "wa_order_id" という名前で注文番号 order_0123 を "wa_total_amount" という名前で合計金額を準備しています order_ といった値は HTML の出力時にサーバ側のプログラムで埋め込むかページ表示時にブラウザ側のプログラムで値を格納する方法を用いて動的にセットしてください既にページ上に値が存在する場合この手順を省いても複雑なデータバインディングエクスプレッションを用いれば取得することは可能ですが詳しくわからない場合はこの方法を推奨します 12

13 手順 2: Yahoo! タグマネージャー上でデータエレメントを追加する次に Yahoo! タグマネージャーの管理画面を開きデータディクショナリータブからデータエレメントを追加ボタンをクリックしてくださいこのデータエレメントがタグの中に値を埋め込む仕組みでどんな名前の値を拾ってきて埋め込む予定なのかを設定しますデータエレメント名には任意の名前をデータエレメントの説明にはどんな値を取得するのかを記入し保存ボタンをクリックしてください 13

14 手順 3: タグにデータエレメントを埋め込む設定するウェブアンテナコンバージョンタグの中にコンバージョン属性としてデータエレメントを埋め込みます埋め込みにはコンバージョン属性欄を使用します左側にはウェブアンテナのコンバージョン属性設定画面に登録された対応するコンバージョン属性のクエリを右側にはデータエレメントを入力しますデータエレメントは手順 2 で名づけたデータエレメント名を [[]] ( 二重四角かっこ ) で囲み "[[order_id]]" のような形で入力してください ( データエレメント欄の右側にある矢印ボタンを押し登録したデータエレメントを選択するという方法でも入力できます ) ウェブアンテナ側で設定した該当するコンバージョン属性のクエリ手順 2 で設定したデータエレメント名複数のコンバージョン属性を取得する場合はクリック複数のコンバージョン属性を設定する場合はキーバリューペアの追加リンクをクリックすると行を増やすことができます 14

15 手順 4: データエレメントとデータバインディングエクスプレッションをタグに紐付ける最後に通常のタグの設定と同様に対象 URL を設定しますただしその際に先ほど設定したデータエレメントと具体的にどのページのどの値をどうやって拾ってくるのかを表すデータバインディングエクスプレッションを設定する必要がありますウェブサイトタブから設定した URL 条件を選びバインディングタブの中にあるデータバインディングタブからデータバインディングを追加ボタンを押しますデータエレメントでは手順 2 で作成したものを選択しますデータバインディングエクスプレッションにはデータエレメントとページの組み合わせに対して値を取得するための JavaScript 表現を記述します今回の例の手順 1 のように単純に JavaScript 変数を設定した場合はその変数の名前を wa_order_id 等と入力するだけで取得できます手順 2 で設定したデータエレメント名手順 1 で設定した JavaScript 変数名複数のコンバージョン属性を取得したい場合は以上の手順 2~ 手順 4 をサービス ID またはコンバージョン属性の数だけ繰り返してください全て入力が終わったら保存して設定完了です実際にコンバージョン属性が取得できているか計測タグの設置と動作確認マニュアルを参照し確認してください 15

16 つまずきやすいポイントタグを設定してもうまく動作しない場合以下のような点をご確認ください配信先ページにユニバーサルタグは埋まっていますか? Yahoo! タグマネージャー上で配信設定を行っても配信先のページ自体に Yahoo! タグマネージャーのユニバーサルタグが設置されていない限りタグは配信されません例えば PC サイトではユニバーサルタグを設置していてもスマートフォンサイトには設置していないといった場合もございますのでお気を付けくださいページ設定の URL は間違っていませんか? 配信先ページの URL パターンは 1 文字でも一致しなければタグは配信されません例えば次のような場合に想定通りタグが配信されないことがあります * や ** といったワイルドカード記法をうまく使い正しく URL パターンを設定してください https のページに http の URL パターンを設定してしまった URL の最後にスラッシュがあるのに無い URL パターンを設定してしまった ( もしくはその逆 ) ウェブアンテナや Google Analytics などの計測パラメータが付いた結果設定した URL とは異なる URL でアクセスされていたタグは有効になっていますか? Yahoo! タグマネージャー上ではタグを追加した直後は無効に設定されておりこれを有効にしなければ配信されません尚プレビューになっている場合は Yahoo! タグマネージャーを管理している自分だけには配信されるのに一般ユーザがアクセスしたときは配信されないといった状況も起こりますのでお気を付けください 16

17 同じ URL でも内容が違うページはありませんか? 例えば申込フォームの確認ページと完了ページ等 URL は同じでも内容が異なり配信したいタグも異なる場合がありますこういった場合は単純に URL で配信先を設定することができないため該当ページには直接設置するかタグ実行条件等を活用して完了ページ用タグは完了ページのみに配信されるようご設定くださいタグに設定した広告主 ID やコンバージョンパラメータに不要な文字が混じっていませんか? 広告主 ID やコンバージョンパラメータが誤っている場合タグは配信されてもウェブアンテナ上では正しく計測がされませんコピーするときにスペースや記号が混じってしまっていないかを確認してください同じページに Yahoo! タグマネージャーと直接設置のタグが混ざっていませんか? 同じページに Yahoo! タグマネージャーで配信されるウェブアンテナのタグと直接設置したウェブアンテナのタグが混在する場合環境によっては片方がうまく動作しなくなる場合があります例えば入口ページタグは Yahoo! タグマネージャーを使って一括配信しているがコンバージョンタグは直接設置している場合等が考えられますこういった場合は該当ページへは全て直接設置するか Yahoo! タグマネージャー上で該当ページを対象外 URL に追加して除外するなどして同じページへのウェブアンテナタグ配信方法が混在しないようにしてください 17

18 スマートカスタムタグの使用方法 Yahoo! タグマネージャーでは任意のタグをスマートカスタムタグへ設定することが可能ですがウェブアンテナの計測タグの場合はタグが正しく動作しないケースがあり利用は推奨しません計測タグ本体の特殊な加工がどうしても必要な場合のみ次ページの注意点をよく読んだ上で以下の設定を行ってくださいスマートカスタムタグを追加したい場合はサービスタグ選択画面の左下か右上に書かれたスマートカスタムタグを追加リンクをクリックしてくださいタグの設定画面が開くのでサービスタグ情報欄にタグを直接貼り付けて保存すれば設定が完了しますここにタグを直接貼り付け 18

19 注意点スマートカスタムタグを使用する場合ウェブアンテナのタグは同じページに複数配信することができません複数配信してしまうとタグが正常に動作しない場合があります特に一括で入れている入口ページタグと個別のページに入れているコンバージョンタグとが重複するケースが多いので対象外 URL を活用するなどして配信設定が重複しないようにお気を付けください 19

20 お問い合わせ先本マニュアルに関してご不明な点がありましたら以下のウェブアンテナサポート窓口までお問い合わせくださいウェブアンテナサポート窓口営業時間 : 午前 10 時 ~ 午後 7 時 ( 土日祝日年末年始除く ) Tel: wa_support@bebit.com Yahoo! タグマネージャーに関する仕様や設定方法に関してはヤフー株式会社にお問い合わせいただくかヤフー株式会社提供のご利用ガイドをご参照いただけますようお願いいたしますご利用ガイドダウンロード : 20

カタログ掲載タグの設定方法 Yahoo! タグマネージャーでは正式に連携したツールのカタログ掲載タグと任意のタグを設置可能なスマートカスタムタグの 2 種類がありますウェブアンテナは Yahoo! タグマネージャーと正式に連携しておりカタログ掲載タグをご利用頂けますのでここでは

カタログ掲載タグの設定方法 Yahoo! タグマネージャーでは正式に連携したツールのカタログ掲載タグと任意のタグを設置可能なスマートカスタムタグの 2 種類がありますウェブアンテナは Yahoo! タグマネージャーと正式に連携しておりカタログ掲載タグをご利用頂けますのでここでは Yahoo! タグマネージャーのご利用についてタグマネージャーはサイトそのものに手を入れること無くどのページでどのような条件のもと何のタグを配信させるかを一元管理できる便利なツールです中でも Yahoo! タグマネージャーはウェブアンテナと正式に連携しておりますので安心してご利用いただけますただしご設定方法が通常のタグの取り出し方とは異なりますので本資料をご参照の上でタグを設定してください