Installing Osano on Shopify

Shopify is a popular ecommerce platform. Osano works with Shopify. Here's how to use Osano with Shopify.

Installing the Osano.js

After creating and publishing your configuration, the "Get Code" button will become active. This button will provide you with the osano.js.

Copy Osano JS button

To install, copy, and paste the osano.js into the page head [<head>] for all sites you wish to monitor. Ensure that the osano.js is the first script that loads on your site. 

Example of Osano.js installed

Osano is platform-agnostic, which means the code can be added to the <head> of any site and utilized without any additional configuration. 

Once the osano.js is in your site's <head>, it can take a few minutes to a few hours before the script has captured and reported cookies and scripts that exist across your sites. 

Once you have collected enough reports from osano.js, you can work with your other business units to identify and classify all cookies/scripts/and local storage items. This exercise ensures that no "strictly necessary" scripts, cookies, or local storage get blocked.

We recommend users remain in "Listener" mode until you have added the osano.js into your site and have discovered and classified all relevant scripts and cookies. 

Osano discovery and listener mode.

 

In Listener mode, the consent manager will NOT block any scripts or beacons. It will NOT delete cookies. It will NOT display dialogs to your visitors. In other words, it will not alter your site in any way. You can use Osano in "Listener" mode and another CMP simultaneously if you migrate away from another provider. This way, there are no gaps in compliance.

After you have categorized each script and cookie appropriately, you can enable Permissive or Strict Mode and publish these changes. 

You will now see the consent dialog on your website!

Shopify

Note: This is ONE way of adding the Osano code onto your Shopify site. Other methods can be used. Ex. Shopify Apps to add custom code to Header/Footer. Most site builders will have plugins for adding custom code to the header/footer. 

  • Step 1: Navigate to the edit code section of your theme by going to Online Store > Themes > Actions (next to your current theme) > Edit Code > Navigate to your theme code.
  • Step 2: Under the Layout section of the code editor, select theme.liquid
  • Step 3: Find the <head> section of the theme.liquid file. Note that some themes will use a variation of this, such as {head}, [header], or [head]
  • Step 4: Copy and paste the osano.js into the <head> before any other <script> on the page
  • Step 5:  Click save to deploy your newly added Osano code

Once deployed, you can manage the Osano popup entirely from your Osano Admin Portal on my.osano.com.

 

Osano and the Shopify API

It is recommended that Shopify customers utilize  Shopify's Customer Privacy API alongside Osano's standard services. 

The customer privacy API is a browser-based, JavaScript API that enables developers to read and write Shopify cookies related to a buyer's consent to be tracked.

In Shopify Settings: 

Ensure you have the proper settings enabled. 

  • Limit the tracking for GDPR
  • Limit the tracking for CCPA

To limit the tracking of European customers visiting your online store, as determined by their IP address, you can enable Limit tracking for customers in Europe in your Shopify store settings. 

Steps:

  1. In your Shopify admin, click Online Store.

  2. Click Preferences > Customer privacy.

  3. Click Limit tracking for customers in Europe.

To limit the third-party sale of California customers’ data, you can enable Limit the third-party sale of your California customers’ data in your Shopify store settings. 

Steps:

  1. In your Shopify admin, click Online Store.

  2. Click Preferences > Customer privacy.

  3. Click Limit the third-party sale of your California customers’ data.

If your account does not have access to these settings, please reach out to your Shopify Support contact. 

Installing Osano on Shopify

Note: This is ONE way of adding the Osano code onto your Shopify site. Other methods can be used. Ex. Shopify Apps to add custom code to Header/Footer. Most site builders will have plugins for adding custom code to the header/footer. 

  • Step 1: Navigate to the edit code section of your theme by going to Online Store > Themes > Actions (next to your current theme) > Edit Code > Navigate to your theme code.
  • Step 2: Under the Layout section of the code editor, select theme.liquid
  • Step 3: Find the <head> section of the theme.liquid file. Note that some themes will use a variation of this, such as {head}, [header], or [head]
  • Step 4: Copy and paste the osano.js into the <head> before any other <script> on the page
  • Step 5:  Click save to deploy your newly added Osano code

Once deployed, you can manage the Osano popup entirely from your Osano Admin Portal on my.osano.com.

Interacting with the Shopify API

  • From your Shopify admin, go to Online Store > Themes.
  • Click Actions, and then click Edit Code.
  • Under the Snippets folder, click on Add a new snippet link to create a new snippet
  • Fill the snippet name – osano-shopify to the field on the dialog and click Create snippet button.
  • In the online code editor, please paste the below code:
    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 th Shopify API.');
    }
    }
    });
  • Click Save.

Step 2: Include the snippet

  • Under the Layout folder, click onto theme.liquid to open the file editor.
  • In the online code editor, scroll down the page until you find the close body tag.
  • Paste the following  code just before the tag:

  • Click Save and you are done.

IMPORTANT: All cookies that are set by Shopify on the initial HTML request response in the headers cannot be fully blocked. The following Shopify cookies will ALWAYS load. Shopify will determine if these cookies will be persistent or session cookies. 

  • _shopify_y
  • _shopify_s_
  • _landing_page