Shopify
Shopify is a website builder that’s growing in popularity, making it quick and easy to set up your online store. Integrating our code snippet-into Shopify is just as simple as creating the store itself.
Integrating CCM19 into Shopify
1. Retrieve the code snippet-from the dashboard
Go to the dashboard for your domain in CCM19. There you will find the code snippet-to integrate CCM19 into your pages. Copy the code to your clipboard to paste it into Shopify in the next step.
2. Shopify-Backend
Log in to your shop’s backend. Navigate to Theme-Settings ① and edit your current theme ②.
Then open the settings using the three dots in the upper left corner ① and click on "Edit code" ②.
Here you can see the files that make up your shop. Under "Layout," you’ll find the file theme.liquid, which you now need to edit ① & ②. Insert the code snippet-from CCM19, which you copied in the first step, after the element, as shown here in the image ③.
3. Testing
Test on the front end of your site to see if the widget now appears. Remember to activate the widget before using it for the first time. (Menu item: Frontend-Behavior)
Customer Privacy API
Shopify offers the option to signal visitor consent for data collection. To this end, Shopify provides the Customer Privacy API, which can be used to communicate the website visitor’s consent—or lack thereof.
In CCM19, these signals are intended to be sent via the "Shopify Pixel" integration. Therefore, this must be present under "Integrations & Cookies" if consent for data collection is to be obtained. In the following example, we assume that a "Shopify Pixel" integration exists in your CCM19-configuration, which will control the consent process.
The basic use of the API is implemented in the following code-block. Insert the script below into a technically necessary integration (for example, the Shopify integration itself, which should be present and always executed) in the "Integration Source Code" field. You can find the integrations under "Integrations & Cookies." If you use our database-entry for "Shopify," the code has already been automatically integrated.
```html
(function () { // Embedding name: Change this value to the name of your "Shopify Pixel" embedding. var embeddingName = 'Shopify Pixel'; // Supported signals: If true, the signal is included in the consent notification. // Set to false if the signal should be omitted. var trackingConsent = { analytics: true, marketing: true, preferences: false, sale_of_data: false, };
var intervals = {};
var shopifyFeaturesLoaded = false;
function updateShopifyCustomerPrivacy() {
if (typeof window.Shopify == 'object'
&& typeof window.Shopify.loadFeatures == 'function'
&& !shopifyFeaturesLoaded
) {
window.Shopify.loadFeatures([{
name: 'consent-tracking-api',
version: '0.1',
}],
function(error) {
if (error) {
throw error;
}
});
shopifyFeaturesLoaded = true;
}
if (typeof window.Shopify == 'object'
&& typeof window.Shopify.customerPrivacy == 'object'
&& typeof window.Shopify.customerPrivacy.setTrackingConsent == 'function'
) {
var accepted = CCM.acceptedEmbeddings.reduce(function (c,i) {
return c || i.name == embeddingName;
}, false);
var signals = Object.keys(trackingConsent).reduce(function (c,i) {
c[i] = accepted && trackingConsent[i];
return c;
}, {});
window.Shopify.customerPrivacy.setTrackingConsent(signals, function () {
console.log('setTrackingConsent', signals);
});
window.clearInterval(intervals.shopifyCustomerPrivacy);
intervals.shopifyCustomerPrivacy = null;
}
}
function updateThirdPartyConsentState() {
if (!intervals.shopifyCustomerPrivacy) {
intervals.shopifyCustomerPrivacy = window.setInterval(updateShopifyCustomerPrivacy, 200);
}
}
window.addEventListener('ccm19WidgetClosed', updateThirdPartyConsentState);
updateThirdPartyConsentState();
})();
```
It is important to note that the value of the embeddingName variable in line 4 must always match the name of the corresponding Shopify-integration in CCM19. If the name of your integration differs, you must replace the string Shopify Pixel with the actual name.
In addition, the Customer Privacy API currently offers four signals to choose from that can be sent once consent has been granted – analytics, marketing, preferences, and sale_of_data. The signals are documented here: https://shopify.dev/docs/api/customer-privacy#collect-and-register-consent.
By default, the code above sends the analytics and marketing signals. Review the linked Shopify-documentation to decide which signals should be sent once consent is granted. In the code above, you can enable or disable the signals to- in lines 8–11—setting true sends the signal, while false does not.
var trackingConsent = {
analytics: true, // signal is sent
marketing: true, // signal is sent
preferences: false, // signal is omitted
sale_of_data: false, // signal is omitted
};


