SPAサイトにタグを設置したい(GTMを利用)

本記事について

本記事では、SPAサイトにb→dashが提供するワンタグや個別発火タグを、設置する手順について説明します。また、SPAサイトにb→dashが提供するワンタグや個別発火タグを設置する場合は、GTMを使用してタグを設置することを推奨しています

貴社サイトのソースコードを直接編集して直貼りでタグを設置したい場合は、貴社カスタマーサポート担当にお問い合わせください。

SPAサイトとは

SPA(Single Page Application)サイトとは、1つのページ内においてユーザーの操作に応じて必要な部分のみの読み込みを行うことで、ブラウザのページ読み込みを行わないページ遷移を実現したサイトを指します。そのためSPAサイトでは、通常サイトと違うページ遷移を行うため、通常サイトと違うタグの設置が必要となります。

以下では、「① 通常サイトの場合」「② SPAサイトに通常サイトと同一のタグの設置を行なった場合」「③ SPAサイトにSPA対応のタグの設置を行なった場合」の3つに分けて説明します。

① 通常サイトの場合

通常サイトでは、ページ遷移の度にブラウザの読み込みを行うためタグが発火します

【参考画像】

② SPAサイトに通常サイトと同一のタグの設置を行なった場合

SPAサイトでは、ページ遷移時にブラウザの読み込みを行わないため、通常サイトと同一のタグの設置ではタグが発火しません

【参考画像】

③ SPAサイトにSPA対応のタグの設置を行なった場合

SPAサイトでは、SPA対応のタグの設置を行うことで、タグを発火させることが可能となります

【参考画像】

アクセスログタグの設定を行う

ワンタグの発行を行ったら、利用したいタグ機能の設定を行います。今回はwebサイトのデータを取得するために必要な「アクセスログタグ」の設定について紹介します

web接客タグについては「web接客タグを動作させたい」、レコメンドタグについては「レコメンドタグを動作させたい」をご参照ください。

ドメインを設定する

b→dash画面上でアクセスログを取得したいwebサイトのドメインを登録します。

共通設定」をクリックします

タグ管理」をクリックします

アクセスログタグ」をクリックします

」をクリックします

ドメイン」を入力し、「適用」クリックします

ドメインが複数存在する場合はすべてのドメインを登録しましょう

「https://site-abc.com」と「https://site-xyz.com」のようにアクセスログを取得したいサイトのドメインが複数存在する場合は、すべてb→dashに登録する必要があります。

ドメインとはどの部分を指しているの??

ドメインはサイトURL「https://○○○○/」の「https://」と末尾の「/」を取り除いた「○○○○」部分です。対象ドメインに登録すると、ドメイン配下のページ、例えば「○○○○/service/」「○○○○/news/」などのページも、全てタグの適用対象になります。

対象ドメイン一覧に表示されます

対象ドメインの削除方法
対象ドメインに設定したドメインは削除することができます。ドメインを削除した後は、必ずアクセスログを一度「OFF」にして、再度「ON」にするようお願いいたします。
削除」アイコンをクリックしてドメインを削除します

削除」をクリックします

ON」をクリックして「OFF」にし、再度クリックして「ON」にします

ドメインが異なるwebサイト間で共通のビジターIDを保有したい

貴社がドメイン/サブドメインが異なるwebサイトを複数運用しており、webサイトを閲覧するユーザーに対してサイト共通のビジターIDを保有したい場合は「クロスドメイン設定」を行ってください
※ ビジターID:サイト訪問者のセッション情報を管理するID

クロスドメイン設定で共通のビジターIDを保有することで、例えば「ファッション情報サイト(bd-fashion.com)」から「ショップサイト(bd-shop.com)」のような、ドメインが異なるサイト間の流入計測を正確に行うことができます。

新規作成」をクリックします

サイト名」「ステータス」「ドメイン」「クエリシンボル」を追加し、「適用」をクリックします

サイトのドメインが登録されます
(クロスドメイン設定の対象としたい全てのサイトを登録します)

クロスドメインの各項目の説明
ステータス

