Shopify カスタムピクセル

基本的なShopifyショップとの連携設定、着地点タグの設置、カスタムピクセルの追加方法については、Shopify連携をご確認ください。

本マニュアルでは、カスタムピクセルの具体的なコードについて解説します。

Web Pixels API | checkout_completed
checkout_completed - Standard Events | Shopify Developers

共通設定：ピクセルコードの編集

次項以降に記載するピクセルコードは、以下の設定値をご利用環境に合わせて変更してください。

コードの変更点

var PV = "広告ID";：計測対象の広告IDに変更
※広告グループ機能で計測する場合は、var GI="グループID";を設定
var turl = "https://システムドメイン/track.php?p="：ご利用中のアフィリコード・システムのドメインに変更

price 値は、Shopify側の税設定により変数が同じでも異なる金額が通知されます。

参考：Shopify：税の設定

実際の返却値については、テスト注文にて想定どおりの値が取得できることをご確認ください。

カスタムピクセル：購入完了でCV

注文完了をコンバージョン地点とする一般的な計測方法です。
イベントデータから price 値を取得できるため、定率案件にも対応可能です。

通常のコンバージョン計測

購入完了の計測
analytics.subscribe("checkout_completed", evnt => {
var PV = "広告ID";
var SHCO = evnt.data.checkout;
var SHPR = SHCO.subtotalPrice.amount;
var SHTAX = SHCO.totalTax.amount;
var _ARGSV = SHCO.order.id;
var _PRICEV = SHPR - SHTAX;
var KEYS = {cid : ["CL_", "ACT_", "cid_auth_get_type"], plid : ["PL_", "APT_", "plid_auth_get_type"]};
var turl = "https://システムドメイン/track.php?p=" + PV + "&args=" + _ARGSV + "&price=" + _PRICEV;
var cks = document.cookie.split("; ").reduce(function(ret, s){ var kv = s.split("="); if(kv[0] && kv[1]) ret[kv[0]] = kv[1]; return ret; }, []);
turl = Object.keys(KEYS).reduce(function(url, k){ var vk = KEYS[k][0] + PV; var tk = KEYS[k][1] + PV; var v = "", t = ""; if(cks[vk]){ v = cks[vk]; if(cks[tk]) t = cks[tk]; }else if(localStorage.getItem(vk)){ v = localStorage.getItem(vk); t = "ls"; } if(v) url += "&" + k + "=" + v; if(t) url += "&" + KEYS[k][2] + "=" + t; return url; }, turl);
var xhr = new XMLHttpRequest(); xhr.open("GET", turl); xhr.send();});

広告グループでの計測

購入完了の計測（広告グループ利用時）
analytics.subscribe("checkout_completed", evnt => {
var GI="グループID";
var SHCO = evnt.data.checkout;
var SHPR = SHCO.subtotalPrice.amount;
var SHTAX = SHCO.totalTax.amount;
var _ARGSV = SHCO.order.id;
var _PRICEV = SHPR - SHTAX;
var KEYS={cid:["CL_","ACT_"],plid: ["PL_","APT_"]};
var turl="https://システムドメイン/group.php?gid="+GI+"&args="+_ARGSV+"&price="+_PRICEV;
function isIncl(v,l){return v.indexOf(l)===0;}var cks=document.cookie.split("; ");var pm=cks.reduce(function(ret,s){var kv=s.split("=");if(kv[0]&&kv[1]){Object.keys(KEYS).map(function(k){var cpf=KEYS[k][0];var tpf=KEYS[k][1];if(isIncl(kv[0],cpf)||isIncl(kv[0],tpf)){ret[kv[0]]=kv[1];}});}return ret;},[]);
Object.keys(KEYS).map(function(l){var lv=Object.keys(pm).map(function(m) {var n = ""; if(isIncl(m,KEYS[l][1])){ n=m.replace(KEYS[l][1],KEYS[l][0]);}if(pm[n]) {pm[n] +="_"+pm[m];delete pm[m];}});var lks=localStorage;for (var lk in lks) {if(lks.hasOwnProperty(lk) && !pm[lk]) {if(isIncl(lk,KEYS[l][0])) pm[lk]=lks.getItem(lk)+"_ls";}}});
turl=Object.keys(pm).reduce(function(url,pl) {return (url+="&"+pl+"="+pm[pl]);},turl);var xhr=new XMLHttpRequest();xhr.open("GET",turl);xhr.send();});

