WordPress + AMP: Customize Accelerated Mobile Pages, Add Analytics & AdSense Code

WordPress + AMP: Customize Accelerated Mobile Pages, Add Analytics & AdSense Code

In this video, I will show you how to customize WordPress AMP page as well as adding Google Analytics tracking code and AdSense ad slot for monetizing your AMP mobile site. If you haven’t yet installed the AMP Plugin, you may watch this video to install AMP plugin and follow the tutorial.

Install AMP Plugin : https://www.youtube.com/watch?v=WhXVbH5jwLA

Watch ✔ Like ✔ Comment✔ Share ✔ SUBSCRIBE ✔

Note: Unfortunate ! YouTube description doesn’t support programming code, but hey don’t worry! you may follow the link for customization filters and code.

But pls give the video a Like before you jump to the web page….

http://techprezz.com/2016/02/wordpress-amp-customize-accelerated-mobile-pages-add-google-analytics-adsense-code/

Update: How to add related Posts to AMP Pages

http://techprezz.com/2016/03/wordpress-amp-how-to-add-related-posts-to-accelerated-mobile-pages-without-plugin/

1. Create a folder called ‘amp’ and copy the style.php from plugin – amp – template’s folder into the ‘amp’ folder you created in your child theme folder. Watch from 01:50

2.Copy this filter into functions.php of your child theme. Watch from 06:33

3. Change background color of the AMP page header

Go – child theme amp folder- style.php – find ‘nav.title-bar’ property and change the backgound color of the header. save it.

4. Replacing the WordPress icon with your own Watch from 09:33

5. Adding custom php template file to the child ‘amp’ folder Watch from 12:15

6. Replacing the site header with an image of your site name 16:14

7. Add footer to the Amp theme, Watch 22:41

8. Removing the Whitespace immediate below the footer, Watch from 25:00

Go to your child theme folder – amp – style.php , find out the selector ‘body’ and you should see the property “padding-bottom” in the curly braces. To get rid of the whitespace below the footer, just remove the padding code or you may comment it out like this

/*padding-bottom:100px; */

Then save the file and upload it to your server if you are using FTP. Now the whitespace underneath the footer must have gone.

9. Styling the Footer Watch the video from 28:30

10. Adding AdSense code to the Accelerated Mobile Page Watch from 30:58.

And replace the XXXXX and ca-pub-XXXXXXXXXXXXXXXXX with your data-ad-slot numbers for each ad unit and your Adsense data-ad-client ID respectively. As of now, the AMP HTML doesn’t support responsive ad attribute, so you must not add the responsive attribute to the ad slot and you should not add any script either as AMP doesn’t support any external scripts except for select scripts that Google has hosted on its CDN. The amp-ad /amp-ad with correct attributes will automatically load the necessary scripts and serve the ads properly.

11. Adding Google Analytics code to WordPress AMP page, Watch from 37:05

It is recommended to create a new property under your main Google analytic account instead of using the same analytic ID for your main website page, so that you can have separate analytic data for your WordPress AMP Page.

To know more about AMP Project :

https://ampproject.org/

Watch ✔ Like ✔ Comment✔ Share ✔ SUBSCRIBE ✔

Follow Us on
https://www.facebook.com/HowTo-113065995707084/timeline/
https://plus.google.com/+HowToGuide
https://www.facebook.com/TechPrezz
https://plus.google.com/+TechPrezz
http://youtubehowtos.blogspot.com/
http://youtubehowtos.tumblr.com/

This Channel’s name has been changed from “HowtTo” to TechPrezz, to know more about the change, please check out the about page

Thanks for all your support

Leave a Reply

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