クロスドメイン設定の「有効/無効」を選択することが出来ます。登録したwebサイトのクロスドメイン設定を一時的に無効にする、といった際に利用します。

ドメイン

クロスドメインの計測対象となるドメイン/サブドメインを登録します。

ドメイン登録の際、サブドメインを登録する場合はクロスドメインの適用範囲が異なりますので、例を参考に適切なドメインを設定するようご注意ください。

【例】 貴社が以下のようにドメイン/サブドメインが異なる4つのサイトを運用している場合

overseas.travels.shop.co.jp
domestic.travels.shop.co.jp
fassion.shop.co.jp
fs-kf.myshopify.com

● ケース①:ドメイン「shop.co.jp」「myshopify.com」を登録した場合
4つのサイト全てで共通のビジターIDを保持することができます。
→ overseas.travels.shop.co.jp
→ domestic.travels.shop.co.jp
→ fassion.shop.co.jp
→ fs-kf.myshopify.com

●ケース②:サブドメイン「travels.shop.co.jp」「myshopify.com」を登録した場合
以下の3サイトが共通のビジターIDを保持することができます。
→ overseas.travels.shop.co.jp
→ domestic.travels.shop.co.jp
→ fs-kf.myshopify.com
(fassion.shop.co.jpは別のビジターIDが保持されます)

●ケース③:サブサブドメイン「overseas.travels.shop.co.jp」「myshopify.com」を登録した場合
以下の2つサイトが共通のビジターIDを保持することができます
overseas.travels.shop.co.jp
→ fs-kf.myshopify.com
(fassion.shop.co.jp, domestic.travels.shop.co.jpは別のビジターIDが保持されます)

クエリシンボル

サイトのURLを「遷移先URL部分」と「パラメータ部分」に分割するための記号です。
一般的には「?」を用いて「遷移先URL部分」と「パラメータ部分」を分割していますが、「#」を利用して分割している場合は「#」を指定ください。また、「?」をクエリパラメータ、「#」をアンカーとして利用している場合は、「?」を登録いただくようお願いします。

サイト名の左にあるチェックボックスをクリックすると、「編集」「削除」の項目が表示されます

チェックボックスをクリックしないと「編集」と「削除」の項目は表示されないので注意しましょう!
クロスドメイン設定後にサイト遷移した際の挙動

クロスドメインに設定しているドメイン間で遷移すると、
セッションID:_bdsid
前ページURL:_bd_prev_page
リピーターフラグ:_bdrpf
の3つのパラメータが付与されます。

例)
サイトA(遷移元):https://testaaa.com
サイトB(遷移先):https://testbbb.com

この場合は、サイトAからサイトBに遷移すると、サイトBでは次のようなURLになります。
https://testbbb.com&_bdsid=1dYnPf
&_bd_prev_page=https://testaaa.com&_bdrpf=0

リダイレクトを経由するとクロスドメインが機能しない場合があります

クロスドメイン設定を行ったサイト間を遷移する際に、一度リダイレクトを経由すると、パラメータが脱落してしまう場合があります。そのため、クロスドメイン設定が機能せず、webアクセスログデータを取得することができませんので、ご注意ください。

[任意]除外IPアドレスを設定する

アクセスログを取得したくない場合は、「除外IPアドレス」を登録します。

除外IPアドレス設定」をクリックします

どういうケースで「除外IPアドレス」を設定するの??

貴社の社員や業務委託している代理店等のパートナー企業など、サイトのユーザーではない方のアクセスについては、アクセスログを取得したくないというケースにおいてよく利用されます。この場合は貴社やパートナー企業のネットワークのIPアドレスを除外IPアドレスとして登録することで、貴社やパートナー企業からのアクセスに関しては、ログ取得されなくなります。

※除外IPアドレスの設定が反映されるタイミングは、毎時「00分」と「30分」になりますので、例えば12時15分に設定を実施した場合は、12時30分以降に取得したアクセスログに対して、除外IPアドレスの設定が適用されるようになります。
設定することができる「除外IPアドレス」の上限は『1,000件』です

b→dashで設定することができる「除外IPアドレス」の上限は『1,000件』です
「除外IPアドレス」が『1,000件』設定されている場合、「新規作成ボタン」がグレーアウトされ、クリックすることができません。