カスタムピクセル：商品テーブル

商品テーブル設定

購入商品の明細単位で成果を判定できるため、複数の商品が購入された場合でも、商品ごとに報酬を計上できます。

アフィリコード | 商品テーブル追加：計測対象の商品情報（Variant ID）を取得し、商品テーブルIDにセットする
Shopify：商品情報の確認
商品テーブル用のカスタムピクセルを設置する

備考

商品テーブルID は、Variant IDのみ利用可能です。

商品テーブルの計測：variant.id
analytics.subscribe("checkout_completed", evnt => {
var PV = "広告ID";
var SHCO = evnt.data.checkout;
var _ARGSV = SHCO.order.id;
var _PRICEV = SHCO.subtotalPrice.amount;

var KEYS = {cid : ["CL_", "ACT_", "cid_auth_get_type"], plid : ["PL_", "APT_", "plid_auth_get_type"]};

var turl = "https://システムドメイン/track.php?p=" + PV + "&args=" + encodeURIComponent(_ARGSV) + "&price=" + encodeURIComponent(_PRICEV);

(SHCO.lineItems || []).forEach(function(item){
  if (!item || !item.variant || !item.variant.id) return;
  var pgId    = item.variant.id;
  var pgPrice = Math.round(Number(item.variant.price && item.variant.price.amount));
  var pgNum   = item.quantity;
  if (!isFinite(pgPrice) || !isFinite(pgNum) || pgNum <= 0) return;
  turl += "&pg[]=" + encodeURIComponent(pgId + "." + pgPrice + "." + pgNum);
});
var cks = document.cookie.split("; ").reduce(function(ret, s){ var kv = s.split("="); if(kv[0] && kv[1]) ret[kv[0]] = kv[1]; return ret; }, []);
turl = Object.keys(KEYS).reduce(function(url, k){ var vk = KEYS[k][0] + PV; var tk = KEYS[k][1] + PV; var v = "", t = ""; if(cks[vk]){ v = cks[vk]; if(cks[tk]) t = cks[tk]; }else if(localStorage.getItem(vk)){ v = localStorage.getItem(vk); t = "ls"; } if(v) url += "&" + k + "=" + v; if(t) url += "&" + KEYS[k][2] + "=" + t; return url; }, turl);
var xhr = new XMLHttpRequest(); xhr.open("GET", turl); xhr.send();});

カスタムピクセル：報酬テーブル

報酬テーブル設定

特定の商品が購入された場合に、購入商品に応じて報酬を切り分けることができます。

アフィリコード | 報酬テーブル追加：条件に指定する商品情報（Product ID、Variant ID、SKU）を報酬テーブルIDにセットする
Shopify：商品情報の確認
報酬テーブル用のカスタムピクセルを設置する

報酬テーブルの計測：variant.id
analytics.subscribe("checkout_completed", evnt => {
var PV = "広告ID";
var SHCO = evnt.data.checkout;
var SHPR = SHCO.subtotalPrice.amount;
var SHTAX = SHCO.totalTax.amount;
var _ARGSV = SHCO.order.id;
var _PRICEV = SHPR;
var _PTV = evnt.data.checkout.lineItems[0].variant.id;
var KEYS = {cid : ["CL_", "ACT_", "cid_auth_get_type"], plid : ["PL_", "APT_", "plid_auth_get_type"]};
var turl = "https://システムドメイン/track.php?p=" + PV + "&args=" + _ARGSV + "&price=" + _PRICEV + "&pt=" + _PTV;
var cks = document.cookie.split("; ").reduce(function(ret, s){ var kv = s.split("="); if(kv[0] && kv[1]) ret[kv[0]] = kv[1]; return ret; }, []);
turl = Object.keys(KEYS).reduce(function(url, k){ var vk = KEYS[k][0] + PV; var tk = KEYS[k][1] + PV; var v = "", t = ""; if(cks[vk]){ v = cks[vk]; if(cks[tk]) t = cks[tk]; }else if(localStorage.getItem(vk)){ v = localStorage.getItem(vk); t = "ls"; } if(v) url += "&" + k + "=" + v; if(t) url += "&" + KEYS[k][2] + "=" + t; return url; }, turl);
var xhr = new XMLHttpRequest(); xhr.open("GET", turl); xhr.send();});

