Shopifyにバナーを追加し、Shopify GDPR APIを使用する

ShopifyにはGDPRの設定があり、ShopifyバックエンドのPreferencesで有効にすることができます。詳しくはこちらをご覧ください。

私たちは、私たちのクッキーバナーと関連してShopify APIを使用するために、あなたのウェブサイトに追加するヘルパースクリプトを構築しました。

このスクリプトをtheme.liquidファイルに置き、Shopifyトラッキングを有効にするために、どのカテゴリーまたはスクリプト識別子（粒状同意モードを使用している場合）を受け入れる必要があるのかを記入します。

ファイルの一番下にバナーAPIコードを記入し、あなたのサイトでバナーを有効にしてください。

<!-- Begin CookieFirst Shopify GDPR Api -->
<script>
window.Shopify.loadFeatures(
[
{
name: "consent-tracking-api",
version: "0.1",
},
],
function (error) {
if (error) {
console.error(error);
return;
}

function handleCFConsent(event) {
var consent = event.detail;
var required_categories = [
"performance",
// if using Category based consent fill in any of the categories: performance, advertising or functional
// if using Granular consent, add Zendesk in your scripts area. Use 'custom' code. And put the script identifier above.
];

var is_accepted = true;
for (var i = 0; i < required_categories.length; i++) {
var category = required_categories[i];
if (!consent || !consent[category]) {
is_accepted = false;
}
}

window.Shopify.customerPrivacy.setTrackingConsent(is_accepted, function() {});
};

window.addEventListener("cf_consent", handleCFConsent);
window.addEventListener("cf_consent_loaded", handleCFConsent);

// if you want to show the banner to all visitors, not only EU-visitors, change false to true
var show_outside_eu = true;
var show_banner = show_outside_eu || window.Shopify.customerPrivacy.shouldShowGDPRBanner();


if(show_banner) {
var banner = document.createElement("script");
banner.setAttribute(
"data-cookiefirst-key",
"API KEY HERE"
);
banner.src = "https://consent.cookiefirst.com/banner.js";
document.head.appendChild(banner);
}
}
);
</script>
<!-- End CookieFirst Shopify GDPR Api -->