目次
【はじめに】本記事の対象者
本記事は、ECサイト構築プラットフォーム「futureshop」においてコマースクリエイターを利用している企業様向けに、「futureshop」で構築したECサイトにタグを設置する方法を説明した記事になります。
「futureshop」でコマースクリエイターを未利用、もしくは「futureshop」自体を利用されていない場合は、他のタグ設置のサポートサイト記事をご参照ください。
タグとは
タグとは、webサイトのデータ取得や、ポップアップ表示、レコメンド表示を行うためにwebサイトに埋め込む小さいプログラム(コード)のことを指します。
b→dashでは、webサイトのデータ取得ができる「アクセスログタグ」、ポップアップが表示できる「web接客タグ」など複数のタグ機能を1つにまとめた「ワンタグ」を提供しています。ワンタグはwebサイトに1つ設置するだけで、b→dash管理画面から利用したいタグ機能を追加することができます。
本記事では、「ワンタグの設置(webサイトに直接タグを埋め込む方法)」「アクセスログタグの設定」について紹介しています。b→dashで貴社webサイトのデータ取得を行いたい場合は、本記事をご参照ください。
futureshopサイトにタグを設置する
ワンタグの発行が完了したら各種タグの設置を行います。futureshopで構築したECサイトへのタグ設置は「ワンタグの設置」「HTMLタグの設置」の2つの手順があります。
どちらの手順もfutureshop管理画面上で簡単にタグを設置することができます。
ワンタグを設置する
貴社webサイトのどのページにワンタグを設置したいかによって、ワンタグのソースコードを登録する設定項目が異なります。
貴社webサイトの全てのページに設置したい場合は、「共通出力」項目にワンタグのソースコードを登録します。一方、「会員登録完了ページ」「商品一覧ページ」といった特定のページのみに設置したい場合は、ページに対応した設定項目に登録します。
以下では、ワンタグのソースコードを「共通出力」項目に登録する手順を例に説明します。
b→dash管理画面からワンタグのソースコードをコピーします
測定タグ一覧画面で「計測タグを追加する」をクリックします
タグ一覧画面は「管理画面＞メニュー＞プロモーション管理＞測定タグ一覧」から遷移することができます。
「利用設定」で「利用する」にチェックを付けます
「名称設定」の「設定名」を入力します
設定名：「b→dashタグ」
任意の設定項目の「出力設定」で「<head>タグ内に出力する」にチェックを付けます
今回は「共通出力」項目に設定します。
「出力内容」に、コピーしたワンタグのソースコードを入力します
ページ下部の「保存する」をクリックします
「共通出力」項目にワンタグのソースコードを記載し、他の設定項目にもワンタグのソースコードを記載すると1つのページにワンタグが2つ設置されてしまう可能性があります。
1つのページにワンタグが2つ設置されていると、アクセス計測が2重でカウントされます。
HTMLタグを設置する
貴社webサイトにHTMLタグを設置することで、HTMLソースコード上に「顧客ID(会員ID)」「商品ID」「受注ID」「カート商品」の値が表示されます。
HTMLソースコード上に値が表示されることで、後述するリレーション設定を利用して、アクセスログデータファイルに「顧客ID(会員ID)」「商品ID」などの値を格納することができます。
貴社webサイトにHTMLタグを設置するためには、取得したい値ごとに、下記のようなサンプルコードをfutureshop管理画面上で登録する必要があります。
以下では、「顧客ID(会員ID)」「商品ID」「受注ID」「カート商品」の4つに分けて手順を説明します。
【参考：サンプルコードの例】
<input type="hidden" name="bdCustomerId" id="bdCustomerId" value="{@ member.id @}">「顧客ID(会員ID)」をHTMLソースコード上に表示させる
「顧客ID(会員ID)」をHTMLソースコード上に表示させる手順を紹介します。
「顧客ID(会員ID)」は、「貴社webサイトの全てのページ」や「会員登録完了ページ」「商品一覧ページ」といった特定のページのHTMLソースコード上に表示させ、取得することが可能です。
「顧客ID(会員ID)」を、「貴社webサイトの全てのページ」で取得したい場合は、「共通出力」項目にサンプルコードを登録します。一方、「会員登録完了ページ」「商品一覧ページ」といった特定のページのみで取得したい場合は、ページに対応した設定項目に登録します。
以下では、サンプルコードを「共通出力」項目に登録する手順を例に紹介します。
測定タグ一覧画面で「計測タグを追加する」をクリックします
タグ一覧画面は「管理画面＞メニュー＞プロモーション管理＞測定タグ一覧」から遷移することができます。
「利用設定」で「利用する」にチェックを付けます
「名称設定」の「設定名」を入力します
設定名：「b→dash顧客ID」
任意の設定項目の「出力設定」で「<head>タグ内に出力する」にチェックを付けます
今回は「共通出力」項目に設定します。
「出力内容」にサンプルコードを入力します
<input type="hidden" name="bdCustomerId" id="bdCustomerId" value="{@ member.id @}">
ページ下部の「保存する」をクリックします
「商品ID」をHTMLソースコード上に表示させる
「商品ID」をHTMLソースコード上に表示させる手順について紹介します。
「商品ID」は、「商品一覧ページ」「注文完了ページ」「ショッピングカートページ」といったページのHTMLソースコード上に表示させ、取得することが可能です。
以下では、サンプルコードを「商品一覧」項目に登録する手順を例に紹介します。
測定タグ一覧画面で「計測タグを追加する」をクリックします
タグ一覧画面は「管理画面＞メニュー＞プロモーション管理＞測定タグ一覧」から遷移することができます。
「利用設定」の「利用する」にチェックを付けます
「名称設定」の「設定名」を入力します
設定名：「b→dash商品ID」
任意の設定項目の「出力設定」で「<head>タグ内に出力する」にチェックを付けます
今回は「商品一覧」項目に設定します。
「出力内容」にサンプルコードを入力します
<input type="hidden" name="bdItemId" id="bdItemId" value="{% analytics.product_no %}">
ページ下部の「保存する」をクリックします
「受注ID」をHTMLソースコード上に表示させる
「受注ID」をHTMLソースコード上に表示させる手順について紹介します。
「受注ID」は「注文完了ページ」のHTMLソースコード上に表示させ、取得することが可能です。
以下では、サンプルコードを「注文完了ページ」項目に登録する手順を紹介します。
測定タグ一覧画面で「計測タグを追加する」をクリックします
タグ一覧画面は「管理画面＞メニュー＞プロモーション管理＞測定タグ一覧」から遷移することができます。
「利用設定」の「利用する」にチェックを付けます
「名称設定」の「設定名」を入力します
設定名：「b→dash受注ID」
「注文完了ページ」項目の「出力設定」で「<head>タグ内に出力する」にチェックを付けます
「出力内容」にサンプルコードを入力します
<input type="hidden" name="bdOrderId" id="bdOrderId" value="{% analytics.order_no %}">
ページ下部の「保存する」をクリックします
「カート商品」をHTMLソースコード上に表示させる
「カート商品」をHTMLソースコード上に表示させる手順について紹介します。
「カート商品」は「ショッピングカートページ」のHTMLソースコード上に表示させ、取得することが可能です。
以下では、サンプルコードを「ショッピングカートページ」項目に登録する手順を紹介します。
測定タグ一覧画面で「計測タグを追加する」をクリックします
タグ一覧画面は「管理画面＞メニュー＞プロモーション管理＞測定タグ一覧」から遷移することができます。
「利用設定」の「利用する」にチェックを付けます
「名称設定」の「設定名」を入力します
設定名：「b→dashカート商品」
「ショッピングカートページ」項目の「出力設定」で「<head>タグ内に出力する」にチェックを付けます
「出力内容」にサンプルコードを入力します
<input type="hidden" name="bdItemId" id="bdItemId" value="{% analytics.item_info %}">
「商品情報置換文字の設定」を入力します
出力内容 ：「{% analytics.product_no %}」
区切り文字：「,」
ページ下部の「保存する」をクリックします
アクセスログタグの設定を行う
ワンタグの設置が終わったら、利用したいタグ機能の設定を行います。今回はwebサイトのデータを取得するために必要な「アクセスログタグ」の設定について紹介します。
ドメインを設定する
b→dash画面上でアクセスログを取得したいwebサイトのドメインを登録します。
「共通設定」をクリックします
「タグ管理」をクリックします
「アクセスログタグ」をクリックします
「＋」をクリックします
「ドメイン」を入力し、「適用」クリックします
「https://site-abc.com」と「https://site-xyz.com」のようにアクセスログを取得したいサイトのドメインが複数存在する場合は、すべてb→dashに登録する必要があります。
ドメインはサイトURL「https://○○○○/」の「https://」と末尾の「/」を取り除いた「○○○○」部分です。対象ドメインに登録すると、ドメイン配下のページ、例えば「○○○○/service/」「○○○○/news/」などのページも、すべてタグの適用対象になります。
対象ドメイン一覧に表示されます
「削除」アイコンをクリックしてドメインを削除します
「削除」をクリックします
「ON」をクリックして「OFF」にし、再度クリックして「ON」にします
貴社がドメイン/サブドメインが異なる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アドレスとして登録することで、貴社やパートナー企業からのアクセスに関しては、ログ取得されなくなります。
b→dashで設定することができる「除外IPアドレス」の上限は『1,000件』です。
「除外IPアドレス」が『1,000件』設定されている場合、「新規作成ボタン」がグレーアウトされ、クリックすることができません。
また、アップロードしたファイルのレコード数が『1,000件』を超過している場合や、アップロードしたファイルのレコード数とすでに設定されている「除外IPアドレス」の合計が『1,000件』を超過する場合は、「除外IPアドレス」を登録することができない旨のエラーモーダルが表示されます。
[参考：「除外IPアドレス」を登録することができない旨のエラーモーダル]
「新規作成」をクリックします
「名称」「IPアドレス」を入力し、「適用」クリックします
アクセスログタグを動作させる
「OFF」をクリックし、「ON」にします
リレーション設定を行う
リレーション設定とは、ワンタグで取得する各種データファイルに、特定のカラム(キー項目)を追加取得するための設定です。例えば、アクセスログタグで取得する「アクセスログデータファイル(webサイト内での行動データ)」に対して、「顧客ID」や「受注ID」といった、アクセスログと顧客データ/受注データを紐づけるキー項目となるカラムを取得することができます。
futureshopで構築したECサイトにおけるリレーション設定は、「❹ futureshopサイトにタグを設置する」の「HTMLタグを設置する」で取得できるようにした「顧客ID(会員ID)」「商品ID」「受注ID」「カート商品」のHTMLソースコード上に表示した値を参照します。
「共通設定」をクリックします
「タグ管理」をクリックします
「リレーション設定」をクリックします
「新規作成」をクリックします
「取得したい項目」を選択し、「適用」をクリックします
「ソースコード」「HTML」から取得を選択し、
取得したい項目が表示される「ページURL」と「属性値」を入力します
HTMLの属性値は取得したい項目に合わせて下記の値を入力してください。
● 顧客ID ：「ID」「完全一致」「bdCustomerId」
● 商品ID ：「ID」「完全一致」「bdItemId」
● 受注ID ：「ID」「完全一致」「bdOrderId」
●カート商品：「ID」「完全一致」「bdItemId」
任意の「リレーション設定名」「取得した値の項目名」を入力し、「個人情報設定」を行い、「保存」をクリックします
リレーション設定が作成されます
