Adding AMP Cookie Consent in WordPress Manually or Plugin

Table of Contents

• Manually with the HTML Code + CSS
  • Add AMP Notification Code To Your Header
  • Add CSS to Your Extra CSS
• Add a Plugin For GDPR Cookie Notice
  • Settings for Plugin GDPR Cookie Notice By Felix Arntz

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

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 :

Add a Plugin For GDPR Cookie Notice

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

Settings for Plugin GDPR Cookie Notice By Felix Arntz

After Installing and activating the plugin, click on customize

This Takes you to the, customize option window

Policies option you can select all your policy pages

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,

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

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

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

 Pros

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