Marketers

Styling your Pardot Visitor Tracking Opt-in Banner in 6 easy steps

By Lucy Mazalon

GDPR has become overwhelming for many teams, and I’m not going to relive the frustration and confusion may marketers have been put through preparing for the new data privacy legislation. When taking GDPR compliance step-by-step, the most logical place to start in the customer journey is your visitor tracking opt-in banner. This sits on your website home page and collects consent by asking visitors (unidentified prospects) if they are happy to be cookied. This will mean Pardot logs their activity on their prospect record.

The opt-in banner is a must for GDPR compliance, because it gives people the chance to opt-out of tracking. You need to ensure that this new addition to your website home page is in keeping with the overall look and feel – and not a last minute addition! This post will take you through how to enable, edit and style your Pardot Visitor Tracking Opt-in banner.

Step 1: Head to the Tracking Opt-in Preferences Menu

This is hidden away in the account’s Admin section, and often a tricky one to find.

Go to: Admin –> Overview

Then: ‘Edit Tracking Opt-in Preferences’ at the top right (above the email usage table).

 

Step 2: Edit your Message

This is the text that will appear on your banner to new visitors. Edit this to fit your company’s voice, eg. if you’re a corporate, stick to a formal, standardised message; if you are a quirky business, you have a little more freedom with the copy.

(Pardot will automatically add ‘Yes’ and ‘No’ options for visitors to select, which we will come back to later).

Add Hyperlinks to your Privacy Policy by using the <a href= tag.

<a href=”[insert policy URL]”>[insert hyperlinked text]</a> for details.

In this example:

<a href=”https://www.salesforceben.com/thedrip/”>privacy policy</a> for details.

Will show like this:

privacy policy

Step 3: Style & Position your banner

This part will take the longest, because you may need to tweak a few times to get it spot on.

This is the default styles out-of-the-box:

This is the styling explanations:

  • position: = how the banner will sit on the page. You can choose ‘fixed’ (stays put) or ‘sticky’ (moves as the user scrolls). Also try out ‘relative’ and ‘absolute’ options.
  • top: = move your banner up/down the page by increasing or decreasing this number.
  • left: = move your banner left/right by increasing or decreasing this number.
  • width: = this is how much of the page the banner should stretch. Use %s to keep the banner relative to the browser width.
  • text-align: = how you want the text to be aligned on the banner. Choose from ‘left’, ‘center’ or ‘right’.
  • background: = this is the HEX color code, a 6 digit code that follows a # eg. #FFFFFF is white. Use this website to pick a color code, or this website to match to your existing brand colors ( << that’s one of my top recommended tools).
    color: = same as above, but for the text color (#000000 is black).
    opacity: = set the transparency of your banner. 1 = opaque, so use decimals to adjust transparency eg. 0.7.
    font-size: = I recommend making font size = 1em.
    padding: = this adds some space around the text, making the whole banner bigger. The first number will ‘pad out’ the top and bottom; the second is left and right.
  • Padding = 20pt 0pt
    z-index: = is the stack order. It’s like in word where images can be ‘send backwards’ or ‘bring to front’. a z-index of 1000 will keep it at the front of all other elements on your website.

Step 4: Set Yes/No Option Size

By ‘Link Styles’, Pardot mean the style of the Yes/No clickable options.

The default = font-size: 1em;

It follows the same principle covered before. Remember to keep the Text Style and the Link Styles the same. This is a banner where link size is 3em:

 

Step 5: Request Opt-in from all/some countries

There are 2 options for who Pardot requests Opt-ins from: all countries, or some.

Requesting opt-in from all visitors is in the spirit of marketing transparency, and maybe a wise move for the long-term.

However, if you want to minimise the rate of tracking opt-outs (from countries where it’s not a legal requirement), you can select specific countries, or use one of the pre-defined country groups from the dropdown: 

Step 6: Test

The easiest way to test and edit is to use the incognito setting of your browser.

Summary

 

The Author

Lucy Mazalon

Lucy is the Operations Director at Salesforce Ben. She is a 10x certified Marketing Champion and founder of The DRIP.

Comments:

    Jessica
    July 24, 2020 8:39 pm
    Thank you for this article, it was JUST what I was looking for! Can you please tell me if there's a way to change the Yes/No to something more robust like 'Accept and close' and 'No'?
    Lucy Mazalon
    July 28, 2020 9:49 am
    Hi Jessica, no problem! I remember looking into this a few years ago, and I believe the answer is no, that those words are not editable. I remember one of my clients wanted to hide the 'no' option altogether, and that wasn't possible.
    Efrain
    October 10, 2022 7:19 pm
    Is there a way to hide the no option no? I notice that in this website there is a "Yes" and then a "cookie preference" option.
    Lucy Mazalon
    October 11, 2022 1:14 pm
    There isn't :(
    Geoffrey
    January 31, 2023 2:33 pm
    Hi Lucy, congrats for the amazing content as always. Did you have already the use case where the website team has already 2 buttons on its cookie banner "Accept strictly necessary" and "accept all". We would like to apply Pardot cookies only if the visitor clicks on "accept all". They shouldn't apply if he clicks on "strictly necessary". There is no documentation for that. Thank you

Leave a Reply