In this support post, we will discuss how to set up a banner for active consent from the ground up. By following the steps outlined below, visitors from Europe will be served up with the consent banner. Third party cookies will not be saved unless respondents click the banner or an area outside of the banner on the landing page to opt into receiving third party cookies.
*NOTE: The ion cookie is a first party cookie and will be dropped into the respondent’s browser. Third party cookies are dropped via tracking scripts that are added to your ion experiences.
EU Cookie Consent Banner
First you will want to add a new page to your creative with your banner content. When adding a page to the creative, you will want to choose the start from scratch option to add a blank page to your creative. You will want to select the base_layout option when starting from scratch.
Next, drag a container into your new page and then add a text editor into that container. You can use any text you would like for the banner.
Apply a pod micro-theme or background color to the container housing your consent message text to make it stand out when it is displayed at the top of your landing page.
When editing a page, you will find two styleable containers at the top of your List view.
Double click each styleable editor and apply a 100% width and height within the layout style section of your creative studio. This will ensure that the clickable area for opting into third party cookies will span the full width and height of the browser.
After applying a 100% width and height to the first two styleable containers, you will want to do the same for the top-level container housing all of your content as well.
Creative Management Screen
Once the EU Cookie Consent Banner page is set up, go back to your Creative Management screen. From here, you will see an option to specify the cookie consent page. Simply select the EU Cookie Consent page that you created in the previous step from the available dropdown menu and hit the enable button.
Action and Rule
After enabling the cookie consent page, go back into that page and select the top-level container housing your content. This is the original container that was on the page as opposed to the container that you added to the page earlier.
Next, apply an action to the top-level container to go to the “Current Gated Page.” When selecting the action, you will also want to make sure you set the page to open in the parent frame.
After adding the action, you will then apply a rule to the container with no conditions required and an action to accept cookie consent.
You will see an advanced setting option when specifying a cookie consent page in your Creative Management screen. You can click the advanced setting link and then enter text that will be used as a “consent sharing key.” When this optional key is in place in multiple creatives, respondents who opt into third party cookies on one experience will be opted into accepting third party cookies on other experiences that have the same consent sharing key. This allows you to use a shared key in specific experiences as opposed to sharing consent across all experiences.
Within your Configure Site screen (Settings > Configure Site), there are some advanced options related to the cookie consent setup as well. On this screen, you will see options to share cookie consent and to require cookie consent.
When the “Share Cookie Consent” option is enabled, anyone who opts into accepting third party cookies on one ion experience will automatically be opted into all others where it is enabled (as opposed to having to opt into each site individually).
When the “Require Cookie Consent” option is enabled, new experiences will not be able to go live without having a cookie consent page set up.
*NOTE: Any link coded inline with text (i.e. without using ion link editor) will need to have a target specified within the <a> tag. Links coded inline with your consent message will cause banner to disappear without consent being given unless a target is specified.