Shopifyサイトへタグを設置したい
回答
本記事では、ECサイト構築プラットフォーム「Shopify」を利用している企業様向けに、Shopifyで構築したECサイトにタグを設置する方法を紹介しています。
本記事の構成は下記の通りです。
1. はじめに(本記事の対象者 / タグとは)
2. アクセスログタグの設定を行う(ドメイン設定 / 除外IPアドレス / アクセスログタグを動作させる)
3. Shopifyサイトにタグを設置する(リレーションキー取得設定 / タグの設置)
4. タグの発火確認とwebアクセスログデータの更新設定を行う
各セクションの詳細は、以下をご参照ください。
・『直貼りでタグを設置したい』
・『GTMでタグを設置したい』
・『YTMでタグを設置したい』
・『futureshopサイトへタグを設置したい(コマースクリエイター未利用の場合)』
1. タグとは
タグとは、webサイトのデータ取得や、ポップアップ表示、レコメンド表示を行うためにwebサイトに埋め込む小さいプログラム(コード)のことを指します。
b→dashでは、webサイトのデータ取得ができる「アクセスログタグ」、ポップアップが表示できる「web接客タグ」など複数のタグ機能を1つにまとめた「ワンタグ」を提供しています。ワンタグはwebサイトに1つ設置するだけで、b→dash管理画面から利用したいタグ機能を追加することができます。
※ 本記事で紹介するワンタグの設置手順は「web接客タグ」「レコメンドタグ」を利用する場合も必要になります
2. アクセスログタグの設定を行う
ワンタグの発行を行ったら、利用したいタグ機能の設定を行います。本記事ではwebサイトのデータを取得するために必要な「アクセスログタグ」の設定について紹介します。
ドメインを設定する
b→dash画面上でアクセスログを取得したいwebサイトのドメインを登録します。
1. 「共通設定」→「タグ管理」→「アクセスログタグ」をクリックします
2. 「＋」をクリックします
3. 「ドメイン」を入力し、「適用」をクリックします
4. 対象ドメイン一覧に表示されたことを確認します
※「ドメイン」とは、サイトURL「https://○○○○/」の「https://」と末尾の「/」を取り除いた「○○○○」部分です。対象ドメインに登録すると、ドメイン配下のページ(例: 「○○○○/service/」「○○○○/news/」など)も全てタグの適用対象になります
※ ドメインを削除した後は、必ずアクセスログを一度「OFF」にして、再度「ON」にするようお願いいたします
クロスドメイン設定(ドメインが異なるwebサイト間で共通のビジターIDを保有したい場合)
貴社がドメイン/サブドメインが異なるwebサイトを複数運用しており、webサイトを閲覧するユーザーに対してサイト共通のビジターIDを保有したい場合に設定します。ドメインが異なるサイト間の流入計測を正確に行うことができます。
1. 「新規作成」をクリックします
2. 「サイト名」「ステータス」「ドメイン」「クエリシンボル」を追加し、「適用」をクリックします
3. クロスドメイン設定の対象としたい全てのサイトを登録します
4. サイト名の左にあるチェックボックスをクリックすると、「編集」「削除」の項目が表示されます
クロスドメイン設定の各項目の説明は下記の通りです。
項目 |
説明 |
ステータス |
クロスドメイン設定の「有効/無効」を選択することができます。登録したwebサイトのクロスドメイン設定を一時的に無効にする際に利用します。 |
ドメイン |
クロスドメインの計測対象となるドメイン/サブドメインを登録します。サブドメインを記載するかによってクロスドメインの適用範囲が異なります(ビジターIDの共通化範囲が異なります)。 例: 「overseas.travels.shop.co.jp」「domestic.travels.shop.co.jp」「fassion.shop.co.jp」がある場合、 ・ドメイン「shop.co.jp」を登録 → 3つのサイト全てで共通のビジターIDを保持 ・サブドメイン「travels.shop.co.jp」を登録 → 2サイト(travels配下)が共通、「fassion.shop.co.jp」は別 ・サブサブドメイン「overseas.travels.shop.co.jp」を登録 → 3つのサイト全てで別々のビジターIDが保持される |
クエリシンボル |
サイトのURLを「遷移先URL部分」と「パラメータ部分」に分割するための記号です。一般的には「?」を用いて分割していますが、「#」を利用して分割している場合は「#」を指定してください。「?」をクエリパラメータ、「#」をアンカーとして利用している場合は、「?」を登録してください。 |
※ クロスドメインに設定しているドメイン間で遷移すると、「セッションID(_bdsid)」「前ページURL(_bd_prev_page)」「リピーターフラグ(_bdrpf)」の3つのパラメータが付与されます
※ クロスドメイン設定を行ったサイト間を遷移する際に、一度リダイレクトを経由するとパラメータが脱落してしまう場合があり、クロスドメイン設定が機能せずwebアクセスログデータを取得できないことがありますのでご注意ください
[任意]除外IPアドレスを設定する
貴社の社員や業務委託している代理店等のパートナー企業など、サイトのユーザーではない方のアクセスについては、アクセスログを取得したくない場合に設定します。
1. 「除外IPアドレス設定」をクリックします
2. 「新規作成」をクリックします
3. 「名称」「IPアドレス」を入力し、「適用」をクリックします
※ 除外IPアドレスの設定が反映されるタイミングは、毎時「00分」と「30分」になります。例えば12時15分に設定を実施した場合は、12時30分以降に取得したアクセスログに対して、除外IPアドレスの設定が適用されます
アクセスログタグを動作させる
「OFF」をクリックし、「ON」に変更します。これでアクセスログタグの設定は完了です。
3. Shopifyサイトにタグを設置する
Shopifyで構築したECサイトへのタグ設置は「リレーションキーの取得設定」と「ワンタグの設置」の2つの手順で構成されます。「リレーションキーの取得設定」では、アクセスログデータと顧客データ/受注データを統合するために必要な「受注ID」をアクセスログデータに取得する設定を行います。「ワンタグの設置」では、Shopifyの管理画面上の2か所(「チェックアウト以外の画面」と「チェックアウト画面」)にワンタグを設置します。
「受注ID」を取得するためのリレーションキー設定を行う
1. 「共通設定」→「タグ管理」→「リレーション設定」をクリックします
2. 「新規作成」をクリックします
3. 「受注ID」を選択し、「適用」をクリックします
4. 「含む」を選択の上、「thank_you」を入力し、「追加」をクリックします
5. 「その他」を選択し、下記のコードを入力します
var customerId = document.getElementsByClassName('os-order-number')[0].innerText.replace("注文 #","");
customValue = customerId;6. 「値を取得するタイミング」を設定し、「適用」をクリックします
7. 「リレーション設定名」「取得した値の項目名」を入力し、「個人情報設定」を設定後、「保存」をクリックします
8. リレーション設定一覧に作成した内容が表示されることを確認します
※ 上記の設定を行うことで、購入完了ページ(https://●●●.com/●●/checkouts/●●/thank_you)にユーザーがアクセスした際に、受注IDを取得できるようになります
※ 購入完了ページのURLをShopifyのデフォルトURLから変更するなどにより、URLに「thank_you」が含まれなくなっている場合は、設定方法が変わりますので、貴社カスタマーサクセス担当にご相談ください
ワンタグを設置する
Shopifyを利用している場合は、ワンタグを「チェックアウト以外の画面」と「チェックアウト画面」の2か所に設置する必要があります。
「チェックアウト以外の画面」に設置する
1. b→dash管理画面の赤枠内のアイコンをクリックして「ワンタグのソースコード」をコピーします
2. Shopifyの管理画面にログインし、「オンラインストア」をクリックします
3. 「アクション」を選択し、「コードを編集する」をクリックします
4. 「{/}theme.liquid」など、全画面共通で利用されているliquidファイルをクリックします
5. コピーした「ワンタグ」を貼り付けます
※ ワンタグの設置箇所は、サイトの共通部分にある「</head>」の直前もしくは「<body>」の直後に設置してください
※「<body>」の中に「<script>」が存在する場合は、「<script>」をb→dashワンタグより上部に記載し、b→dashワンタグが「<script>」の最下部に記載される場所に設置してください
「チェックアウト画面」に設置する
1. Shopifyの管理画面で「設定」→「チェックアウト」をクリックします
2. 「追加スクリプト」に「ワンタグ」を貼り付けます
4. タグの発火確認とwebアクセスログデータの更新設定を行う
タグ設置後、タグが正しく発火しているかの確認と、b→dash上にアクセスログデータを表示するためのwebアクセスログデータの更新設定を行います。
タグの発火確認を行う
「Google Chrome」をブラウザとして使用する例で、アクセスログタグが発火していることを確認する手順を紹介します。
1. タグが発火していることを確認したいページを開きます
2. 画面上を右クリックし、表示されるメニューから「検証」を選択します
3. 表示されるデベロッパーツール内の「Network」にて「bdash」を検索し、「control＋R(ページ再読み込み)」をクリックします
4. 「btm.js」と「tracking」ログの「Status」項目が「200」と表示されていることを確認します
※ ワンタグを外すとtrackingの値は「0」になりますが、ワンタグを外した直後はキャッシュなどの関係ですぐに「0」にならず、緩やかに「0」になる場合がありますのでご留意ください
b→dash上で「アクセスログ」が発火しない場合は、何らかの設定が誤っていると考えられます。よくある設定誤りは下記の通りです。
考えられる原因 |
改善策 |
| リレーション設定の値が間違っていた | 「顧客ID」「受注ID」などのキー項目を取得するリレーション設定の設定内容が誤っていないかをご確認ください |
| アクセスログタグをONにしていなかった | 「共通設定 → タグ管理 → アクセスログタグ」から、アクセスログタグが「ON」になっていることをご確認ください |
| アクセスログタグに登録した対象ドメインが誤っていた | 設定したドメインに「https://」のようなプロトコルや「/」などドメイン以外の部分が含まれていないかをご確認ください |
| アクセスログデータファイルの更新頻度設定がされていなかった | 「データパレット → データを確認する → b→dashデータ」タブから、webアクセスログデータファイルをクリックの上、ツールバーの歯車マークをクリックし、更新頻度設定を行ってください(設定が入っていない場合、アクセスログデータにレコードが追加されません) |
| タグの設置箇所が間違っていた | サイトの共通部分にある「</head>」の直前もしくは「<body>」の直後に設置されているかどうかをご確認ください |
b→dash上で「アクセスログ」が重複して発火する場合のよくある設定誤りは下記の通りです。
考えられる原因 |
改善策 |
| 設置箇所が重複している | タグマネージャーによる設置とHTML上への直貼りによる設置といった、ワンタグの設置が重複している可能性があります。ワンタグの設置箇所をご確認ください |
| ユーザーが重複実行している | ユーザーがwebページの再読み込み(リロード)やブラウザバックを行い、遷移した場合、アクセスログが重複して計測される場合があります。前ページURLの設定を行うことで、ユーザー起因の重複計測を防止できる場合があります。詳細は『webサイトのCVを取得したい』をご参照ください |
webアクセスログデータの更新頻度を設定する
b→dash上に取得したアクセスログデータを表示させるために、webアクセスログデータの更新頻度の設定を行います。
1. 「データパレット」→「データを確認する」をクリックします
2. 「b→dashデータ」タブをクリックします
3. 「webアクセスログデータ」を1回クリックします
4. 「更新設定」をクリックします
5. 連携頻度と時間を設定の上「追加」を選択し、「適用」をクリックします
6. 「webアクセスログデータ」を2回クリックし、webアクセスログデータが確認できることを確認します
