Installing Osano on a Shopify Custom Storefront

  • Updated
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. 
 
IMPORTANT: for support on installing the customer privacy API on custom storefronts, customers should reach out to Shopify Plus support as this is a Shopify installation. 
 

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.
  2. Without hosting it yourself, you can reference the file from Shopify's CDN url. 

Shopify's Consent API package can be found HERE or on Shopify's vendor documentation.

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.
 
Ex.
checkoutRootDomain: 'store.website.com',
storefrontRootDomain: 'www.website.com',

The storefrontAccessToken can be generated in the Shopify admin or via API.
For more support on generating AccessTokens, please refer to Shopify support. 
 
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: Install the Osano Application for Checkout Functionality

Refer to the standard installation instructions to review the steps for installing the Osano <> Shopify app. 

 

Step 6: Update your CSP

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

Example Code

The below is example code, it can be used as a starting point but might not be suitable for your custom experience.

Please ensure you have filled in all of your site specific information and be sure to test this code before deploying:

 

Standard Example

<script id="shopify-consent-tracking-api-script" src="https://cdn.shopify.com/shopifycloud/consent-tracking-api/v0.1/consent-tracking-api.js"></script>
<script id="shopify-custom-set-tracking-consent-script">
              console.log('Consent Initialization: Inline Shopify Script');
              const setTrackingConsent = window.Shopify.customerPrivacy.setTrackingConsent;
              window.Shopify.customerPrivacy.setTrackingConsent = (function(consentOptions, callback) {
                console.log('Consent: Shopify Wrapped Script: Is recycling "Domain" & "AccessToken" values and re-setting consent values with...', { consentOptions });
                return setTrackingConsent({
                  ...consentOptions,
                  headlessStorefront: true,
                  checkoutRootDomain: 'YOUR-CHECKOUT-ROOT-DOMAIN',
                  storefrontRootDomain: YOUR-STOREFRONT-ROOT-DOMAIN,
                  storefrontAccessToken: 'YOUR-ACCESS-TOKEN'
                }, (e) => {
                  console.log(e)
                })
              }).bind(window.Shopify.customerPrivacy)
            </script>
<script id="osano-script" src="YOUR-OSANO-SCRIPT-URL"></script>
<script id="osano-shopify-ready-script">
              console.log('Consent Initialization: Inline Osano Script');
              try {
                  window.Osano.cm.ready('shopify');
                  console.log('Shopify Privacy API: initialized');
              } catch (error) {
                  console.error('Osano must be loaded before initializing the Shopify API.');
                  console.log('Shopify Privacy API: failed to initialize');
              }
            </script>

 

React Example

<script data-react-helmet="true" type="text/javascript" src="https://cdn.shopify.com/shopifycloud/consent-tracking-api/v0.1/consent-tracking-api.js" data-flag-initizlize-shopify-privacy-api="true"></script>
<script data-react-helmet="true" type="text/javascript" data-flag-initialize-shopify-privacy-api="true">
              console.log('Consent Initialization: Inline Shopify Script');
              const setTrackingConsent = window.Shopify.customerPrivacy.setTrackingConsent;
              window.Shopify.customerPrivacy.setTrackingConsent = (function(consentOptions, callback) {
                console.log('Consent: Shopify Wrapped Script: Is recycling "Domain" & "AccessToken" values and re-setting consent values with...', { consentOptions });
                return setTrackingConsent({
                  ...consentOptions,
                  headlessStorefront: true,
                  checkoutRootDomain: 'YOUR-CHECKOUT-ROOT-DOMAIN',
                  storefrontRootDomain: YOUR-STOREFRONT-ROOT-DOMAIN,
                  storefrontAccessToken: 'YOUR-ACCESS-TOKEN',
                }, callback);
                  console.log('Consent: Shopify Wrapped Script:...did set');
              }).bind(window.Shopify.customerPrivacy)
            </script>
<script data-react-helmet="true" type="text/javascript" src="YOUR-OSANO-SCRIPT-URL" data-flag-initialize-shopify-privacy-api="true"></script>
<script data-react-helmet="true" type="text/javascript" data-flag-initialize-shopify-privacy-api="true">
              console.log('Consent Initialization: Inline Osano Script');
              try {
                  window.Osano.cm.ready('shopify');
                  console.log('Shopify Privacy API: initialized');
              } catch (error) {
                  console.error('Osano must be loaded before initializing the Shopify API.');
                  console.log('Shopify Privacy API: failed to initialize');
              }
            </script>

 

 

Known Limitations

Re: Shopify, it is a known limitation of the Shopify API as of 2024 that consent cannot be updated in the Checkout Experience and passed BACK to the Shopify storefront. Consent can be passed INTO the checkout, but not back OUT. To request this functionality, please reach out to your Shopify Account representative with the above feature request. 

 

Related to