▼ product.id
var _PTV = evnt.data.checkout.lineItems[0].variant.product.id;

▼ SKU
var _PTV = evnt.data.checkout.lineItems[0].variant.sku;

報酬テーブル利用時の注意点

var _PTV = evnt.data.checkout.lineItems[0].variant.id は、
lineItems配列の先頭要素（1件目の商品）の variant.id を取得しています。

複数の商品が購入された場合、取得される商品はカート内の1商品のみとなります。
ユーザーのカート操作上は、後から追加した商品が先頭になるケースがあります。

そのため、報酬テーブルの利用は、実質的に「1商品のみを購入する運用」が前提になります。

Shopify：チェックアウト（注文情報）の仕様

チェックアウト時の注文情報の構造

「商品（product）の中にバリエーション（variant）がある」という管理画面のイメージとは逆に見えますが、
注文データは「購入した variant を起点として、その親 product を参照する構造」になっています。

lineItems[] 配下の主な項目

event.data.checkout.lineItems[] 配下の主な項目は、以下のとおりです。

Product ID / Variant ID / SKU の違い

項目	管理者	単位	用途例
Product ID	Shopify側で自動付与	商品単位	商品ごとの成果判定
Variant ID	Shopify側で自動付与	バリエーション単位	「チェーンあり／なし」「S/M/L」などの判定
SKU	ショップ運営者が任意に設定	任意	商品単位、バリエーション単位、成果カテゴリ単位など自由に設定可能

各IDの構造

商品：リング（Product ID：100）
├─ Sサイズ（Variant ID：1001、SKU：RING-S）
├─ Mサイズ（Variant ID：1002、SKU：RING-M）
└─ Lサイズ（Variant ID：1003、SKU：RING-L）

商品情報の主な項目

項目	説明	用途例
`id`	明細ID	明細単位の識別
`quantity`	購入数量	個数判定
`title`	商品名	商品名の取得
`variant.id`	バリアントID	バリエーション単位での成果判定
`variant.sku`	SKUコード	SKUによる商品判定
`variant.title`	バリエーション名	色・サイズなどの取得
`variant.price.amount`	商品価格	定率案件の金額取得
`variant.price.currencyCode`	通貨コード	多通貨対応
`variant.image.src`	商品画像URL	商品情報の取得
`variant.product.id`	商品ID	商品単位での成果判定
`variant.product.title`	商品名	商品名の取得
`variant.product.vendor`	販売元	ブランド判定
`variant.product.type`	商品タイプ	カテゴリ判定
`variant.product.url`	商品URL	商品ページへのリンク

event.data.checkout 階層イメージ

event.data.checkout
└─ lineItems[]
   ├─ id
   ├─ quantity
   ├─ title
   ├─ discountAllocations[]
   └─ variant
      ├─ id
      ├─ sku
      ├─ title
      ├─ price.amount
      ├─ price.currencyCode
      ├─ image.src
      └─ product
         ├─ id
         ├─ title
         ├─ vendor
         ├─ type
         └─ url

Shopify：商品情報の確認

報酬テーブル、商品テーブルにセットする各種IDの確認方法を解説します。

商品テーブル：Variant ID のみ利用可能
報酬テーブル：Product ID、Variant ID、SKU を利用可能

1. 管理画面から Variant ID （バリアントID）を確認する

前述のとおり、Shopify の注文データは「購入した variant を起点として、その親 product を参照する構造」になっているため、
バリエーション情報を登録していない商品であっても、内部的に Variant ID が付与されています。

いくつかの確認方法をご案内します。

推奨確認方法 ストア分析 > レポートから確認する：全件（バリエーション登録あり・なし）

販売在庫数のレポートを生成し、バリエーションIDを抽出します。

バリエーションがない商品のバリエーションIDを確認する