また、アップロードしたファイルのレコード数が『1,000件』を超過している場合や、アップロードしたファイルのレコード数とすでに設定されている「除外IPアドレス」の合計が『1,000件』を超過する場合は、「除外IPアドレス」を登録することができない旨のエラーモーダルが表示されます。

[参考:「除外IPアドレス」を登録することができない旨のエラーモーダル]

レコード数が『1,000件』を超過合計が『1,000件』を超過

新規作成」をクリックします

名称」「IPアドレス」を入力し、「適用」をクリックします

アクセスログタグを動作させる

OFF」をクリックし、「ON」にします

これでドメインの設定は完了です!

ワンタグを設置する

❶ ワンタグを登録する

Googleタグマネージャー」を開き、タグを埋めたい「コンテナ」をクリックします

タグ」をクリックします

新規」をクリックします

タグの設定」のパネルをクリックします

画面を下にスクロールして「カスタムHTML」をクリックします

コピーした「ワンタグのソースコード」を貼り付け「document.writeをサポートする」にチェックします

document.writeとは、指定した文字列などの情報をウェブブラウザ上に表示させるためのJavascriptの言語です。カスタムHTMLの場合は、タグを正常に動かすために、こちらにチェックをつけてください!
ワンタグの取得方法

ワンタグは、b→dash管理画面内の「タグ管理」から以下の操作をすることでコピーすることができます。

赤枠内のアイコンをクリックして「ワンタグのソースコード」をコピーします

❷ トリガーを設定する

トリガー」のパネルをクリックします

+」ボタンをクリックします

トリガーの設定」のパネルをクリックします

ページビュー」をクリックします

保存」をクリックします

トリガーの発生場所は、「一部のページビュー」ではなく、「すべてのページビュー」を設定してください。もし、ログを取得する対象のページを限定したい場合は、b→dash上の、共通設定>タグ管理>アクセスログタグ>対象ドメインにて、対象ドメインの設定を実施することで、対象のページを指定することが可能です。
トリガー名」を設定し、「保存」をクリックします

保存」をクリックします

タグ名」を設定し、「保存」をクリックします

トリガー設定によっては、ワンタグが配信されない場合があります

ワンタグを特定のページに配信しない設定を行いたい場合、GTMのトリガー設定の「トリガー例外(ブロッキング トリガー)」の設定を行うことで、特定のページの除外を行うことができます。設定を行う際には、除外したいページの「ドメイン」や「URLパラメータ」を指定する必要がありますが、「ドメイン」を除外対象として指定した場合、除外したいページ以外において、ワンタグの配信が行われないケースがあります。

例えば、除外対象にしたいページのURLが「 https://aaa.com/?12345 」である場合、除外対象として、ドメインである「aaa.com」を指定すると、指定したドメインを含む「http://bbb.aaa.com/?6789 」といったURLも除外対象として判定されます。

そのため、「トリガー例外(ブロッキング トリガー)」の設定によっては、ワンタグを配信したいページにおいても、配信が行われない場合がありますので、トリガー設定の内容をご確認ください。

個別発火タグを設置する

b→dashでは、SPA対応のタグとして個別発火タグを設置します。個別発火タグは、ワンタグと併せてGTMに登録する必要があります。以下では、個別発火タグの登録の手順を紹介します。

❶ 個別発火タグを登録する

新規」をクリックします

タグの設定」のパネルをクリックします

画面を下にスクロールして「カスタムHTML」をクリックします

個別発火タグのソースコード」を貼り付け「document.writeをサポートする」にチェックします

※以下に個別発火タグのソースコードを記載しています

document.writeとは、指定した文字列などの情報をウェブブラウザ上に表示させるためのJavascriptの言語です。カスタムHTMLの場合は、タグを正常に動かすために、こちらにチェックをつけてください!
個別発火タグについて

個別発火タグは、以下のサンプルコードを参照してGTMに登録してください。
以下では、クリック計測などの「アクセスログ計測のみの場合」と、「アクセスログ計測+web接客配信の場合」に分けてサンプルコードを記載しましたので、利用用途に合わせてご参照ください。

