Installing Osano on a Shopify Custom Storefront

The Shopify Consent API will be default functionality in Shopify storefronts.
 
If you have a CUSTOM STOREFRONT, the Shopify Consent API will need to be added to the page following Shopify's documentation on custom storefronts. Refer to Osano's standard Shopify documentation for additional installation instructions if utilizing the Checkout Extensibility UI. 
 
NOTE: for support on installing the customer privacy API on custom storefronts, customers should reach out to Shopify Plus support. However, Osano can recommend the following as starting points:
 

Step 1 Download the API

From here, you have 2 options: Host the file yourself (1) or Reference from a CDN (2).
  1. You can download the shopify_customer_privacy.js file and host it locally on your server. Then reference it directly in your app. <script src="/path/to/file/shopify_customer_privacy.js"></script>
  2. Without hosting it yourself, you can reference the file from Shopify's CDN url: <script src="https://cdn.shopify.com/s/files/1/0009/5387/4334/t/2/assets/shopify_customer_privacy.js"></script>
The Consent API must be the FIRST thing to load on the page - before Osano or any subsequent content outlined below.

 

Step 2: Set Domain values

When determining the domain values for the storefront and checkout domains, you'll need to pass them as parameters to the setTrackingConsent method: 
 
<script>
  window.Shopify.customerPrivacy.setTrackingConsent(
    consent,
    {
      headlessStorefront: true,
      checkoutRootDomain: 'your-checkout-domain.com',
      storefrontRootDomain: 'your-storefront-domain.com',
      storefrontAccessToken: 'your-storefront-access-token'
    }
  );
</script>
 
You can find these values by looking at the domain URLs in your Shopify admin under Settings > Online Store > Domains.
 
The storefrontAccessToken can be generated in the Shopify admin as well under Apps > API keys.
Here are the basic steps, but please refer to Shopify support for additional support.
  1. In your Shopify admin, go to Apps > API Keys
  2. Click "Generate API key"
  3. Select "Unrestricted API access"
  4. Copy the generated API key - this is your access token
IMPORTANT: This code should be placed AFTER the consent API is loaded but BEFORE the Osano.js is installed.
 

Step 3: Load Osano.js

Ensure the Osano script is loaded on the page based on the standard installation instructions. In the <head> with NO async or defer attributes. It MUST execute after the above scripts but before the script in step 4.
 

Step 4: Initialize the API

Call loadFeatures on the global window object after the Privacy API script has loaded.
 
<script>
window.Shopify.loadFeatures([{
name: 'consent-tracking-api',   
version: '0.1',
}], function(error){
if (!error) {
  try {
    window.Osano.cm.ready('shopify');
  } catch (error) {
    console.error('Osano must be loaded before initializing the Shopify API.');
  }
}
}); 
</script>
 
In a standard installation, this API initialization would naturally be placed in the <body> near the </body> tag. Ensure it loads AFTER the Osano script has fully executed.

 

Step 5: Update your CSP

Allow API calls to POST to checkout domain in your Content Security Policy.
 
 

Related to