ページ閲覧を計測する手順 1: カスタム HTML タグからタグを設定するまずタグタイプを選択の画面でカスタム HTML を選択しますタグの設定画面が開くのでユーザグラムで発行されたタグを HTML 欄に直接貼り付けてください document.write をサポートするはオフのま

Size: px

Start display at page:

Download "ページ閲覧を計測する手順 1: カスタム HTML タグからタグを設定するまずタグタイプを選択の画面でカスタム HTML を選択しますタグの設定画面が開くのでユーザグラムで発行されたタグを HTML 欄に直接貼り付けてください document.write をサポートするはオフのま"

みいかよせ
5 years ago
Views:

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

2 ページ閲覧を計測する手順 1: カスタム HTML タグからタグを設定するまずタグタイプを選択の画面でカスタム HTML を選択しますタグの設定画面が開くのでユーザグラムで発行されたタグを HTML 欄に直接貼り付けてください document.write をサポートするはオフのままで構いませんユーザグラムの計測タグを貼り付けここにタグを直接貼り付け document.write をサポートするはオフのままで良い 2

3 Google タグマネージャで大量のトラッキングタグの配信を行っている場合ウェブアンテナ計測タグの配信タイミングが遅くなりページ表示中にユーザグラムの計測タグが動作しない可能性がありますその場合は詳細設定のタグ配信の優先度欄に他のトラッキングタグよりも大きな値を設定しタグの配信順位を上げてください重要なトラッキングタグの計測を同時に行っている場合は重要度の高い順に数値の調整を行ってください他のタグよりも大きな値を設定 3

を選んだ場合 URL の指定が必要です一番左のプルダウンでは Page URL を選び中央のプルダウンと一番右のテキストボックスで対象となる URL を指定します条件を変えることで柔軟な指定も可能です

4 手順 2: トリガーでタグを配信する URL を設定する次にトリガーを設定しますトリガーの種類をページビュー DOM Ready ウィンドウの読み込みのいずれかから選択しトリガーの発生場所を一部のページビューとします (Google タグマネージャで管理しているページの範囲とユーザグラムで計測するページの範囲が一致している場合はすべてのページビューを選んでも構いません ) 一部のページビューを選んだ場合 URL の指定が必要です一番左のプルダウンでは Page URL を選び中央のプルダウンと一番右のテキストボックスで対象となる URL を指定します条件を変えることで柔軟な指定も可能です Page URL がプルダウンの中にない場合は変数の画面に移動し組み込み変数欄にある設定ボタンを押して Page URL のチェックをオンにしてください 2 設定ボタン 3 Page URL をオン 1 変数画面へ移動 4

5 手順 3: タグが正常に配信されるか確認する設定が完了したらプレビューモードをオンにし実際のページで必要なタグが配信されているかを確認するなど正しくタグが配信されているかどうかをご確認ください 5

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

7 手順 1: 計測したいリンクに id/class を振る Google タグマネージャ上でイベント条件を設定するにはそのイベントに関わるページ内要素を Google タグマネージャが識別できるようにする必要がありますリンクのクリックを計測する場合計測したいリンク部分の HTML 要素の中に id=" " または class=" " という記述を付け加えます ( の部分には識別用に任意の名前を指定してください ) 以下の例ではリンクに "onclick_id" という id を付与しています <a id="onclick_id" target="_blank" href=" リンク </a> 注意点イベント計測用の id/class 名は計測したい要素のみに付与してください手順 1 で指定した id または class の名前が目的外の要素に記述されているとその要素がクリックされたときにもタグが配信され計測数値が上振れしてしまいます特に既存の id または class 名を流用される場合はご注意ください手順 2: カスタム HTML タグからタグを設定する p.2 に挙げた手順 1: カスタム HTML タグからタグを設定すると同様にユーザグラムから計測タグを取り出しカスタム HTML の HTML 欄に直接貼り付けてくださいイベントを計測する場合大量のトラッキングタグの同時配信は通常行われないためタグ配信の優先度を設定する必要はありません 7

