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 :

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

Update: How to add related Posts to AMP Pages

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 :

Watch ✔ Like ✔ Comment✔ Share ✔ SUBSCRIBE ✔

Follow Us on

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


Fuente – Source

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

Necesitas ayuda con wp? Entonces WPVideo es tu sitio.
Encuentra lo que buscas entre cientos de miles de videos y experiencias personales de otros usuarios. Todos los que empezamos con wp deberíamos tener acceso a esta web, ojalá yo hubiera tenido algo así cuando empecé mi camino como webmaster 🙂
Pero ahora quiero y puedo poner esta web a vuestra disposición.
Disfrutadla 😉

Need help with wp? Then WPVideo is your site.
Find what you are looking for among hundreds of thousands of videos and personal experiences of other users. All of us who started with wp should have access to this website, I wish I had something like that when I started my journey as webmaster 🙂
But now I want and I can put this website at your disposal.
Enjoy it 😉

https://www.wpvideo.eu

Publicado en Adsense, Plugins, Temas (Themes), Tutoriales (Tutorials), Wordpress y etiquetado .

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *