Adding AMP Cookie Consent in WordPress Manually or Plugin

Monday 26 October 03:13

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, While manual option only will display that you use cookies and visitor can accept that, the plugin does what actually is required 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

Adding AMP Cookie Consent in WordPress Manually or Plugin 11

Here is a code you can just copy-paste in 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 websites look and theme.

Here is the Result :

The screenshot shows, how the Cookie Consent appears.

Why I am recommending the below plugin is the only reason it is 100% compatible with an AMP First Site, AMP in a Standard Mode, Desktop or Mobile.

While this can also work with the other environments like Transitional Mode for AMP or even if you don’t use AMP, or Disable AMP later, it won’t give any problems.

Also, the Plugin is lightweight; that is, it doesn’t make your site slow or runs 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

Adding AMP Cookie Consent in WordPress Manually or Plugin 12

After, Installing and activating the plugin, click on customize

Adding AMP Cookie Consent in WordPress Manually or Plugin 13

This Takes you to the, customize option window

Adding AMP Cookie Consent in WordPress Manually or Plugin 14

Policies option you can select all your policy pages

Adding AMP Cookie Consent in WordPress Manually or Plugin 15

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,

Adding AMP Cookie Consent in WordPress Manually or Plugin 16

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

Adding AMP Cookie Consent in WordPress Manually or Plugin 17

In the Appearance section, you can change colours and completely style the cookie consent notice as per your sites colours and theme.

Adding AMP Cookie Consent in WordPress Manually or Plugin 18

This is the integrations 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 consent.
  • Valid for AMP, All validations are passed with both the 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 effected in the page speed tests, as this adds an extra element on the page, both options plugin or manual.
  • An extra request or query is added to the page with both the 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

4 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.

Leave a Reply

Your email address will not be published.