How to add Google analytics & Social shares in WordPress AMP Pages

An Introduction Of AMP – AMP is an open-source project by Google to make mobile web fast loading. On the web, you will find many types of buzz that say their own thinking about AMP. Google has officially announced that they are introducing AMP for Google mobile search. In this post, we are discovering AMP and WordPress as well.gogle analytics social shareMust Read :

  1. An introduction of AMP. It’s important for website & Blog.
  2. How to setup AMP in WordPress properly.
  3. How to Google Adsense & Media.net ads in WordPress AMP pages.

Are you looking for AMP and WordPress guides to grow your blog? Do you want to AMP Up Your WordPress Site with Google’s Accelerated Mobile Pages? Or do you want to install AMP in WordPress? In this tutorial, we will go over steps –

  1. Install AMP plugin for WordPress properly ( How to install a plugin on WordPress).
  2. Adding Share buttons & Google Analytics in WordPress AMP.
  3. Remove powered by WordPress links with your own link & text.
  4. Validation of Of AMP pages.

How to install AMP in WordPress?

  • First login to WordPress dashboard.
  • Now plugin section and Install the New plugin (How to install a plugin in WordPress).
  • After that search for AMP.
  • Hit on install & activate it.
  • You have done.

You need do one more thing to remove errors. Just go to Setting then Permalinks. Hit on save without changing anything. Now you can access your AMP page by adding /amp/ slug at end of URL.

Non-AMP  www.example.com/post/  to AMP Page will be www.example.com/post/amp/

Must Read: How to setup AMP in WordPress Properly ( a detailed guide for WordPress & AMP). 

Note: For this, we have used pretty URL setup.

How to Add share button in WordPress AMP pages?

Social sharing button is very important part of a blog. It could even be the main traffic-driving force especially if you have great and niche content. Just because you enabled AMP page for your WordPress blog doesn’t mean you want to lose your social media traffic.

To start adding this new feature, we need to add some .js files on WordPress head section. Go to your installed plugins area. After that click on edit button. Then find the file.

amp/templates/header-bar.php

Now paste the code below, above the </header>.

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

Then open single.php

amp/templates/single.php

Find the code below.

<?php echo $this->get( 'post_amp_content' ); // amphtml content; no kses ?>

Then paste the code below. Make sure before </div>

<div class="share-buttons">
  <amp-social-share type="whatsapp"></amp-social-share>
  <amp-social-share type="facebook" width="32" height="32"
                    data-url="<?php echo esc_url( get_permalink() ); ?>"
                    data-param-app_id="<?php echo esc_attr( {YOUR_FB_APP_ID} ); ?>"
                    data-media="<?php echo esc_url( wp_get_attachment_url( get_post_thumbnail_id() ) ); ?>"
                    data-description="<?php the_title_attribute(); ?>">
  </amp-social-share>
  <amp-social-share type="twitter" width="32" height="32"
                    data-url="<?php echo esc_url( get_permalink() ); ?>"
                    data-media="<?php echo esc_url( wp_get_attachment_url( get_post_thumbnail_id() ) ); ?>"
                    data-description="<?php the_title_attribute(); ?>">
  </amp-social-share>
  <amp-social-share type="pinterest" width="32" height="32"
                    data-url="<?php echo esc_url( get_permalink() ); ?>"
                    data-media="<?php echo esc_url( wp_get_attachment_url( get_post_thumbnail_id() ) ); ?>"
                    data-description="<?php the_title_attribute(); ?>">
  </amp-social-share>
  <amp-social-share type="gplus"></amp-social-share>
  <amp-social-share type="email"></amp-social-share>
  <amp-social-share type="linkedin"
    width="40"
    height="40"
    data-param-text="<?php the_title_attribute(); ?>"
    data-param-url="<?php echo esc_url( get_permalink() ); ?>"
    data-param-attribution="AMPhtml">
  </amp-social-share>
  <amp-social-share type="tumblr"></amp-social-share>
</div>

Note: Change your own Facebook App id on line number 4.

How to add Google analytics to WordPress AMP pages?

Google analytics is one of the important for the web as well as mobile app tracking. Here, I will share your details that how you can add analytics.

let’s start, First find in amp/templates/header-bar.php file.

</header>

Then, paste the code below. Just above it and hit on save.

<script async custom-element="amp-analytics"
    src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Then open amp/templates/single.php file and find the code below.

</body>

Paste the code below. Just above it.

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

Note: Make sure change UA-xxxxx-y with your Google analytics code.

Some other useful article

  1. How to setup Yost SEO plugin.
  2. Setup W3 total cache plugin on WordPress.
  3. What to write a Blog post with templates.

The conclusion – Here I have discovered Google analytic & social share in WordPress. AMP is new trends like FaceBook instant article. If you are getting any type of error or need help feel free to ask me. Comment below, I will happy to help you. Follow @thebloglogic on Twitter and Facebook Sharing is sex Happy Blogging.

What do you think about this Article?

This site uses Akismet to reduce spam. Learn how your comment data is processed.