概要

一般的にShopifyでは、オンラインストアへの外部サービス連携用タグ設置に「ピクセル」の利用が推奨されています
一方で、 KARTEの導入やイベント計測のためのタグを「ピクセル」経由で配信した場合、KARTEの機能を十分に利用することができません
そのため、KARTEでは「ピクセル」経由ではなく liquidファイルに直書きする形でのタグ設置を推奨しています
- 詳細: Shopifyへの導入 | KARTEサポートサイト
ただし、チェックアウト関連ページについては基本的に「ピクセル」経由でしかタグ設置ができないため、例外的に「ピクセル」を使ったタグ設置も有用になります
- なお、「追加スクリプト」を利用することで「注文状況（thank you）ページ」には直書きでのタグ設置が可能になります
- ※しかし、「追加スクリプト」機能については2025年8月以降にShopify側で廃止される可能性があります

Shopify ピクセルを使ったタグ設置の制約

Shopify ピクセルとして登録されたJavaScriptコードは、「ピクセル用のサンドボックス環境」で実行されます。具体的には、 Webページ内に存在する不可視のiframe上で実行されます 。そのため、Shopify ピクセルからKARTEのイベントを発生させる場合には、次のような強い制約があります。

Shopify ピクセルから発生させたKARTEのイベントは、 基本的に接客サービスの配信トリガーに利用することができません
- 仮に接客サービスを配信した場合、ユーザーが閲覧するWebページではなく「ピクセル用のサンドボックス環境」に配信されるため、ユーザーが接客サービスのUIを見ることはできません
- ただし、UIを持たないスクリプト配信接客サービスであればこの制約が問題にならないこともあります
Shopify ピクセルからKARTEのviewイベントを発生させた場合、 計測されるURLの末尾にサンドボックス環境用の文字列が自動付与されます
- たとえば https://example.myshopify.com/ を閲覧した場合でも、カスタムピクセルから発生させたviewイベントでは、次のようなURLが計測されます
  - https://example.myshopify.com/wpm@xxxxxx/custom/web-pixel-12345678@1/sandbox/modern/
Shopify ピクセルでは scriptタグではなくJavaScriptプログラムを直接記述する必要があります
- そのため、たとえば計測タグを設置する場合にも管理画面からコピーできるscriptタグをそのまま設置することはできません
- もし設置する場合は、同様のscriptタグを挿入するJavaScriptプログラムに書き換える必要があります

こうした強い制約のため、 基本的にKARTEの計測タグやカスタムイベントタグをShopifyのカスタムピクセルを介して実行することは、「非推奨」としています 。

ピクセルを使う代わりに、次の記事を参照してliquidファイルに直接タグを記述してください。

Shopifyへの導入 | KARTEサポートサイト

ただし、一部のチェックアウト関連情報については、Shopify ピクセル経由でしか取得できないケースがあります。そのため本記事では、チェックアウトに関するデータをKARTEのイベントとして計測したい場合のタグ実装サンプルを、参考情報として紹介します。

その他の注意点

Google Tag Managerなどタグマネージャーの導入タグを「ピクセル」経由で設置している場合、そのタグマネージャー経由でKARTEのタグ設置をすることも非推奨です
- タグマネージャーを「ピクセル」経由で導入した場合、そのタグマネージャから配信されるタグも「ピクセル用のサンドボックス環境」で実行され、前述した制約を受けます

Shopify カスタムピクセルを使ったタグ実装サンプル

ここでは、チェックアウトに関するデータをShopify カスタムピクセルを介してKARTEのイベントとして計測したい場合のカスタムピクセルの実装サンプルを紹介します。

なおカスタムピクセルの追加方法などについては公式ドキュメントをご覧ください。

カスタムピクセルを管理する · Shopify ヘルプセンター

buyイベントタグ

Shopify Web Pixels APIにおける checkout_completed event が発生したときにKARTEのbuyイベントを発生させるタグ実装サンプルです。

※ コード中に対象KARTEプロジェクトのAPIキーの値を設定する箇所があります
※ Shopify管理画面の [設定 > チェックアウト > 注文状況ページの追加スクリプト] でもKARTEのbuyイベントタグを設置している場合、カスタムピクセルを使ったタグ設置は不要です。二重でbuyイベントタグを設置しないようにしてください

