Topics

Create Blogger AMP HTML template install & download Accelerated Mobile Pages themes for Blogspot platform.


Blogger AMP HTML How To Add EU Cookie Policy Notification Template

Blogger AMP HTML How To Add EU Cookie Policy Notification Template
Blogger users are very well aware that in order for their blog to be viewed by users in European Union countries, all online publications, which includes, websites, blogs, e-commerce web stores, news sites etc must inform users on their website cookie usages & their cookie policy.

For Blogspot blogger users, these cookie usage notifications has been provided automatically by Blogger via Google , but... for users who only uses existing Blogger default templates. Unlike Blogger & AMP (Accelerated Mobile Pages) integrated template HTML, theses notification is not available due to the new AMP-HTML template structure introduced.

AMP HTML Blogger Template

How to Display Cookie Notification for Blogger AMP HTML Template

AMP HTML provides a plugin which allows AMP pages to display a notification using the <amp-user-notification/> component. This component/tag can be included anywhere inside the <body> tag of an AMP powered HTML page with several settings for users to use.

Displays a dismissable notification to the user
ampproject.org on amp-user-notification

This component has several advance usages which you can further view/read in detail at AMP Project website. This tutorial will show amp-user-notification basic usages for example, providing a cookie usage notification for first time visitors.



Add amp-user-notification Script

Add  amp-user-notification plug-in script above/before the </head> tag of your Blogger template.

<script async='async' custom-element='amp-user-notification' src='https://cdn.ampproject.org/v0/amp-user-notification-0.1.js'/>

Add amp-user-notification Styling

Additional styling is required in order to highlight & blend the component with your existing blog page design. By default amp-user-notification will display at the bottom of the screen which you can further customize its location using CSS.

Find your template </style> tag and copy paste below CSS codes above/before this tag.

amp-user-notification {
  background: rgba(0,0,0,.65);
  color: #fff; 
  line-height:1; 
  padding: 20px; 
  display: block; 
  width:auto; 
}
amp-user-notification button {
  float:right; 
  padding:10px;
  font-size:14px;
  background-color:cyan;
  color:white;
}

Save your Blogger template.

You can customize the component background, color & fonts accordingly. Here we also included some styling for the component button.

Add amp-user-notification Component

Add the component anywhere at your Blogger template HTML within the <body> tag. It is preferably located at the bottom/ending of your template <body> tag as this component will not be entirely in view once a user have accepted/pressed the component button.

Copy and paste below component to your template HTML.

<amp-user-notification id='blogramp-cookie-policy' layout='nodisplay'>
  <button class='btn btn-primary' on='tap:blogramp-cookie-policy.dismiss'> {{ BUTTON-TEXT }}</button>
  This website or its third party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the <a href=' {{ URL-TO-POLICY-PAGE }} '>cookie policy</a>. By tapping on &quot;I accept&quot; you agree to the use of cookies.
</amp-user-notification>

Update /change the text displayed for the button at {{ BUTTON-TEXT }}

Update change the text at amp-user-notification body.

Update/change the URL to your policy page at {{ URL-TO-POLICY-PAGE }}

Click Save Template.

Preview your page, refresh & a notification should appear on the bottom of your screen.

Others You Might Consider

When the notification button is clicked, amp-user-notification plugin will store a unique identifier at users browsers local storage. You can find this unique identifier by using your mouse right-click > select Inspect > find local storage at your browser console pane.

AMP HTML Blogger Template User Notification

This unique identifier will be referenced by the component plug-in each time a user comes visit your blog pages, & when it exists, the notification will not display.

You can further extend this component usages & details available at Amp Project website documentation page.
Blogr-AMP Blogger AMP HTML Template Rated 5/5 based on 98 reviews Blogger AMP HTML pages display amp-user-notification plugin and cookie notifier as required by law for European Union EU Countries. Detail tutorial & guide to integrate AMP notification plugin, add custom styling & create amp-user-notification component inside Blogger template, with custom text & dismiss button included. Blogr-AMP: Blogger AMP HTML How To Add EU Cookie Policy Notification Template
5/ 5
Best AMP Blogger template, Blogr-AMP exceeded my expectations. Search engine friendly, easy to use, backed by great support Blogger users are very well aware that in order for their blog to be viewed by users in European Union countries, all online publications, w....

Topics You Might Be Interested...


Disqus Comments

Facebook Comments

Google+ Comments

Code Parser

Have a code snippet to share? Format RAW codes here...

Users who needs to share code snippets in comments, use helper below to paste your codes & copy to comments body.

Contact Us