Google タグマネージャー(GTM)を利用して Sprocket タグを設置する時の手順を解説します。
ここでは、SPA(シングルページアプリケーション)のケースをご説明します。通常ページの場合は、以下の記事をご参照ください。
GTMを利用したSprocketタグ設置方法(通常サイトの場合)
注意事項
- すでに GTM が導入されている前提の手順説明となります。
- GTM のご利用方法については、Google のヘルプサイトをご覧ください。
- カート ASP を併用している場合、ご利用のサービスによっては設定方法が異なる場合があります(例:基本的には GTM でタグを管理しているが、カート ASP 内だけは ASP の管理画面またはテンプレートを経由して直接タグを埋め込む必要がある、など)。
- Sprocket タグを導入するにあたり、GTMを利用してタグを管理するか、サイトのHTMLへ直接記述するかについては、どちらか一方に寄せてください。管理方法が混在すると、タグの発火順序が一定にならない場合があるため、推奨いたしません(例外として、カート ASP をご利用の場合は複数の管理方法を併用せざるを得ない場合があります)。
- 本記事の手順は「履歴の変更」というイベントに基づくトリガーを用いてトラッキングさせる手法です。SPAサイトの仮想ページ遷移で、このイベントトリガーが発動しない構造の場合は、この手法では対応できないため、ご注意ください。
GTMへのSprocketタグの設定
1.SprocketのSDKを読み込むタグ
GTMの左メニューから「タグ」を選択し、「新規」をクリック。
タグタイプから「カスタムHTML」を選択。
「HTML」入力欄に以下のコードを記述。
「Sprocket タグ」は Sprocket 担当コンサルタントから発行されたものをコピーして貼り付けてください。
Googleタグマネージャーで大量のトラッキングタグを管理している場合、Sprocket タグの発火タイミングが遅くなり、ページ表示中に Sprocket の計測が動作しない可能性があります。
その場合は「詳細設定」の「タグ配信の優先度」欄に他のトラッキングタグよりも大きな値を設定し、タグの優先順位を上げてください(下図参照)。
※非同期でコンテンツの書き換えを行っているタグがある場合は、そのタグより優先度を下げていただくことを推奨します。
※優先度の数値は、サイトに合わせて適宜設定してください。
「トリガー」は「All Pages(ページビュー)」を選択のうえ保存。
2.SPA用のタグ
GTMの左メニューから「タグ」を選択し、「新規」をクリック。
タグタイプから「カスタムHTML」を選択。
「HTML」入力欄に以下のコードを記述。
<script>
if (typeof SPSDK != 'undefined') {
SPSDK.ready(function() {
SPSDK.ack('pageload');
});
}
</script>
※記述した画面例
「トリガー」は「履歴の変更」を選択のうえ保存。
「詳細設定」の「タグ配信の優先度」欄にはこのご利用ガイドの「1.SprocketのSDKを読み込むタグ」で作成したSprocketタグよりも小さな値を設定し、タグの優先順位がSprocketタグよりも低くなるようにしてください。
ここまでの作業が完了したらプレビューを行い、動作確認で問題がなければ、タグの「公開」処理を実施してください。その後、弊社でも動作を確認いたしますので、担当者にお知らせください。
設定作業は以上となります。