// 購入完了時に実行
analytics.subscribe("checkout_completed", (event) => {
  // 対象KARTEプロジェクトのAPIキーを設定してください
  const API_KEY = "xxxxx";

  // 計測タグをJavaScript経由で読み込み
  if (!window.krt) initEdgeJs(API_KEY);

  // buyイベントの送信
  trackBuy(event);
});

function initEdgeJs(apiKey) {
  !(function (n) {
    if (!window[n]) {
      var o = (window[n] = function () {
        var n = [].slice.call(arguments);
        return o.x ? o.x.apply(0, n) : o.q.push(n);
      });
      (o.q = []),
        (o.i = Date.now()),
        (o.allow = function () {
          o.o = "allow";
        }),
        (o.deny = function () {
          o.o = "deny";
        });
    }
  })("krt");
  const script = document.createElement("script");
  script.async = true;
  script.src = "https://cdn-edge.karte.io/" + apiKey + "/edge.js";
  script.dataset.options = '{"firstViewDisabled":true}'; // viewイベントの自動送信をオフにする
  document.body.appendChild(script);
}

function trackBuy(e) {
  try {
    const co = e.data.checkout;
    const items = co.lineItems.map((item) => ({
      item_id: item.variant.product.id,
      name: item.variant.product.title,
      price: item.variant.price.amount,
      quantity: item.quantity,
      item_image_url: item.variant.image.src,
      item_url: item.variant.product.url,
      brand_name: item.variant.product.vendor,
    }));

    krt("send", "buy", {
      transaction_id: co.order.id,
      revenue: co.subtotalPrice.amount,
      items: items,
      tax: co.totalTax.amount,
      shipping: co.shippingLine.price.amount,
    });
  } catch (err) {
    krt("send", "_error", { message: err.message });
  }
}

チェックアウト関連ページのviewイベントを取得

チェックアウト関連ページでShopify Web Pixels APIにおける page_viewed event が発生したときにKARTEのviewイベントを発生させるタグ実装サンプルです。

※ コード中に対象KARTEプロジェクトのAPIキーの値を設定する箇所があります
※ Shopify管理画面の [設定 > チェックアウト > 注文状況ページの追加スクリプト] でもKARTEの計測タグを設置している場合、注文状況ページ（/thank_you）でviewイベントが二重発火します。いずれか一方のみviewイベントが発生するようにしてください

// ページ閲覧時に実行
analytics.subscribe("page_viewed", (event) => {
  // 対象KARTEプロジェクトのAPIキーを設定してください
  const API_KEY = "xxxxx";

  const path = event.context.document.location.pathname;

  // チェックアウト関連ページのみを対象にする
  if (!path.includes("/checkouts/")) return;

  // 計測タグをJavaScript経由で読み込み
  if (!window.krt) initEdgeJs(API_KEY);

  // viewイベントの送信
  trackView(path);
});

function initEdgeJs(apiKey) {
  !(function (n) {
    if (!window[n]) {
      var o = (window[n] = function () {
        var n = [].slice.call(arguments);
        return o.x ? o.x.apply(0, n) : o.q.push(n);
      });
      (o.q = []),
        (o.i = Date.now()),
        (o.allow = function () {
          o.o = "allow";
        }),
        (o.deny = function () {
          o.o = "deny";
        });
    }
  })("krt");
  const script = document.createElement("script");
  script.async = true;
  script.src = "https://cdn-edge.karte.io/" + apiKey + "/edge.js";
  script.dataset.options = '{"firstViewDisabled":true}'; // viewイベントの自動送信をオフにする
  document.body.appendChild(script);
}

function trackView(path) {
  try {
    krt("send", "view", {
      // 任意のカスタムフィールドを追加できます
      in_checkout_flow: true,
      original_path: path,
    });
  } catch (err) {
    krt("send", "_error", { message: err.message });
  }
}

Shopify ピクセルを使ったタグ設置について

概要

Shopify ピクセルを使ったタグ設置の制約

その他の注意点

Shopify カスタムピクセルを使ったタグ実装サンプル

buyイベントタグ

チェックアウト関連ページのviewイベントを取得

間違い、誤植等があれば教えて下さい😃

目次