How can the app integrate with Google Consent Mode?
In order to implement the integration with Google Consent Mode for our app, you would need to take the following steps:
Open Shopify Admin.
Click on Online Store link in the left menubar.
Click on the Actions dropdown button and select Edit Code from there.
A new page will open with a list of files on the left side of the screen. Locate the Assets folder and click on it in order to expand it. After that, click on Add a new asset and upload the file consentmo-gcm-blocking-script.js provided under this step.
Download - consentmoGDPR-gcm-blocking-script.js
4.1. (Optional step) In the file you just uploaded, there is a property called initialState. This property is reponsible for setting the categories in Google Consent Mode's default consent to either granted or denied.
By default the initialState property is set to 7, which means that the categories in the default consent will be set to denied and Google Consent Mode will initially block all tracking services before the customer gives his consent.
Under the initialState property, you will find a comment with the acceptable values that can be applied to the initialState property, as well as information about which categories will be set to granted or denied depending on the value chosen.
After applying the file to the Assets folder, open the theme.liquid file.
Find the opening tag of the head HTML elment - <head> in the theme.liquid file.
Copy the line of code provided below and paste it as close to the opening head tag ( <head> ) as possible.
Note: The line of code should be placed close to the opening head tag as the Google Consent Mode needs to be executed before the other tracking services ( Google Tag Manager, Google Ads, etc.).
The final result should look like this:
Navigate to your Google Tag Manager's Container Settings and click on the Enable consent overview checkbox in order to enable the tags' consent configuration.
Once this is done, the integration of the Google Consent Mode with our app will be successfully set in your store. If you want to test if the integration was successful, please check the article
How to test the app's integration with Google Consent Mode?
For further information on how our app works with Google Consent Mode, continue reading the text below:
Google Consent mode has two variants.
There are the default settings that the page will use while waiting for the user’s consent status to be given.
When your customers visit your store, the integration we provided will initially run the default settings and populate the ad\_storage and analytics\_storage in the dataLayer to granted or denied depending on how the option Initial State Of The Cookie Bar is set.
Note that the services will be blocked, but the services' tags will be fired. This is not an issue and it is how Google Consent Mode works.
Then there are the update settings that are sent as soon as consent has been given.
After that, when your store visitor gives his consent by accepting the Cookie bar, the updated settings will set ad\_storage and analytics\_storage to granted or denied depending on which cookie categories the visitor chooses to block. If no cookie categories are blocked, Google Tag Manager will unblock the services by setting their cookies to the visitor's browser.
Note also that the services that have built-in consent checks are Google Analytics, Google Analytics 4, Google Ads, Google Floodlight, and more.
Open Shopify Admin.
Click on Online Store link in the left menubar.
Click on the Actions dropdown button and select Edit Code from there.
A new page will open with a list of files on the left side of the screen. Locate the Assets folder and click on it in order to expand it. After that, click on Add a new asset and upload the file consentmo-gcm-blocking-script.js provided under this step.
Download - consentmoGDPR-gcm-blocking-script.js
4.1. (Optional step) In the file you just uploaded, there is a property called initialState. This property is reponsible for setting the categories in Google Consent Mode's default consent to either granted or denied.
By default the initialState property is set to 7, which means that the categories in the default consent will be set to denied and Google Consent Mode will initially block all tracking services before the customer gives his consent.
Under the initialState property, you will find a comment with the acceptable values that can be applied to the initialState property, as well as information about which categories will be set to granted or denied depending on the value chosen.
After applying the file to the Assets folder, open the theme.liquid file.
Find the opening tag of the head HTML elment - <head> in the theme.liquid file.
Copy the line of code provided below and paste it as close to the opening head tag ( <head> ) as possible.
Note: The line of code should be placed close to the opening head tag as the Google Consent Mode needs to be executed before the other tracking services ( Google Tag Manager, Google Ads, etc.).
<script async src="{{ 'consentmoGDPR-gcm-blocking-script.js' | asset_url }}"></script>The final result should look like this:
Navigate to your Google Tag Manager's Container Settings and click on the Enable consent overview checkbox in order to enable the tags' consent configuration.
Once this is done, the integration of the Google Consent Mode with our app will be successfully set in your store. If you want to test if the integration was successful, please check the article
How to test the app's integration with Google Consent Mode?
For further information on how our app works with Google Consent Mode, continue reading the text below:
Google Consent mode has two variants.
There are the default settings that the page will use while waiting for the user’s consent status to be given.
When your customers visit your store, the integration we provided will initially run the default settings and populate the ad\_storage and analytics\_storage in the dataLayer to granted or denied depending on how the option Initial State Of The Cookie Bar is set.
Note that the services will be blocked, but the services' tags will be fired. This is not an issue and it is how Google Consent Mode works.
Then there are the update settings that are sent as soon as consent has been given.
After that, when your store visitor gives his consent by accepting the Cookie bar, the updated settings will set ad\_storage and analytics\_storage to granted or denied depending on which cookie categories the visitor chooses to block. If no cookie categories are blocked, Google Tag Manager will unblock the services by setting their cookies to the visitor's browser.
Note also that the services that have built-in consent checks are Google Analytics, Google Analytics 4, Google Ads, Google Floodlight, and more.
Updated on: 12/09/2023
Thank you!