Shopify（ショッピファイ）のタグ設定手順です。
※ご注意※
①CVタグ内「's000000********'」の部分は、貴社の＜プログラムID＞を入力する必要がございます。
＜プログラムID＞は「件名：A8.netお申込書受領に関するご連絡」のメールに記載しております【sから始まる15桁のID】となります。
ご確認の上、代入をお願いいたします。
※＜広告主ID＞とお間違えのないようにお気を付けください。
②事前にshopifyカートのアップデートの実施をお願いいたします。
※アップデート済みかどうかの確認方法※
設定＞お客様のイベント＞カスタムピクセルを追加
と進み、web pixelsの編集画面にてカスタムピクセルの追加ができる
※アップデートが出来なかった場合は営業担当へお問い合わせください。
設定手順１：headタグの設定
以下タグをサイト内全ページへご設置ください。
▼<head>内にご設置頂くタグ <script src="//statics.a8.net/a8sales/a8sales.js"></script><script src="//statics.a8.net/a8sales/a8crossDomain.js"></script><script src="//statics.a8.net/a8sales/a8shopForm.js"></script>
※確実に読み込ませる為、<head>内上部へのタグ設置を推奨しております。
※JavaScriptなどでこのタグを動的に生成してもよいですが、そのときに<noscript>で囲わないように設定をお願いします。
※3本のタグのうち後者2本はドメインをまたぐサイトでも成果計上を正常に行うためにご設定が必要なものとなります。
ドメインをまたがないサイトである場合も、今後のトラッキング漏れリスクの軽減のため設定を推奨はしておりますが、余分なタグのご設定をご希望されない場合は、省いていただいても問題ございません。
設定手順２：CVタグの設定（Shopify管理画面経由）
ホーム 設定＞ストアの詳細＞お客様のイベント＞カスタムピクセルを追加
→A8CVタグとわかる任意の名前にてタグを設定し「保存」 →「連携」を押下
※ピクセル追加画面にはデフォルトで文言が入っていますので、
タグ設定前に改行し、その文言とは行間をあけたうえで
以下A8CVタグの設置をお願いいたします。
▼設定いただくタグ
const pgid = 's000000********';
const isCrossDomain = true;
const a8salesScript = 'https://statics.a8.net/a8sales/a8sales.js';
const a8crossScript = 'https://statics.a8.net/a8sales/a8crossDomain.js';
analytics.subscribe("page_viewed", async (event) => {
insertScript(a8salesScript, null);
log('a8salesScript loaded.');
if (isCrossDomain) {
insertScript(a8crossScript, null);
log('a8crossScript loaded.');
}
});
analytics.subscribe("checkout_completed", async (event) => {
log('checkout_completed event start');
const currency = 'JPY';
let orderNo = '';
const co = event.data.checkout;
log("event.data.checkout", co);
if (co.order.id) {
orderNo = co.order.id;
}
let itemArray = [];
let totalOrderDiscount = 0;
let subtotal = 0;
co.lineItems.forEach((item) => {
let discountEach;
let discountAcross;
[discountEach, discountAcross] = sumDiscountsPerItem(item);
const finalItemPrice = item.variant.price.amount * item.quantity - discountEach;
const calcUnitPrice = finalItemPrice / item.quantity;
subtotal += finalItemPrice;
totalOrderDiscount += discountAcross;
itemArray.push({
"code": item.variant.product.id,
"price": calcUnitPrice,
"quantity": item.quantity
});
});
const a8salesObj = {
"pid": pgid,
"order_number": orderNo,
"currency": currency,
"items": itemArray,
"amount_priority": "total_price",
"total_price": subtotal - totalOrderDiscount
};
log("a8sales", a8salesObj);
insertScript(a8salesScript, function () {
a8sales(a8salesObj);
});
log('checkout_completed event end');
});
function insertScript(src, onload) {
let span = document.createElement('span');
span.id = 'a8sales';
document.getElementsByTagName('body').item(0).appendChild(span);
let f = document.getElementsByTagName('script').item(0), j = document.createElement('script');
j.src = src;
j.async = true;
if (onload) {
j.onload = onload;
}
f.parentNode.insertBefore(j, f);
}
function sumDiscountsPerItem(item) {
let discountEach = 0;
let discountAcross = 0;
if (item && item.discountAllocations) {
item.discountAllocations.forEach((alloc) => {
if (alloc.discountApplication && alloc.discountApplication.allocationMethod === "EACH") {
discountEach += alloc.amount.amount;
} else {
discountAcross += alloc.amount.amount;
}
});
}
return [discountEach, discountAcross];
}
function log() {
console.log('[a8.net pixel v4.0.25]', ...arguments);
}
※KOMOJU決済が入っている場合の注意事項※
決済会社の支払い完了ページから貴社の完了ページ（タグ設置ページ）に自動遷移しない場合がございます。
その際は、以下手順にて貴社の完了ページに自動遷移させる設定が必要となりますため、
以下ご対応いただきますようお願いいたします。
▼設定手順
KOMOJU Liveモードで「設定」＞「編集」＞「クライアントの編集」画面を開く
「完了ページをスキップ」にチェックを入れ、最下部の「クライアントを更新」ボタンをクリック
▼参考URL
https://komoju-ja.helpscoutdocs.com/article/262-article