目次
本記事について
本記事では、SPAサイトにb→dashが提供するワンタグや個別発火タグを、設置する手順について説明します。また、SPAサイトにb→dashが提供するワンタグや個別発火タグを設置する場合は、GTMを使用してタグを設置することを推奨しています。
SPAサイトとは
SPA(Single Page Application)サイトとは、
以下では、「① 通常サイトの場合」「② SPAサイトに通常サイトと同一のタグの設置を行なった場合」「③ SPAサイトにSPA対応のタグの設置を行なった場合」の3つに分けて説明します。
① 通常サイトの場合
通常サイトでは、
【参考画像】
② SPAサイトに通常サイトと同一のタグの設置を行なった場合
SPAサイトでは、
【参考画像】
③ SPAサイトにSPA対応のタグの設置を行なった場合
SPAサイトでは、SPA対
【参考画像】
アクセスログタグの設定を行う
ワンタグの発行を行ったら、利用したいタグ機能の設定を行います。今回はwebサイトのデータを取得するために必要な「アクセスログタグ」の設定について紹介します。
ドメインを設定する
b→dash画面上でアクセスログを取得したいwebサイトのドメインを登録します。
「共通設定」をクリックします
「タグ管理」をクリックします
「アクセスログタグ」をクリックします
「+」をクリックします
「ドメイン」を入力し、「適用」クリックします
「https://site-abc.com」と「https://site-xyz.com」のようにアクセスログを取得したいサイトのドメインが複数存在する場合は、すべてb→dashに登録する必要があります。
ドメインはサイトURL「https://○○○○/」の「https://」と末尾の「/」を取り除いた「○○○○」部分です。対象ドメインに登録すると、ドメイン配下のページ、例えば「○○○○/service/」「○○○○/news/」などのページも、全てタグの適用対象になります。
対象ドメイン一覧に表示されます
[任意]除外IPアドレスを設定する
アクセスログを取得したくない場合は、「除外IPアドレス」を登録します。
「除外IPアドレス設定」をクリックします
貴社の社員や業務委託している代理店等のパートナー企業など、サイトのユーザーではない方のアクセスについては、アクセスログを取得したくないというケースにおいてよく利用されます。この場合は貴社やパートナー企業のネットワークのIPアドレスを除外IPアドレスとして登録することで、貴社やパートナー企業からのアクセスに関しては、ログ取得されなくなります。
b→dashで設定することができる「除外IPアドレス」の上限は『1,000件』です。
「除外IPアドレス」が『1,000件』設定されている場合、「新規作成ボタン」がグレーアウトされ、クリックすることができません。
また、アップロードしたファイルのレコード数が『1,000件』を超過している場合や、アップロードしたファイルのレコード数とすでに設定されている「除外IPアドレス」の合計が『1,000件』を超過する場合は、「除外IPアドレス」を登録することができない旨のエラーモーダルが表示されます。
[参考:「除外IPアドレス」を登録することができない旨のエラーモーダル]
「新規作成」をクリックします
「名称」「IPアドレス」を入力し、「適用」をクリックします
アクセスログタグを動作させる
「OFF」をクリックし、「ON」にします
ワンタグを設置する
❶ ワンタグを登録する
「Googleタグマネージャー」を開き、タグを埋めたい「コンテナ」をクリックします
「タグ」をクリックします
「新規」をクリックします
「タグの設定」のパネルをクリックします
画面を下にスクロールして「カスタムHTML」をクリックします
コピーした「ワンタグのソースコード」を貼り付け「document.writeをサポートする」にチェックします
❷ トリガーを設定する
「トリガー」のパネルをクリックします
「+」ボタンをクリックします
「トリガーの設定」のパネルをクリックします
「ページビュー」をクリックします
「保存」をクリックします
「トリガー名」を設定し、「保存」をクリックします
「保存」をクリックします
「タグ名」を設定し、「保存」をクリックします
ワンタグを特定のページに配信しない設定を行いたい場合、GTMのトリガー設定の「トリガー例外(ブロッキング トリガー)」の設定を行うことで、特定のページの除外を行うことができます。設定を行う際には、除外したいページの「ドメイン」や「URLパラメータ」を指定する必要がありますが、「ドメイン」を除外対象として指定した場合、除外したいページ以外において、ワンタグの配信が行われないケースがあります。
例えば、除外対象にしたいページのURLが「 https://aaa.com/?12345 」である場合、除外対象として、ドメインである「aaa.com」を指定すると、指定したドメインを含む「http://bbb.aaa.com/?6789 」といったURLも除外対象として判定されます。
そのため、「トリガー例外(ブロッキング トリガー)」の設定によっては、ワンタグを配信したいページにおいても、配信が行われない場合がありますので、トリガー設定の内容をご確認ください。
個別発火タグを設置する
b→dashでは、SPA対応のタグとして個別発火タグを設置します。個別発火タグは、ワンタグと併せてGTMに登録する必要があります。以下では、個別発火タグの登録の手順を紹介します。
❶ 個別発火タグを登録する
「新規」をクリックします
「タグの設定」のパネルをクリックします
画面を下にスクロールして「カスタムHTML」をクリックします
「個別発火タグのソースコード」を貼り付け「document.writeをサポートする」にチェックします
※以下に個別発火タグのソースコードを記載しています
個別発火タグは、以下のサンプルコードを参照して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に登録したワンタグと個別発火タグの、発火(発効)の優先度を設定します。個別発火タグは、ワンタグよりも先に発火するように設定してください。下記では、優先度の設定手順について説明します。
「ワンタグ」を選択します
「タグの設定」のパネルをクリックします
「詳細設定」をクリックします
「タグの順序付け」をクリックします
「発効する前にタグを配信」を選択します
「タグを選択」をクリックします
「個別発火タグ」を選択します
「公開」をクリックします
任意の「バージョン名」を入力し、「公開」をクリックします
タグの発火確認を行う
タグが発火していることを確認したいページを開きます
画面上を右クリックし、表示されるメニューから「検証」を選択します
表示されるデベロッパーツール内の「Network」にて「bdash」を検索し、「control+R(ページ再読み込み)」をクリックします
「btm.js」と「tracking」ログの「Status」項目が「200」と表示されていることを確認します
webアクセスログデータの更新頻度の設定
最後に、b→dash上に取得したアクセスログデータを表示させるために、以下の手順にて「webアクセスログデータの更新頻度の設定」を行います。
「データパレット」をクリックします
「データを確認する」をクリックします
「b→dashデータ」をクリックします
「webアクセスログデータ」を、1回クリックします
「更新設定」をクリックします
連携頻度と時間を設定の上「追加」を選択し、「適用」をクリックします
「webアクセスログデータ」を、2回クリックします
webアクセスログデータを確認することができます
webアクセスログデータのカラム一覧
アクセスログタグを設置することで取得できるデータ(カラムの種類)は下記になります。
(b→dashデータの詳細については「b→dashデータの詳細を知りたい」をご参照ください)
b→dashとGoogle Analytics(GA)やAD EBiS(アドエビス)といった、他のタグ計測ツールを使用している場合、タグの発火地点の違いから、計測タグの取得結果が異なる場合があります。
※b→dashとGoogle Analytics(GA)についてはこちらをご参照ください
SPAサイトでは、ユーザーが最初に貴社サイトへ流入した時にのみ「pageview」の値は取得されます。
しかしSPAサイトでは、一度流入すると、それ以降はサイトを離脱しない限り、ページの読み込みは発生しません。そのため、サイト内に設置したタグが読み込まれず、ページ遷移した回数分の「pageview」の値は、取得されません。
ただし、「click」の値は、ページの読み込み有無に関係なく、SPAサイトにおいても通常のサイトと同様に取得されます。 その結果、「pageview」の数よりも、「click」の数が多くなる事象が発生する可能性がありますので、ご留意ください。
[参考] リレーション設定を行う
リレーション設定とは、ワンタグで取得する各種データファイルに、特定のカラム(キー項目)を追加取得するための設定です。例えば、アクセスログタグで取得する「アクセスログデータファイル(webサイト内での行動データ)」に対して、「顧客ID」や「受注ID」といった、アクセスログと顧客データ/受注データを紐づけるキー項目となるカラムを取得することができます。
リレーション設定の詳細な手順については、こちらを参照ください。
貴社SPAサイトの仕様によっては、リレーション設定を行っても値を取得できない場合があります。リレーション設定ではタグを読み込んだタイミングで指定の値を取得するため、値を取得できない場合は、タグの発火タイミングの調整や、webページの再読み込み(リロード)を行うことで値を取得できる可能性があります。それでも値を取得できない場合は、貴社カスタマーサポート担当にお問い合わせください。