Installing Osano on Shopify

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

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

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.

Shopify

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

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:

In your Shopify admin, click Online Store.
Click Preferences > Customer privacy.
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:

In your Shopify admin, click Online Store.
Click Preferences > Customer privacy.
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

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