| Help Center

Integrations

Learn how to integrate a custom cookie banner on your custom domain

Discover how to use the Google Tag Manager integration to create a personalized cookie notice.

1. Requirements before we begin

To do this easily, we are using a cookie management platform. That means we don't need any coding knowledge along the way. For implementation, we need a Google Tag Manager container connected with our Flipsnack profile (if you haven't done this already, please check our article on how to connect your profile to Google Tag Manager) and an account on one of the cookie management platforms.

Also, before you start make sure that you have a custom domain, or subdomain, set up. Applying the following steps on an enterprise account with no custom domain will create a conflict with Flipsnacks’ cookie policy notice resulting in having two banners at the same time. In case you want to know how to set that up we made two articles that will show you how to get a domain and how to get it up and running.

There are many choices on the market for consent management integrations, but the one I'm going to showcase here is CookiePro. Although the initial setup might be more complex than other options, they offer a comprehensive solution for customization and policy creation.

In case you are looking for something with a more user-friendly implementation process, and you don’t mind the extra limitations or are willing to buy a subscription, I’d recommend checking out Cookie Bot, Commanders Act, and Consent Manager. These three platforms feature a Tag Manager community template and the new consent initialization mode made by Google.

Ideally, you would want to use the same cookie management platform you already use on your main website if you have one. Just make sure it has Tag Manager Integration a tutorial on how to set it up.

Let’s make a short recap of everything you’ll need:

Flipsnack Enterprise account;
Google Tag Manager container, connected to your profile;
Custom domain or subdomain for your profile;
A free account for CookiePro by OneTrust.

2. Sign up for a Cookie Pro account and add your website

The free edition of Cookie Pro offers everything we need for our use case. If you are looking for advanced options to add to your website, you can check their pricing plans for more information about their consent solutions.

For the time being, let's create a free account by filling this sign-up form.

After validating your account, we need to sign in and add your domain. Click on cookie compliance in the My Apps section of the Welcome page and then Add Websites. Enter the URL of your domain and click on More Details.

To decrease the amount of time it takes to scan your website for cookies I’d suggest setting a page limit of about the number of flipbooks on your profile. If you don’t have any yet, one page is fine since we can rescan our cookies later on.

Wait until the scanning process is complete, and then we can move on to making our first banner template.

3. Personalize your cookie banner

In the left-hand menu, select Templates and then Add New on the left top corner. Select the framework and laws you wish your policy to comply with, and start customizing your notice banner, the preference center, and cookie list.

Personalize your cookie banner using CookiePro

4. Configure Geolocation & Language

Now that we have our first banner, it's time to choose where we want that banner to show up. Different countries have different laws in terms of cookie policy. By using the Geolocation Rules, we can change our templates according to the IP address of your visitors, making sure you comply with regional regulations.

To create a new rule, go to Geolocation Rule Group click Create New in the top right corner. By default, CookiePro will create a global location rule for you, and the template associated with it shows up when the IP address is unknown.

Configure geolocation & language in CookiePro account

Now that we have a template in place and our default Geolocation Rule we effectively have all we need for a functional cookie banner.

If this is all you need you can skip straight to section five where I show how to make the banner appear on your site. The following sub-sections will show how to dynamically change the banner template and language according to different parameters.

4.1 Different templates for different locations

If you go to the geolocation rule group and click on Add rule, you can change how your banner is displayed based on the chosen region. For example, let's say you want to show a GDPR banner in the EU and a generic banner for visitors accessing the site from locations outside it.

To do so, we need to add a new template for our banner. Go through the same steps as the previous chapter. This time though, choose the GDPR framework. Customize it and save it.

Now go to Geolocation Rules, access your group, and make a new rule. Select EU in the region field. Make sure that you check the Show Banner field. Now choose the recently made template in the row underneath.

Different templates for different locations available in CookiePro

And now we have two different banners, one of which is compliant with the GDPR laws and shows up only in EU countries. Assign your Geolocation Rule Group to your domain by selecting the three-dot menu. I will appear when hovering over the group's name.

Assign geolocation rule group to your domain in CookiePro

4.2 Language change

Cookie Pro also offers automatic translation for your banner. But I have to explain the way language delivery works here before we move on. The platform can choose the language of your notice in one of three ways: by detecting the language used by the browser setting, detecting the language used on the page, and identifying the IP address.

Given that the language code of our custom white-label profile doesn't change that much, our best options are to either rely on the browser settings or the IP address for language selection.

Browser settings are a great option if you want to personalize message delivery for the end-user. For example, people living abroad will receive a notification in the language they have set their browser to, instead of the native language used by their country of residence.

Do this by going to Templates. Click on the template you want to translate and then add a new language by clicking Manage Languages. After adding a new language, you can customize it by selecting it in the Language dropdown next to the button.

As you can see below, CookiePro automatically translates your text to the appropriate language. You only need to customize the appearance and change the Cookie Policy link towards the suitable language version.

If you need complex language translation and dynamic selection (via IP address), I would recommend going for the paid solution provided by CookiePro.

But if you want to manage up to three or four translations, you can create a new template for each one and assign it with the appropriate geolocation rule. To make this possible, you have to create a separate template for each language and then select a different geolocation rule. Check the template has only one language; if not, the system will automatically change your language according to the browser setting.

5. Test and put your cookie banner script on the site

Once we have our banner ready and configured the desired behavior, we can get the script that will appear on our site via Tag Manager. In the menu on the right side of the page, look for Integrations at the bottom, then click Scripts.

Click on your domain and, a page containing instructions will open. Look for the test script and production script tabs at the top of the page. The difference between the Test Script and the Production Script is how they deliver content to your website.

Use the Test Script if you are still making changes to your banner and need to view them in real-time. The test script shows modifications made to the cookie banner instantly but will load slower on the page. Use the production script once you have the final version of your work since it takes longer for any change made to it to appear on the site.

Since you haven't seen how your banner looks yet, go to the Test Script tab and copy the code from there. We need this code for Google Tag Manager.

Copy the test script code from the CookiePro account

Now open Google Tag Manager and enter the container you have connected to the Flipsnack profile. Create a new tag and select a custom HTML tag from the tag configuration menu. Paste your script there and tick Support document.write. Go to the trigger menu and select all pages. Preview your changes and see if your trigger fires. If everything works, submit your changes in Google Tag Manager.

Paste the text script code in Google Tag Manager

Back on the CookiePro app, publish your test script by clicking the Publish Test button.

Visit your profile and check if everything works as intended. Make any changes necessary, and once you think you are ready, head to the production script tab.

Now you can press the Publish Production button to deploy the banner.

Click confirm on the menu and, before you publish, scroll down to enable cookie auto-blocking and language detection. The auto-blocking feature stops analytic and marketing cookies from working until consent is given by the user. For the language setting, you want to click on Enable Language Detection on Scripts and select Determine the language from site visitor's browser settings.

Language settings for custom cookie banner

Now paste the production script over the test script by editing the custom tag and submitting your changes in Tag Manager.

And there you have it. Your very own cookie banner. The only thing left to do is to remove the Flipsnack default banner by accessing the Branding Options in your Flipsnack account. You can find the option at the bottom of the Settings page as Show cookie policy link.

Enable show cookie policy link in Flipsnack account