Categories
AMP On WordPress Wordpress

Adding AMP Cookie Consent in WordPress Manually or Plugin

Table of Contents

This post relates to AMP Cookie Consent Only for “WordPress” On How you can add cookie notice in AMP with two options.

Manual option and with a plugin, the manual option only will display that you use cookies and the visitor can accept,

the consent of the visitor whether he wants to use the cookies or not.

At the end of this short tutorial, I have given the pros and cons of both options.

Manually with the HTML Code + CSS

Add AMP Notification Code To Your Header

amp cookie consent gdpr in amp pages

Here is a code you can just copy-paste into your child themes header.php file, make sure to include the code before the closing </head> tag

<amp-user-notification id="my-notification" class="sample-notification" layout="nodisplay">
<span>We use cookies by browsing, you consent to use of cookies &nbsp;&nbsp;Cookie Notice
<a href="https://netnaps.com/cookie-notification/">Cookie-Notification</a><button on="tap:my-notification.dismiss">Accept <span class="dashicons dashicons-yes"></span></button></span>
</amp-user-notification>

Note: I am using the Default Twenty Twenty Theme on my WordPress Blog

Add CSS to Your Extra CSS

amp-user-notification.sample-notification{
background: linear-gradient(90deg, rgba(255,255,255,1) 35%, rgba(250,250,250,1) 100%);
}

amp-user-notification.sample-notification {
 border:1px solid grey;
 padding: 1rem 1rem;
 line-height:2;
font-size:1.4rem;
 border-width: 0px 0 0;
 box-shadow: 0 -3px 5px 0 rgba(0, 0, 0, 0.1);
}
amp-user-notification.sample-notification > span {
    display: block;
    margin: 0 auto;
    max-width:720px;
}
amp-user-notification.sample-notification span > button {
    min-width: 80px;
	  margin-left:1.5rem;
    display: inline-block;
    padding: 0.4rem 0.6rem;
    font-size:1.3rem;
    color: #ffffff;
	  line-height:1.5;
    background-color: #0052D5;
    box-shadow: 0 -3px 5px 0 rgba(0, 0, 0, 0.3);
    appearance: none;
}      

CSS you can change, as per your website’s look and theme.

Here is the Result :

netnaps.com amp cookie consent on WordPress with the plugin or without
The screenshot shows, how the Cookie Consent appears.

Why I am recommending the below plugin the only reason it is 100% compatible with an AMP First Site,

AMP in a Standard Mode, Desktop or Mobile.

This works with both environments Transitional Mode for AMP or Disabled AMP later, it won’t give any problems.

The Plugin is lightweight, it doesn’t make your site slow or run any non-required queries or scripts.

To Install the plugin and set it up properly :

Go to Plugins > Add New > Type in Search ” gdpr Felix ” as its by Author Name: Felix Arntz

cookie notice gdpr by felix arntz for AMP

After Installing and activating the plugin, click on customize

amp cookie consent

This Takes you to the, customize option window

amp cookie consent

Policies option you can select all your policy pages

cookie consent on the amp

Privacy Policy Page, Cookie Policy Page, and Cookie Section ID

Cookie Section ID is the anchor URL or ID Attribute that directly redirects a visitor to your Cookie section inside your Privacy policy page,

getting cookie notice for amp pages in WordPress

On this Option ” Content ” you can visually customize your cookie consent notice, to anything as per your requirements.

amp consent cookies

In the Appearance section, you can change colors and completely style the cookie consent notice as per your site’s colors and theme.

amp consent

These are the integration options, where you can control the cookie-based features with the checkboxes as per your requirements.

  • The manual option above eliminates the use of another extra plugin on your site.
  • Everything normally works if you use the manual option ads and analytics, sessions on AMP are unified.
  • With the plugin, its code is as per the required cookie and GDPR Notice, as everything is triggered cookies for analytics or ads only on the user’s consent.
  • Valid for AMP, All validations are passed with both options.

Cons  

  • Amp Linker Session Unification in AMP Tag Test Fails if you are using the plugin option.
    Reason analytics are triggered only when the visitor gives his consent.
  • If you use Ads, from AdSense or similar channels that use cookies, the Ads won’t display till the user gives his consent, as cookie sessions start after the consent, in the plugin option.
  • First Contentful Paint or FCP can be affected in the page speed tests, as this adds an extra element to the page, both options are plugin or manual.
  • An extra request or query is added to the page with both options.

By Rahul Kharbanda

Hi,
I am Rahul Kharbanda from India. I hope you like all the content I made. Welcome to comment & connect.
I am on Quora , Github , Twitter

6 replies on “Adding AMP Cookie Consent in WordPress Manually or Plugin”

Hi,
Consent is showing, but didn’t work, YouTube, Twitter, Ads etc. are showing, before the user click the “Accept” button
What i have to change?

kind regards

I have mentioned this in the post if you use the plugin the tracking and ads will work after the new user or the first-time visitor allows or gives his consent, in the manual way the user is just informed that he is been shown ads and is tracked and he accepts that with OK.

The cookies on the website locate users in various ways via IP address belonging to the user is often gathered, stored, and shared. And merely the behaviors of users across the websites. The IP address can be accounted as personal data by the EU’s GDPR.

Hello i am kavin, its my first occasion to commenting anywhere, when i read this post i thought i could also
create comment due to this brilliant piece of writing.

Leave a Reply

Your email address will not be published. Required fields are marked *