アクセスログ計測のみの場合

アクセスログ計測を行いたい場合は、下記のサンプルコードをGTMへ登録してください。

<script id="bdSpaTag" type="text/javascript">
   // webアクセスログに値を手動更新
   //// URLを手動更新
   if (typeof bdash4 !== 'undefined') { bdash4("set", { location: document.location.href }); }
   //// ページタイトルを手動更新
   if (typeof bdash4 !== 'undefined') { bdash4("set", { pageTitle: document.title }); }
   //// referrerを手動更新
   if (typeof bdash4 !== 'undefined') { bdash4("set", { referrer: document.referrer }); }
   //// prevPageを手動更新 - Cookieから取得して復号化して格納する
   var value, prevPage, cookies = document.cookie.split(";");
   var regex = new RegExp("^s*" + '_bd_prev_page' + "=s*(.*)s*$");
   for (var i = 0; i < cookies.length; i++) {
   var val = cookies[i].match(regex);
   // @から始まっている場合は@を取り除いてからデコード
   if (val && val[1].indexOf('@') === 0) {
     try {
       value = decodeURIComponent(window.BdashRawDeflate.inflate(window.atob(val[1].slice(1))))
     } catch (e) {
       value = val[1]
   }
      break
   // @から始まっていない場合は@を取り除かずにデコード
   } else if (val && val[1].indexOf('@') ==! 0) {
       try {
         value = decodeURIComponent(window.atob(val[1]))
       } catch (e) {
         value = val[1]
       }
       break
     } else {
       continue
     }
   }
   var result = value && value.match(/^BD.(.+).(d+)$/);
   if (result) {
     if (typeof bdash4 !== 'undefined') { bdash4("set", { prevPage: result[1] }); }
   } else {
     if (typeof bdash4 !== 'undefined') { bdash4("set", { prevPage: value }); }
   }
   // タグ発火
   if (typeof bdash4 !== 'undefined') { bdash4("send", { type: "pageview" }); }
</script>
アクセスログ計測+web接客配信の場合

web接客の利用契約をされている場合は、下記のサンプルコードをGTMに登録してください。

<script id="bdSpaTag" type="text/javascript">
   // webアクセスログ、web接客用に値を手動更新
   //// URLを手動更新
   if (typeof bdash4 !== 'undefined') { bdash4("set", { location: document.location.href }); }
   if (typeof bdash4_concier !== 'undefined') { bdash4_concier("set", { location: document.location.href }); }
   //// ページタイトルを手動更新
   if (typeof bdash4 !== 'undefined') { bdash4("set", { pageTitle: document.title }); }
   if (typeof bdash4_concier !== 'undefined') { bdash4_concier("set", { pageTitle: document.title }); }
   //// referrerを手動更新
   if (typeof bdash4 !== 'undefined') { bdash4("set", { referrer: document.referrer }); }
   if (typeof bdash4_concier !== 'undefined') { bdash4_concier("set", { referrer: document.referrer }); }
   //// prevPageを手動更新 - Cookieから取得して復号化して格納する
   var value, prevPage, cookies = document.cookie.split(";");
   var regex = new RegExp("^s*" + '_bd_prev_page' + "=s*(.*)s*$");
   for (var i = 0; i < cookies.length; i++) {
     var val = cookies[i].match(regex);
     // @から始まっている場合は@を取り除いてからデコード
     if (val && val[1].indexOf('@') === 0) {
       try {
         value = decodeURIComponent(window.BdashRawDeflate.inflate(window.atob(val[1].slice(1))))
       } catch (e) {
         value = val[1]
       }
       break
     // @から始まっていない場合は@を取り除かずにデコード
     } else if (val && val[1].indexOf('@') ==! 0) {
       try {
         value = decodeURIComponent(window.atob(val[1]))
       } catch (e) {
         value = val[1]
       }
       break
     } else {
       continue
     }
   }
   var result = value && value.match(/^BD.(.+).(d+)$/);
   if (result) {
   if (typeof bdash4 !== 'undefined') { bdash4("set", { prevPage: result[1] }); }
   if (typeof bdash4_concier !== 'undefined') { bdash4_concier("set", { prevPage: result[1] }); }
   } else {
   if (typeof bdash4 !== 'undefined') { bdash4("set", { prevPage: value }); }
   if (typeof bdash4_concier !== 'undefined') { bdash4_concier("set", { prevPage: value }); }
   }
   // タグ発火
   if (typeof bdash4 !== 'undefined') { bdash4("send", { type: "pageview" }); }
   if (typeof bdash4_concier !== 'undefined') {
    if (bdash4_concier.queue && bdash4_concier.queue.length > 0) {
      console.warn("skip reception request by gtm");
    } else {
      //// イベントリスナに登録されているconditionを削除した上でweb接客タグ発火
      bdash4_concier("clear_condition", {});
      bdash4_concier("send", { type: "pageview" });
     }
   }
