SPAサイトにタグを設置したい(GTMを利用)
回答
本記事では、SPAサイトにb→dashが提供するワンタグや個別発火タグを設置する方法について紹介しています。
SPAサイトへのタグ設置はGTMを使用することを推奨しています。
設置手順は、大きく下記の6つです。
1. SPAサイトの概要
2. アクセスログタグの設定を行う
3. ワンタグを設置する(GTM)
4. 個別発火タグを設置する(GTM)
5. 発火の優先度を設定する
6. タグの発火確認とwebアクセスログデータの更新頻度設定
各手順の詳細は、以下をご参照ください。
※ 貴社サイトのソースコードを直接編集して直貼りでタグを設置したい場合は、貴社カスタマーサポート担当にお問い合わせください
1. SPAサイトの概要
SPA(Single Page Application)サイトとは、1つのページ内においてユーザーの操作に応じて必要な部分のみの読み込みを行うことで、ブラウザのページ読み込みを行わないページ遷移を実現したサイトを指します。通常サイトと異なるページ遷移を行うため、通常サイトと違うタグの設置が必要です。
● 通常サイトの場合: ページ遷移の度にブラウザの読み込みを行うためタグが発火します
● SPAサイトに通常サイトと同一のタグの設置を行った場合: ページ遷移時にブラウザの読み込みを行わないため、タグが発火しません
● SPAサイトにSPA対応のタグの設置を行った場合: SPA対応のタグの設置を行うことで、タグを発火させることが可能です
2. アクセスログタグの設定を行う
webサイトのデータを取得するために必要な「アクセスログタグ」の設定を行います。
※ web接客タグについては「web接客タグを動作させたい」、レコメンドタグについては「レコメンドタグを動作させたい」をご参照ください
ドメインを設定する
1.「共通設定」>「タグ管理」>「アクセスログタグ」をクリックします
2.「＋」をクリックします
3.「ドメイン」を入力し、「適用」をクリックします
4. 対象ドメイン一覧に表示されます
※ ドメインはサイトURL「https://○○○○/」の「https://」と末尾の「/」を取り除いた「○○○○」部分です。対象ドメインに登録すると、ドメイン配下のページ(「○○○○/service/」「○○○○/news/」など)も全てタグの適用対象になります
※ ドメインが複数存在する場合は、すべてのドメインを登録してください
※ 対象ドメインに設定したドメインは削除可能です。ドメインを削除した後は、必ずアクセスログを一度「OFF」にして、再度「ON」にするようお願いします
貴社がドメイン/サブドメインが異なるwebサイトを複数運用しており、webサイトを閲覧するユーザーに対してサイト共通のビジターIDを保有したい場合は「クロスドメイン設定」を行ってください。クロスドメイン設定で共通のビジターIDを保有することで、ドメインが異なるサイト間の流入計測を正確に行うことができます。
1.「新規作成」をクリックします
2.「サイト名」「ステータス」「ドメイン」「クエリシンボル」を追加し、「適用」をクリックします
3. サイトのドメインが登録されます(クロスドメイン設定の対象としたい全てのサイトを登録)
※ ステータス: クロスドメイン設定の「有効/無効」を選択(一時的に無効にする場合などに利用)
※ ドメイン: 計測対象となるドメイン/サブドメインを登録。登録範囲によって適用範囲が異なります(例: 「shop.co.jp」を登録すると配下のサブドメイン全てに適用、「travels.shop.co.jp」のように深く登録すると配下のみに適用)
※ クエリシンボル: サイトURLを「遷移先URL部分」と「パラメータ部分」に分割するための記号。通常は「?」、「#」を利用している場合は「#」を指定
※ クロスドメインで設定したドメイン間で遷移すると、3つのパラメータが付与されます
・セッションID: _bdsid
・前ページURL: _bd_prev_page
・リピーターフラグ: _bdrpf
[任意]除外IPアドレスを設定する
アクセスログを取得したくない場合は、「除外IPアドレス」を登録します。貴社の社員や業務委託している代理店等のパートナー企業など、サイトのユーザーではない方のアクセスについて取得しない場合に利用します。
1.「除外IPアドレス設定」>「新規作成」をクリックします
2.「名称」「IPアドレス」を入力し、「適用」をクリックします
※ 除外IPアドレスの設定が反映されるタイミングは、毎時「00分」と「30分」です(例: 12時15分に設定した場合は12時30分以降のアクセスログに適用)
アクセスログタグを動作させる
「OFF」をクリックし、「ON」にします。
3. ワンタグを設置する(GTM)
ワンタグを登録する
1.「Googleタグマネージャー」を開き、タグを埋めたい「コンテナ」をクリックします
2.「タグ」>「新規」をクリックします
3.「タグの設定」のパネル> 下にスクロールして「カスタムHTML」をクリックします
4. コピーした「ワンタグのソースコード」を貼り付け、「document.writeをサポートする」にチェックします
※ document.writeとは、指定した文字列などの情報をウェブブラウザ上に表示させるためのJavascriptの言語です。カスタムHTMLの場合、タグを正常に動かすためにチェックを付けてください
※ ワンタグはb→dash管理画面の「タグ管理」から、アイコンをクリックすることでコピーできます
トリガーを設定する
1.「トリガー」のパネルをクリックします
2.「+」>「トリガーの設定」>「ページビュー」をクリックします
3. このトリガーの発生場所は「すべてのページビュー」を設定します
4.「トリガー名」を設定し、「保存」をクリックします
5.「タグ名」を設定し、「保存」をクリックします
※ トリガーの発生場所は「すべてのページビュー」を設定してください。対象ページを限定したい場合は、b→dash上の「共通設定」>「タグ管理」>「アクセスログタグ」の対象ドメインで設定します
4. 個別発火タグを設置する(GTM)
b→dashでは、SPA対応のタグとして個別発火タグを設置します。個別発火タグはワンタグと併せてGTMに登録する必要があります。
個別発火タグを登録する
1.「新規」>「タグの設定」のパネル>「カスタムHTML」をクリックします
2.「個別発火タグのソースコード」を貼り付け、「document.writeをサポートする」にチェックします
※「個別発火タグ」のサンプルコードは『タグ管理画面』の『個別発火タグの確認アイコン』からコピーできます(2025年12月のリリースで追加)
トリガーを設定する
1.「トリガー」のパネル>「+」>「トリガーの設定」>「履歴の変更」をクリックします
2. このトリガーの発生場所は『すべての履歴の変更』を選択します
3.「トリガー名」を設定し、「保存」をクリックします
4.「タグ名」を設定し、「保存」をクリックします
5. 発火の優先度を設定する
GTMに登録したワンタグと個別発火タグの、発火の優先度を設定します。個別発火タグは、ワンタグよりも先に発火するように設定してください。
1.「ワンタグ」を選択し、「タグの設定」のパネルをクリックします
2.「詳細設定」>「タグの順序付け」をクリックします
3.「発効する前にタグを配信」を選択します
4.「タグを選択」をクリックし、「個別発火タグ」を選択します
5.「公開」をクリックし、任意の「バージョン名」を入力して「公開」をクリックします
6. タグの発火確認とwebアクセスログデータの更新頻度設定
タグの発火確認を行う
「Google Chrome」をブラウザとして使用する例で説明します。
1. タグが発火していることを確認したいページを開きます
2. 画面上を右クリックし、メニューから「検証」を選択します
3. デベロッパーツール内の「Network」にて「bdash」を検索し、「control+R(ページ再読み込み)」をクリックします
4.「btm.js」と「tracking」ログの「Status」項目が「200」と表示されていることを確認します
※ ワンタグを外してもtrackingの値はキャッシュなどの関係ですぐに「0」にならず、緩やかに「0」になる場合があります
「アクセスログ」が発火しない場合は、何らかの設定が誤っていると考えられます。下記のよくある設定誤りに該当しないかご確認ください。
考えられる原因 |
改善策 |
| リレーション設定の値が間違っている | 「顧客ID」や「受注ID」といったキー項目のリレーション設定が正確か確認 |
| アクセスログタグをONにしていない | 「共通設定」>「タグ管理」>「アクセスログタグ」から「ON」状態を確認 |
| 対象ドメイン設定の誤り | 「https://」や末尾の「/」などプロトコル部分が含まれていないか確認 |
| 更新頻度設定が未設定 | 「データパレット」>「データを確認する」>「b→dashデータ」タブから更新頻度を設定 |
| タグ設置箇所の誤り | 「</head>」直前または「<body>」直後への設置を確認 |
「アクセスログ」が重複して発火する場合は、何らかの設定が誤っていると考えられます。下記をご確認ください。
考えられる原因 |
改善策 |
| 設置箇所の重複 | タグマネージャーとHTML直貼りの重複がないか確認 |
| ユーザーの重複実行 | 「ページ再読み込み」や「ブラウザバック」による重複計測の可能性があります |
webアクセスログデータの更新頻度設定
1.「データパレット」>「データを確認する」>「b→dashデータ」をクリックします
2.「webアクセスログデータ」を1回クリックします
3.「更新設定」をクリックし、連携頻度と時間を設定して「追加」>「適用」をクリックします
4.「webアクセスログデータ」を2回クリックすると、データを確認できます
※ 更新頻度に設定した時間のタイミングでwebアクセスログデータの内容が更新されます
SPAサイトのタグ設置における重要な注意事項
通常サイトはページ遷移のたびにページの読み込みが発生するため、ページ遷移回数だけ「pageview」が取得されます。一方SPAサイトでは、一度流入するとサイトを離脱しない限りページの読み込みは発生しないため、ページ遷移した回数分の「pageview」の値は取得されません。
ただし、「click」の値はページ読み込みの有無に関係なく取得されます。その結果、「pageview」の数よりも「click」の数が多くなる事象が発生する可能性があります。