Creating A Template

When creating or editing a template, you will be taken to the template edit page. The first thing you should do is enter a name for the template. The template name is purely for you so that you can find and assign it to domains later. Therefore, make it easy to understand when writing it.

Then, you must select the template type, either a banner or a modal. A banner template should generally be a smaller snippet on the page informing the user of how your business uses cookies. Meanwhile, a modal should be a larger interactive popup that gives the user the ability to select what they consent to.  You can always modify this later if you choose the wrong one or change your mind.

Last is the HTML snippet for the template itself.  The Cookie Jar will insert this exactly as-is into your webpage when you load the SDK; that way, you can customise it to exactly how you want it to look. However, as mentioned in the overview, there are some guidelines to follow that  ensure that it will work as expected:

Guidelines

1. The form ID needs to be “theCookieJarConsentBannerForm”.  The form ID is important as the SDK will listen for this exact form as the source of any change in the consent state.
2. You should align the form fields to the standard consent parameters used by Google and other platforms. The Cookie Jar sets the consent state cookie with the fields exactly as they appear in the form. While these can be remapped in both the GTM installation and SDK, it does add extra work for deploying and maintaining the tool. The standard consent parameters as defined by Google are as follows:

• ad_storage: Enables storage, such as cookies (web) or device identifiers (apps), related to advertising.
• ad_user_data: Sets consent for sending user data to Google for online advertising purposes.
• ad_personalization: Sets consent for personalised advertising.
• analytics_storage: Enables storage, such as cookies (web) or device identifiers (apps), related to analytics, for example, visit duration.
• functionality_storage: Enables storage that supports the functionality of the website or app, for example, language settings
• personalization_storage: Enables storage related to personalisation, for example, video recommendations
• security_storage: Enables storage related to security such as authentication functionality, fraud prevention, and other user protection  

If you are looking for inspiration you can always check out our template gallery