8 手順 3: トリガーでイベント計測の条件を設定する次にイベントを計測するためのトリガーを作りますリンククリックの場合手順 1 で指定された id または class を持つリンクがクリックされた場合という条件を指定する必要がありますトリガーの種類をクリック - リンクのみ発生場所を一部のリンククリックとしますタグの配信を待つ検証をチェックは? マークを押して表示されるヘルプを参照し必要に応じてチェックを入れてくださいチェックを入れた場合その下の入力欄にタグを配信する URL を入力してください次に最下部の入力欄にイベントの条件を入力します一番左のプルダウンでは手順 1 で id を指定した場合は Click ID class を指定した場合は Click Classes を選択します中央のプルダウンは等しいとし一番右のテキストボックスに手順 1 で指定した id または class を入力してください Click ID または Click Classes がプルダウンの中にない場合は変数画面に移動し組み込み変数欄にある設定ボタンを押して Click ID または Click Classes のチェックをオンにしてください ( 本マニュアル内ページ閲覧を計測するの手順 2(p.4) もご参照ください ) 必要に応じてチェック ( 推奨 ) 配信するページ URL を記載 ( 上にチェックを入れたときのみ表示される ) Click ID または Click Classes 手順 1 で指定した id または class 全て入力が終わったら保存して設定完了です指定したイベントが発生するタイミングで実際にタグが動作するか計測タグの設置と動作確認方法マニュアルを参照し確認してください 8

9 サービス ID コンバージョン属性を取得する Google タグマネージャでサービス ID やコンバージョン属性を取得する場合タグマネージャの機能でタグに値を埋め込む必要がありますこの機能は Google タグマネージャでは変数と呼ばれています以下に簡単な手順をご説明しますのでテスト環境などで十分にお試しの上ご活用ください尚各機能や操作の詳細については Google タグマネージャのヘルプをご参照くださいタグマネージャヘルプ : 手順 1: ページ上に埋め込みたい値を JavaScript 変数で準備しておくまずサービス ID コンバージョン属性の埋め込みを行うページの HTML ソース上に埋め込みたい値を準備しておきますここでは一番簡単な方法としてそれぞれの値を JavaScript 変数として準備する方法をご説明します HTML 内の Google タグマネージャのスニペットタグよりも上部の位置に以下のように記述を行ってください : <script type="text/javascript"> window.ug_serviceid = 'AB123'; window.ug_price = '1800' </script> : :  : この例では "ug_serviceid" という名前で会員 ID AB123 を "ug_price" という名前で売上 1800 を準備しています AB といった値は HTML の出力時にサーバ側のプログラムで埋め込むかページ表示時にブラウザのプログラムで値を格納する方法を用いて動的にセットしてください既にページ上に値が存在する場合この手順を省いても CSS セレクタ等の表記方法を用いれば取得可能ですが詳しくわからない場合はこの方法を推奨します 9

注意点 ( サービス ID を取得する場合 ) サービス ID はユーザごとに異なるものにしてくださいサービス ID はユーザ一人一人の行動を区別するためのものです会員番号などユーザごとに固有の番号が付与されるものを利用してくださいサービス ID が取得できない場合は空文字列をセットしてくださいユーザグラムではサービス ID

10 注意点 ( サービス ID を取得する場合 ) サービス ID はユーザごとに異なるものにしてくださいサービス ID はユーザ一人一人の行動を区別するためのものです会員番号などユーザごとに固有の番号が付与されるものを利用してくださいサービス ID が取得できない場合は空文字列をセットしてくださいユーザグラムではサービス ID を取得できないときにエラー文字列やテンプレート文字列を渡してしまうと該当のアクセスすべてが同じ一人のユーザのものとして扱われてしまいます例えば error という文字列が渡された場合サービス ID を取得できなかったアクセスすべてが error という ID を持った特定のユーザのものとみなされ同じユーザのアクセスとしてまとめて集計されてしまいますサービス ID を取得できない場合は必ず空文字列を渡すよう設定してください手順 2: Google タグマネージャ上で変数を追加する次に Google タグマネージャの管理画面を開き変数ページのユーザー定義変数欄にある新規ボタンをクリックしてください左上の部分には任意の登録名をグローバル変数名には手順 1 で設定した変数を入力してください変数の種類は JavaScript 変数を選択してください変数の登録名 ( 任意の名前 ) Javascript 変数を選択手順 1 で設定した変数 10

