How to use Matomo with AMP with WordPress

Had a hard time setting my self-hosted Matomo analytics with the AMP version of my blog.

Custom JavaScript can not be used, you need to use the pixel tracking or Image Tracking.

Go to your Matomo dashboard settings to retrieve the proper URL and the site ID.

AMP for WordPress

Make sure you're using the official plugin made by Google and Automattic:

AMP

Add the JSON configuration

Go to the WordPress Dashboard and find the Analytics section of the AMP plugin.

It should allow you to set a new JSON for tracking analytics.

Mine looks like this, I'm setting the Matomo site id, the mandatory rec=1 paramater, a random number to prevent caching and the canonical URL.

The cool thing the plugin takes care of the replacing the keyword RANDOM and ${canonicalUrl} with the actual values as the users load the site.

{ "requests": { "pageview": "https://YOUR_SITE/matomo.php?idsite=XXXX&rec=1&rand=RANDOM&url=${canonicalUrl}" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } }
Code language: JSON / JSON with Comments (json)

Matomo documentation

There are more things you can pass into the tracking pixel for Matomo, head over the Tracking HTTP API documentation for full details:

https://developer.matomo.org/api-reference/tracking-api

AMP documentation

To further read or possible updated you might want to head to the official docs on how to track pixels using a JSON config:

https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/use_cases/#using-amp-pixel

About Ricard Torres

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

@ricard_dev @ricard_dev

📝 Blog 🎙 Podcast

9 comments
  • Sir is it Working on 5.56 of php?

  • Dear Ricard,
    thanks a lot!
    Maybe this is a dumb question, but how do I check if it works?
    Thanks!

    • Hey Toni,

      Valid question!

      In my case, probably yours too, you can add

      /amp

      at the end of the URL to see the Amp version.

      For my travel blog here’s the regular and amp version URL’s:

      https://www.quicoto.com/carpintero-de-barrio/
      https://www.quicoto.com/carpintero-de-barrio/amp/

      I saw two methods for checking if the settings for Matomo work:

      – Open the Chrome DevTools and check the Network tab. Filter by images, there should be an image being loaded (probably a gif file) pointing to your analytics instance.

      – Go to the Matomo dashboard and open the site you’re testing. There’s a section for real time users, you should see yourself hitting the site.

      Hope this helps!

  • Hey Ricard,
    thanks a lot already!
    I tried again and I even saw the code in the html when inspecting (see below).
    But when checking in Matomo (the real time users) it didn’t show me visiting an amp-site.
    Do I have to change something in Matomo?

    Thanks a lot again!

    Here the html before the

    {"requests":{"pageview":"https:\/\/analytics.plant-values.de\/matomo.php?idsite=1&rec=1&rand=RANDOM&url=${canonicalUrl}"},"triggers":{"trackPageview":{"on":"visible","request":"pageview"}}} {"requests":{"pageview":"https:\/\/analytics.plant-values.de\/matomo.php?idsite=1&rec=1&rand=RANDOM&url=${canonicalUrl}"},"triggers":{"trackPageview":{"on":"visible","request":"pageview"}}}
    Code language: JSON / JSON with Comments (json)
    • Hey Toni,

      I’m not sure how else to support you. It could be related to the Matomo settings. I can’t tell.

      It worked for me with that on the first try. Perhaps you were reaching your side with an ad blocker?

  • Oh no it didn’t paste the code right.
    May I send you an email?

  • Hey Ricard,
    thanks for bearing with me. I just want to say now it works. For whatever reason it seems it needed a day to work fully.

    Now I just need to figure out why Matomo shows a “direct entry” when I entered via a Google search.

    You’re doing a great job Ricard! Thanks!

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*