</script>

❷ トリガーを設定する

トリガー」のパネルをクリックします

+」ボタンをクリックします

トリガーの設定」のパネルをクリックします

履歴の変更」をクリックします

保存」をクリックします

「このトリガーの発生場所」は、『すべての履歴の変更』を選択してください。
トリガー名」を設定し、「保存」をクリックします

保存」をクリックします

タグ名」を設定し、「保存」をクリックします

発火の優先度を設定する

GTMに登録したワンタグと個別発火タグの、発火(発効)の優先度を設定します。個別発火タグは、ワンタグよりも先に発火するように設定してください。下記では、優先度の設定手順について説明します。

ワンタグ」を選択します

タグの設定」のパネルをクリックします

「詳細設定」をクリックします

タグの順序付け」をクリックします

発効する前にタグを配信」を選択します

タグを選択」をクリックします

個別発火タグ」を選択します

公開」をクリックします

任意の「バージョン名」を入力し、「公開」をクリックします

タグの発火確認を行う

「Google Chrome」をブラウザとして使用する例をもとに説明します!
タグが発火していることを確認したいページを開きます

画面上を右クリックし、表示されるメニューから「検証」を選択します

表示されるデベロッパーツール内の「Network」にて「bdash」を検索し、「control+R(ページ再読み込み)」をクリックします

btm.js」と「tracking」ログの「Status」項目が「200」と表示されていることを確認します

ワンタグを外しても、trackingの値はすぐに「0」にならない場合があります
ワンタグを外すとtrackingの値は「0」になりますが、ワンタグを外した直後のtrackingの値は、キャッシュなどの関係ですぐに「0」にならず、緩やかに「0」になる場合がありますので、ご留意ください。
これでタグの発火検証は以上です!
アクセスログが発火しない場合はどうすればいい??

b→dash上で「アクセスログ」が発火しない場合は、何らかの設定が誤っていると考えられます。以下によくある設定誤りを記載しますので、こちらに該当しないかご覧ください。

考えられる原因 改善策
リレーション設定の値が間違っていた 「顧客ID」「受注ID」などのキー項目を取得するリレーション設定の設定内容が誤っていないかをご確認ください。
アクセスログタグをONにしていなかった 共通設定> タグ管理 > アクセスログタグから、アクセスログタグが「ON」になってることをご確認ください。
アクセスログタグに登録した対象ドメインが誤っていた 設定したドメインに「https://」 のようなプロトコルや「/」 など、ドメイン以外の部分が含まれていないかをご確認ください。
アクセスログデータファイルの更新頻度設定がされていなかった データパレット > データを確認する > b→dashデータタブから、webアクセスログデータファイルをクリックの上、ツールバーの歯車マークをクリックし、更新頻度設定を行いましょう。
(もし設定が入っていない場合は、アクセスログデータにレコードが追加されません)
タグの設置個所が間違っていた サイトの共通部分にある「< /head >」の直前もしくは「< body >」の直後に設置されているかどうかをご確認ください。
アクセスログが重複して発火する場合はどうすればいい??

b→dash上で「アクセスログ」が重複して発火する場合は、何らかの設定が誤っていると考えられます。以下によくある設定誤りを記載しますので、こちらに該当しないかご覧ください。