① ストア分析 > レポート | 新しい探索を開始 をクリック

レポート > 新しい分析

② 右サイド：フリーフォーム のエリアから、指標・ディメンション・グラフの種類 を設定します

指標 > 在庫｜販売在庫数
ディメンション > 商品 | 商品バリエーションID、商品バリエーションの名前、商品バリエーションのSKU、商品名
グラフの種類 > 表を表示、全ての行を表示をON

レポート > 新しい分析

ディメンションの設定

商品バリエーションIDは、商品を識別するため必須です。
取得したIDがどの商品に紐づくか判別できるよう、必要に応じて商品名やSKUなどの項目を追加してください。

それぞれ設定ごとに、「適用」をして完了します。

ディメンション適用

③ 最後に「保存」ボタンから、生成したレポートを保存します。3点リーダーからデータのエキスポートも可能です。

レポート保存

商品情報のURLから確認する：1件（バリエーション登録あり）

商品管理の一覧から対象の商品をクリックし、商品詳細画面のバリエーション情報を開きます。
バリエーション詳細画面の URL を確認することで、variant.id を確認できます。

Variant ID

テスト購入してピクセルヘルパーから確認する：1件（バリエーション登録あり・なし）

確認する商品をテスト購入し、Pixel helper から確認します。

① 設定 ? > 顧客イベント > カスタムピクセル　該当のカスタムピクセルの３点リーダーから「テスト」を選択します。

カスタムピクセルのテスト

② Pixel helper が起動するので、そのままテスト注文を行います。

Pixel helperの起動

③ 購入完了後、Events received（1）と表示され、イベントが受信されたことを確認します。
その下の「Show」をクリックします。

Pixel helper_Events received

④ 表示されたイベントデータから注文情報の JSON を表示し、variant.id を確認します。

Pixel helper_Variant ID の確認

2. ショップページから Variant ID （バリアントID）を確認する

公開済みの商品は、該当商品のURLに、.js を付与し、展開された商品情報（JSON）から確認できます。

3. 管理画面から Product ID（商品ID）を確認する

商品管理の一覧から対象の商品をクリックし、商品詳細画面の URL を確認することで、product.id を確認できます。

Product ID

4. 管理画面から SKU を確認する

SKU は報酬テーブルで利用できますが、ショップ運営者が任意に設定する項目のため、
日本語などアフィリコード側の ID 制約（半角英数字、-、_ のみ）に適合しない値が設定されている場合があります。

事前にSKUの設定内容を確認するか、商品バリエーションID（Variant ID）の利用を検討してください。

Variant ID

Shopify：税の設定

設定 > 税金と関税 > 追加設定 > 「商品価格と配送料には売上税を含める」の設定有無による price の返却値を比較検証しました。

設定時の参考にしてください。

前提：商品価格 1,980円

No	設定	`price` の値	内容	取得例
①	チェックあり（内税）	1,800	税込1,980円（内税180円）の場合、本体価格1,800円が返却される	`var _PRICEV = SHPR - SHTAX;`
②	チェックなし（外税）	1,782	商品価格1,980円に税額198円が返却される場合、税額を差し引いた1,782円が返却される	`var _PRICEV = SHPR - SHTAX;`
③	チェックあり（内税）	1,980	税込金額が返却される	`var _PRICEV = SHPR;`
④	チェックなし（外税）	1,980	税抜き本体価格が返却される	`var _PRICEV = SHPR;`

税設定

共通設定：ピクセルコードの編集​

カスタムピクセル：購入完了でCV​

通常のコンバージョン計測​

広告グループでの計測​

カスタムピクセル：商品テーブル​

カスタムピクセル：報酬テーブル​

Shopify：チェックアウト（注文情報）の仕様​

lineItems[] 配下の主な項目​

Product ID / Variant ID / SKU の違い​

各IDの構造​

event.data.checkout 階層イメージ​

Shopify：商品情報の確認​

1. 管理画面から Variant ID （バリアントID） を確認する​

2. ショップページから Variant ID （バリアントID） を確認する​

3. 管理画面から Product ID（商品ID） を確認する​

4. 管理画面から SKU を確認する​

Shopify：税の設定​