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.
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 "I accept" 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.
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.
Working to get connected...
Ooops! We're having trouble connecting. Please refresh your page or contact us...