in Elftronix

Guide to Using Piwik Analytics with AMP on WordPress

In this post I’m going to show two ways to use Piwik Analytics with AMP on WordPress. Although the AMP Project does not include Piwik on their list of supported Analytics — it’s possible and I wouldn’t leave home without it!

Please note that AMP doesn’t allow Javascript. This method uses the “Image Tracker code” feature which has some limitations. For example the lack of cookies which is why the number of returning visits cannot be tracked.

Can be tracked:

Browser, Operating System, Time on Website/Page, Page Title, IP/Hostname

Cannot be tracked:

Visits, Screen resolution, Search keywords, Referrers, Browser plugins

AMP for WP Method

This is the simplest way, suitable for non-tech-savvy people.

AMP WP Plugins

Easiest way is to use the AMP for WP plugin which has a ready built-in feature to support Piwik. It depends on the AMP Plugin which also needs to be installed.

First things first — you need to know the ID of your website. Choose the wrench icon on the top right corner at the Piwik dashboard and go to ‘websites’ under ‘administration’. You will see the ID number of each installed website.

Piwik Website ID

Back in WordPress — you will have the AMP settings (wrench icon) on the left side bar of the WP Admin area. Navigate to the ‘general’ section of the ‘Accelerated Mobile Pages Options’ page.

Piwik Analytics AMP URL

Choose Piwik Analytics as Analytics Type and edit the code supplied below.

Example:

//www.myawesomewebsite.com/piwik/piwik.php?idsite=1&rec=1&action_name=TITLE&urlref=DOCUMENT_REFERRER&url=CANONICAL_URL&rand=RANDOM

  • If your site is under http — use //
  • If your site is under https — use https

It will add the following tracking code before the closing body tag.

<amp-pixel id=”AMP_14″ class=”-amp-element -amp-layout-fixed -amp-layout-size-defined -amp-layout” src=”//www.myawesomedomain.com/piwik/piwik.php?idsite=1&rec=1&action_name=TITLE&urlref=DOCUMENT_REFERRER&url=CANONICAL_URL&rand=RANDOM” style=”width: 1px; height: 1px; display: none;” aria-hidden=”true”>

AMP Plugin Method

If you prefer to just use the AMP plugin on it’s own.

amp-pixel

  • Create a directory ‘amp’ in your theme’s folder: /wp-content/themes/yourtheme/amp/
  • Copy /wp-content/plugins/amp/templates/single.php to the ‘amp’ folder
  • Edit single.php and place this before the closing body tag:

<amp-pixel src=”//www.myawesomewebsite.com/piwik/piwik.php?idsite=[ID_NUMBER]&rec=1&action_name=TITLE&urlref=DOCUMENT_REFERRER&url=CANONICAL_URL&rand=RANDOM”></amp-pixel>

Where ‘[ID_NUMBER]’ is replaced with the ID of your site in Piwik.

 

If you have a problem or something’s not working, leave a comment and I’ll see what I can do to help. Thanks.

Care and share, let's call it fair! -David

Twitter Button Facebook Button Google Button LinkedIn Button

Write a Comment

Comment

  1. Thank you so much for using and creating a guide around this. This will really help people who are using the plugin.

    We’re honored to have you as a plugin user.

    Regards,
    Ahmed