考えられる原因 改善策
設置箇所が重複している タグマネージャーによる設置とHTML上への直貼りでの設置といった、ワンタグの設置が重複している可能性があります。
ワンタグの設置箇所をご確認ください。
ユーザーが重複実行している ユーザーがwebページの再読み込み(リロード)やブラウザバックを行い、遷移した場合、アクセスログが重複して計測される場合があります。

ユーザー起因の重複計測に関して、前ページURLの設定を行うことで、重複計測を防止できる場合があります。

前ページURLの設定に関して、こちらをご参照ください。

webアクセスログデータの更新頻度の設定

最後に、b→dash上に取得したアクセスログデータを表示させるために、以下の手順にて「webアクセスログデータの更新頻度の設定」を行います。

データパレット」をクリックします

データを確認する」をクリックします

b→dashデータ」をクリックします

webアクセスログデータ」を、1回クリックします

更新設定」をクリックします

連携頻度と時間を設定の上「追加」を選択し、「適用」をクリックします

webアクセスログデータ」を、2回クリックします

webアクセスログデータを確認することができます

更新頻度に設定した時間のタイミングでwebアクセスログデータの内容が更新されますので、最新のwebアクセスログデータを確認したい場合は、更新頻度に設定している時間に合わせてデータの確認を行いましょう!

webアクセスログデータのカラム一覧

アクセスログタグを設置することで取得できるデータ(カラムの種類)は下記になります。

(b→dashデータの詳細については「b→dashデータの詳細を知りたい」をご参照ください)

b→dashが受領可能なwebデータ
1時間/1分/1秒当たりでb→dashが受領可能なwebデータ(PV/click)に上限はありません。ただし、閾値を超えるとスケールアップをするため、追加費用を頂く場合があります。セールなど一時的に大量の集中が見込まれる場合は、事前に弊社のカスタマーサポートにご連絡ください。
b→dashの計測タグの取得結果と、他ツールの取得結果は、一致しない場合があります

b→dashとGoogle Analytics(GA)やAD EBiS(アドエビス)といった、他のタグ計測ツールを使用している場合、タグの発火地点の違いから、計測タグの取得結果が異なる場合があります。

※b→dashとGoogle Analytics(GA)についてはこちらをご参照ください

SPAサイトでは、初回流入時にのみ「pageview」の値が取得されます

SPAサイトでは、ユーザーが最初に貴社サイトへ流入した時にのみ「pageview」の値は取得されます

通常のサイトはページ遷移のたびに、ページの読み込みが発生します。 そのため、ページ遷移のたびに、ページ内に設置しているタグが読み込まれ、ページ遷移した回数だけ「pageview」の値が取得されます。
しかしSPAサイトでは、一度流入すると、それ以降はサイトを離脱しない限り、ページの読み込みは発生しません。そのため、サイト内に設置したタグが読み込まれず、ページ遷移した回数分の「pageview」の値は、取得されません

ただし、「click」の値は、ページの読み込み有無に関係なく、SPAサイトにおいても通常のサイトと同様に取得されます。 その結果、「pageview」の数よりも、「click」の数が多くなる事象が発生する可能性がありますので、ご留意ください。

[参考] リレーション設定を行う

リレーション設定とは、ワンタグで取得する各種データファイルに、特定のカラム(キー項目)を追加取得するための設定です。例えば、アクセスログタグで取得する「アクセスログデータファイル(webサイト内での行動データ)」に対して、「顧客ID」や「受注ID」といった、アクセスログと顧客データ/受注データを紐づけるキー項目となるカラムを取得することができます。

リレーション設定の詳細な手順については、こちらを参照ください。

SPAサイトの仕様によってはリレーション設定を行っても値が取得できない場合があります

貴社SPAサイトの仕様によっては、リレーション設定を行っても値を取得できない場合があります。リレーション設定ではタグを読み込んだタイミングで指定の値を取得するため、値を取得できない場合は、タグの発火タイミングの調整や、webページの再読み込み(リロード)を行うことで値を取得できる可能性があります。それでも値を取得できない場合は、貴社カスタマーサポート担当にお問い合わせください。

以上でタグの設置/設定は完了です!