11 手順 3: タグに変数を埋め込む設定するユーザグラムコンバージョンタグの中にサービス ID またはコンバージョン属性として変数を埋め込みます手順 2 で画面左上に入力した変数の登録名を {{}} ( 二重波かっこ ) で囲み '{{serviceid}}' のような形で入力します手順 2 で設定した登録名複数のコンバージョン属性を取得したい場合は以上の手順 2~ 手順 3 をサービス ID またはコンバージョン属性の数だけ繰り返してください全て入力が終わったら保存して設定完了です実際にコンバージョン属性が取得できているか計測タグの設置と動作確認マニュアルを参照し確認してくださいサービス ID コンバージョン属性の値に undefined が入ってしまう場合手順 1 で準備した値をタグマネージャが正しく参照できていない状態です手順 2 で設定したグローバル変数名が間違っていないか再度ご確認くださいそれでも解決しない場合 HTML ソースが完全に読み込まれていない時点でタグが配信されている可能性がありますトリガーの発火タイミングを DOM Ready またはウィンドウの読み込みへ変更し再度動作確認を行ってください 11

12 つまずきやすいポイントタグを設定してもうまく動作しない場合以下のような点をご確認ください配信先ページにスニペットタグは埋まっていますか? Google タグマネージャ上で配信設定を行っても配信先のページ自体に Google タグマネージャのスニペットタグが設置されていない限りタグは配信されません例えば PC サイトではスニペットタグを設置していてもスマートフォンサイトには設置していないといった場合もございますのでお気を付けくださいトリガーの配信条件設定は間違っていませんか? トリガーの配信条件設定が間違っている場合タグは配信されません例えば次のような場合に想定通りタグが配信されないことがあります条件指定で等しい含む先頭が一致などを使い分けるあるいは正規表現を使って指定するなどの方法で正しく URL パターンを設定してください https のページに http の URL パターンを設定してしまったユーザグラムや Google Analytics などの計測パラメータが付いた結果等しいで設定した URL とは異なる URL でアクセスされていたタグは有効になっていますか? Google タグマネージャ上ではタグを追加した直後は編集中の状態になりこれを公開しなければ配信されません尚プレビューモードになっている場合は Google タグマネージャを管理している自分だけには配信されるのに一般ユーザがアクセスしたときは配信されないといった状況も起こりますのでお気を付けください同じ URL でも内容が違うページはありませんか? 例えば申込フォームの確認ページと完了ページ等 URL は同じでも内容が異なり配信したいタグも異なる場合がありますこういった場合は単純に URL のみでは条件を設定できないため別途設定が必要です詳しくは Google タグマネージャのヘルプをご参照ください 12 タグマネージャヘルプ :

13 お問い合わせ先本マニュアルに関してご不明な点がありましたら以下のユーザグラムサポート窓口までお問い合わせくださいユーザグラムサポート窓口営業時間 : 午前 10 時 ~ 午後 6 時 ( 土日祝日年末年始除く ) Tel: ug_support@bebit.com Google タグマネージャに関する仕様や設定方法に関しては Google 社にお問い合わせいただくか Google 社の公式ヘルプサイトをご参照いただけますようお願いいたしますタグマネージャヘルプ : 13

タグの設定方法手順 1: カスタム HTML タグからタグを設定するまずタグタイプを選択する際にカスタム HTML を選びますタグの設定画面が開くので HTML 欄にウェブアンテナで発行されたタグを直接貼り付けて保存すれば設定が完了しますこのとき document.write をサポー

タグの設定方法手順 1: カスタム HTML タグからタグを設定するまずタグタイプを選択する際にカスタム HTML を選びますタグの設定画面が開くので HTML 欄にウェブアンテナで発行されたタグを直接貼り付けて保存すれば設定が完了しますこのとき document.write をサポー Google タグマネージャのご利用についてタグマネージャはサイトそのものに手を入れること無くどのページでどのような条件のもと何のタグを配信させるかを一元管理できる便利なツールですただしご設定方法が通常のタグの取り出し方とは異なりますので本資料をご参照の上でタグを設定してください本マニュアルはウェブアンテナのタグ設置用ですユーザグラムのタグ設置については当該マニュアルをご参照ください