GDPR/CCPA Setup Guide - Part 2

April 22, 2021
gdpr ccpa setup guide app shopify compliance cookie banner cookie bar shopify ookies cookies

In part two of our setup guide overview, we will continue with the next three steps that we recommend you follow in order to make your store GDPR/CCPA compliant. Let’s jump right in: 

Step 4: Blocking the Google Tag Manager, Google Analytics, and Facebook Pixel.

Google Tag Manager can be blocked with an additional script based on a Container ID.

Check the instruction on how you can apply the script:

  1. Navigate to Online Store.

  2. Click on the "Action" dropdown button

  3. Select "Edit Code" from there.

        4. A new page will open with a list of files on the left side of the screen. Open the "theme.liquid"

        5. Find where you have set the script for GTM in the "<head>". It should look similar to this:

      6. After you have located the script, copy its contents between "<script>" and "</script>" and paste them here:

<script>
function checkGDPRGTM() {
if (window.isenseGDPR !== undefined && window.isenseGDPR.Cookies.get('cookieconsent_preferences_disabled') !== undefined) {
let cookie = window.isenseGDPR.Cookies.get('cookieconsent_preferences_disabled');
if (cookie.indexOf('analytics') == -1) {
<!--YOUR COPIED CODE HERE -->
}
} else {
setTimeout(function() {
checkGDPR();
}, 500);
}
}

checkGDPRGTM();
</script>

When you are done the final result should look like this:

Google Analytics blocking - On each page load our GDPR/CCPA app deletes the Google Analytics cookies. However, those cookies are created again on the next page load. As we are constantly deleting the cookies each page load is considered a new visitor session. That way, Google cannot fully track what the customer is doing on your web store. We are using this method due to Shopify's limitations preventing us from getting the tracking codes for each store. Although, there is one more thing you can do if you want to add additional protection for your visitors.

Follow the steps below:

  1. Navigate to Online Store.

  2. Click on the "Action" dropdown button

  3. Select "Edit Code" from there.

      4. A new page will open with a list of files on the left side of the screen. Open the "theme.liquid"

      5. Find the string "</head>" in there.

      6. When you do, add the following snippet before "</head>":

<script>
var gaProp='UA-XXXXXX-X';
var iac=(document.cookie.match(/^(?:.*;)?\s*cookieconsent_preferences_disabled\s*=\s*([^;]+)(?:.*)?$/)||[,null])[1];
if(iac!=null&&iac.indexOf('analytics')>= 0){window['ga-disable-'+gaProp]=true;}
 <!-- YOUR COPIED CODE HERE -->
}
</script>

Note: Make sure to replace the "UA-XXXXXX-X" string with your Google Analytics tracking ID. If you are using Google Analytics 4, make sure to replace the "UA-XXXXXX-X" string with your Measurement ID, which should be in the format "G-XXXXXXX".

       7. After you add the snippet click on the Save button.

Facebook Pixel blocking - to make an additional cookie blocking for Facebook Pixel the steps you should follow are as follows:

  1. Click on the Online Store link in the left menu bar.

  2. Click on the "Action" dropdown button 

  3. Select "Edit Code" from there.

       4. A new page will open with a list of files on the left side of the screen. Open the "theme.liquid"

      

       5. Find the string "</head>" in there.

       6. When you do, add the following snippet before "</head>":

<script>
!function(){var e=null,n=[],t=(document.cookie.match(/^(?:.*;)?\s*cookieconsent_preferences_disabled\s*=\s*([^;]+)(?:.*)?$/)||[,null])[1];
Object.defineProperty(window,"fbq",{get:function(){return e},set:function(o){Object.defineProperty(o,"queue",{get:function(){return null!=t&&t.indexOf("marketing")>=0?[]:n},set:function(){}}),e=o}})}();
 <!-- YOUR COPIED CODE HERE -->
}
</script>

   

       7. After you add the snippet click on the Save button.

Limit tracking for customers is an additional cookie blocking option that Shopify offers. This feature limits Shopify’s tracking of online store customers and notifies any third-party apps that you have installed in your store to limit their tracking. You can enable it for customers in Europe by following these steps:

  1. In your Shopify admin, click Online Store.

  2. Click Preferences > Customer privacy.

  3. Click Limit tracking for customers in Europe.

