Marketing Hack: Cookie bar for Instapage

Life Hack for Marketers

How to create a highly visible and GDPR-compliant cookie banner on Instapage.

The GDPR has made life a bit harder for us marketing managers. On the one hand, we need tracking to repeatedly find interested persons in the expanse of the internet and, on the other hand, it isn’t permitted without the consent of our potential customers. So far, so good; or maybe not.

Many tools marketers use for their work have already been excellently adapted to the European Data Protection Regulation. Then there are tools we actually urgently need, but do not take the entire GDPR into account. For instance, Unbounce, a great tool we initially used for our landing pages. Unfortunately, we were informed by an external agency that Unbounce is not GDPR-compliant. And we had to continue our search for a new tool. Based on recommendations and reviews, we found Instapage.

We love using this tool for our landing pages!

Nonetheless, we had to adapt the cookie banner because – while it is technically correct from a GDPR perspective –  we lost too many trackings because the cookie banner is not ideally placed and does not necessarily have to be clicked.

Here is our summary of how to create highly visible and GDPR-compliant cookie banners for Instapage in just a few minutes:

Instructions

1. Click the desired landing page and click EDIT DESIGN

2. Click HTLM / CSS

3. Insert the following code into the head block and then click SAVE.


#ip-user-consent {
     top: 50%;
     left: 50%;
     bottom: auto;
     transform: translate(-50%, -50%);
}

4. Click JavaScript

5. Insert the following code into the head block and then click SAVE.


window.onload = function() {
     var userConsentWrapper = document.getElementById("ip-user-consent");

     if (!userConsentWrapper || userConsentWrapper.classList.contains('hidden')) {
          return;
     }

     var userConsentOverlay = document.createElement("div");

     userConsentOverlay.id = "ip-user-consent-overlay";

     userConsentOverlay.style.position = "fixed";
     userConsentOverlay.style.width = "100%";
     userConsentOverlay.style.height = "100%";
     userConsentOverlay.style.top = "0";
     userConsentOverlay.style.bottom = "0";
     userConsentOverlay.style.right = "0";
     userConsentOverlay.style.left = "0";
     userConsentOverlay.style.backgroundColor = "black";
     userConsentOverlay.style.zIndex = "9999";
     userConsentOverlay.style.opacity = "0.75";

     userConsentWrapper.parentNode.insertBefore(userConsentOverlay, 
          userConsentWrapper.nextSibling);

     var hideOverlay = function() {
          userConsentOverlay.style.display = "none";
     };

     window.__gdprComplianceScripts.push(hideOverlay);
     document.getElementById("ip-user-consent-decline").onclick = hideOverlay;
};

6. Click UPDATE, then CONFIRM

7. Ideally, delete the cache first

8. Test in all browsers

The cookie banner should then look like this

If our tip has helped you, we would appreciate it if you would share it 😊

Credits go to our software specialist Yanko who helped me develop this hack!

Christina Holzner

Christina is our Chief Marketing Officier and loves great tips & life hacks.

Start a conversation

READ MORE

B2B Marketing Days 2021

Smint.io is part of

News

The marconomy B2B Marketing Days show how companies face new challenges and which trends from the consumer sector are also used successfully for B2B companies.

What is branded content?

Blog
Portals
Marketing
Brand Experience

Many businesses are producing online content, but most of them struggle to get conversions from it. Why? That’s because they fail to produce content that’s on-brand and memorable.

So in this article, let’s take a peek into branded content and how it can help you take your content from good to absolutely mindblowing.

Tag der Industriekommunikation

Meet us at

News

We are proud to be part of the “Tag der Industriekommunikation” the  lighthouse event of the german federal association of communication and marketing.

Write a comment to this article:

Your email address will not be published.