Installing Osano on Shopify

  • Updated

IMPORTANT: Depending on your installation and store requirements, it may be required for Shopify customers to utilize Shopify's Customer Privacy API alongside Osano's standard services. 

 

To add and configure a cookie banner to your website with Osano, follow these steps:

  1. Install Osano
  2. Enable Shopify Customer Privacy Settings 
  3. Configure Custom Trigger in Shopify

 

Installing Osano on Shopify

 

The following instructions outline the general installation process for Osano on Shopify sites. Please read Osano and the Shopify API for detailed instructions. 

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

Cookie Consent - Get Code

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. 

 

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 cookie consent from your Osano Admin Portal on my.osano.com.

 

Osano and the Shopify API

IMPORTANT: Depending on your installation and store requirements, it may be required for Shopify customers to utilize Shopify's Customer Privacy API alongside Osano's standard services. 

Due to framework restrictions, Osano cannot control Shopify Pixels without the use of the Shopify customer privacy API. 

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 as well as to communicate consent preferences saved in Osano to Shopify. 

To limit tracking or obtain consent from your users, go to Online Store > Preferences > Customer Privacy. Here you can adjust how data is collected in different locations. See details in Shopify's documentation regarding configuring customer privacy settings as well as their docs on their general privacy settings for more details.

 

In your Shopify Settings 

  • Navigate to Settings of your Shopify Admin Dashboard.
  • Select Customer Privacy from the left sidebar and click Cookie Banner. 
  • On the Cookie Banner page, select Use custom cookie banner or "activate cookie banner".
  • From here, choose the regions in which you want the marketing and analytics data to be collected for customers by Shopify and click Confirm. Shopify will collect marketing and analytics data solely upon obtaining consent within the specified regions.
    IMPORTANT: Select ALL regions in which you do business to apply.

Shopify.png

  • Now continue on to ensure Osano is able to interact with the Shopify API. 

 

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:
    <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 th Shopify API.');
    }
    }
    });
    </script>
  • Click Save.

 

Including the Osano 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:
{% render 'osano-shopify' %}
  • Click Save and you are done.

Osano will now be able to send privacy choices to the Shopify Privacy API to utilize when running Shopify-controlled content (i.e. Shopify cookies, scripts, and Pixels). 

 

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

Category Mapping

The Osano cookie consent manager maps to the following Shopify categories:

Osano Shopify

Personalization

Marketing

Analytics

Do Not Sell

Preferences

Marketing

Analytics

Sale of Data

 


 

Shopify FAQs

Q: Does Osano have an app in the Shopify app store?
A: As of April 2024, no - however this is planned for release later in 2024. 

 

Q: Does Osano support Google Consent Mode?

A: Yes, Osano does support Google Consent mode, however, the standard installation of this will only work if you are installing Osano and Google Tag Manager without the use of Shopify Pixels (ex. via the liquid.theme). If you are utilizing any Shopify Pixels, you must configure the Shopify API above as well as configure Google consent mode according to Shopify's documentation. 

 

Q: How can I test if consent is being passed and updated. 

A: You can use the following console log to determine if consent is being passed and, when consent changes within Osano, that it changes in the Shopify API: 

window.Shopify.customerPrivacy.currentVisitorConsent();