When the additional cookie blocking has been added to Google Analytics or Facebook Pixel through our app, you can go and click on the Limit tracking for customers in Europe option, as well. That way Shopify will make additional cookie blocking to Google Analytics and Facebook Pixel including on the Checkout page.

Your customers in California can opt out of the sale of their data, too. You can enable Limit the third-party sale of your California customers’ data in your Shopify store settings. You are able to do it with just a few clicks:

  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.

You have to be aware that when you share your customer’s data with third parties, Shopify can't control how the data is used. It can only inform how data should be handled.

Implementing Facebook Flag for Limited Data Use (LDU) - this feature will give businesses more control over how their data is used in Facebook's systems. LDU flag has to be set once a customer opts out of the Marketing cookie group in order for this feature to function. This flag indicates that Facebook should limit the use of the customer's personal data. We have created a script that will be triggered once the visitor opts out from the marketing cookies. The script will set the flag in regard to the LDU.

Follow the instructions to implement the script:

      1. Navigate to Online Store link in the left menu bar.

      2. Click on the "Action" dropdown button

      3. Select "Edit Code" from there.

     4. A new page will open with a list of files on the left side of the screen. Open the "theme.liquid" file.

     5. Find the string "</head>" in there.

     6. When you do, add the following snippet before "</head>":

<script>
var iac=(document.cookie.match(/^(?:.*;)?\s*cookieconsent_preferences_disabled\s*=\s*([^;]+)(?:.*)?$/)||[,null])[1];null!=iac&&iac.indexOf("marketing")>=0&&"function"==typeof fbq&&fbq("dataProcessingOptions",["LDU"],0,0);
 <!-- YOUR COPIED CODE HERE -->
}
</script>

Step 5: Configuration of the GDPR/CCPA Compliance pages on your store

GDPR/CCPA pages are automatically generated after you install and enable the app and include the necessary GDPR/CCPA tools for your store to be compliant with the EU/CCPA laws.

Here is how you can access your GDPR/CCPA page:

  1. Navigate to Global Settings

  2. Click on View your GDPR Page Or View your CCPA page

We recommend you add the GDPR/CCPA page to your store footer. That way your website visitors will have easy access to them and request all kinds of different information for their account data. Follow the steps below to see how you can do that:

  1. In the Shopify Admin click on Online Store

  2. Click on Navigation

  3. Choose Footer Menu

      4. Then click on Add menu item. A window will appear and you have to fill in the name of the item and choose the page that you want to be in your store footer menu. After you do that click on the Save menu button and visit your storefront to see the result in the footer section.

Adding a name to the item

Choosing a page

Adding to the footer menu

GDPR page on the storefront footer 

Step 6: Give the option to visitors to withdraw consent

Withdrawing your consent should be as easy as giving it. That is why we recommend you add a link or a button to a page that will trigger the preferences popup again on your website. Thus your website visitor will be able to change their preferences.

You can easily do that by adding a button or a link to your Privacy Policy page:

 Script for adding a Button to a page

<script>
<a class="btn btn--secondary" onclick="jQuery('.cc-settings-view').fadeIn('300');">Cookie Preferences</a>
</script>  

Script for adding a link to a page

<script>
<a onclick="jQuery('.cc-settings-view').fadeIn('300');">Cookie Preferences</a>
</script>  

Note: Keep in mind that due to limitations from Shopify the code will not work if you try to add it to a Legal page (Settings > Legal).

We would recommend adding it to a page that is not from type "Legal", for example: "About Us", "Terms and Conditions", etc. You can also create a Privacy Policy page yourself. Here are the steps to do so:

  1. Navigate to Online Store

  2. Click on Pages

  3. Click on Add page

      4. Then add a name and content on the page.

      5. Click on the Show HTML and add the snippet for the button or the link in a place of your choosing, preferably with some explanation text before that, and click Save.

You have to add your Privacy Policy page to your Admin menu or Footer menu, depending on your preferences. That way your website visitors will be able to easily access it.

See how the added button or link will look like on the page:

Button

Link

And that's all there is with the setup guide.

Here is the GDPR/CCPA Setup Guide - Part 1 in case you have missed it.

For more details you can check our dedicated YouTube playlist and the How to set up the GDPR/CCPA app - video tutorials blog post.

If you have any specific questions, do not hesitate to contact us via chat or email. You can also check our FAQ page.

Join 11,000+ subscribers receiving actionable E-commerce advice

* Unsubscribe any time

Trending blogs

comments powered by Disqus