How to add piwik to amp pages?

General questions
1

Could someone help me get this going : amp-analytics – AMP

2

Looks like you’re interested building a Client for Tracker’s APIs.
There is documentation about this and a list of already built clients to get inspired from.
Feel free to update the developer docs after successful implementation.

Maybe also @matthieu could be interested on this integration.

3

I build a php tracker in the past, worked fine so far I have some experience

However for amp you must compile the tracking url and some more into a json object you can’t use any javascript.

I might just give it a try and see how far I get before wondering how it is going to work with the cookies for example

4

Cookies don’t work but the other essentials are there, see more details here. While waiting for full support…

5

You can easily track your pages with Piwik using <amp-pixel> tag in this way:

// change your piwik server host
// change YOUR_SITE_ID with your site id
// All other variables will be replaced by AMP, see https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md
<amp-pixel src="https://piwik.example.org/piwik.php?idsite=YOUR_SITE_ID&amp;rec=1&amp;action_name=TITLE&amp;urlref=DOCUMENT_REFERRER&amp;url=CANONICAL_URL&amp;rand=RANDOM"></amp-pixel>
6 
<script async src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" custom-element="amp-analytics"></script>

<amp-analytics><script type="application/json">
{
	"triggers": {
		"trackPageview": {
			"on": "visible",
			"request": "pageview"
		}
	},
	"requests": {
		"base": "https://piwik.example.org/piwik.php?idsite=1&rec=1&action_name=${title}&url=${sourceUrl}&rand=${random}&apiv=1&urlref=${documentReferrer}&res=${screenWidth}x${screenHeight}&lang=${browserLanguage}&gt_ms=${serverResponseTime}&cs=${documentCharset}&_cvar={\"1\":[\"errorName\",\"${errorName}\"],\"2\":[\"errorMessage\",\"${errorMessage}\"]}",
		"pageview": "${base}"
	}
}
</script></amp-analytics>

https://developer.piwik.org/api-reference/tracking-api
https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-analytics.md

2 Likes
7

Howdy!
I’m new to this amp thing … and was glad to find this solution for the Piwik tracking of amp pages!
@Hyperboy THX!
But this works only if the amp page is loaded from the original host.
The usual way amp pages are served is from the cached version from cdn.ampproject.org.
So if I’m loading the page from the Google SERPs - witch is the same cached version tracking is not working.
I already tryed to ad cdn.ampproject.org as a trusted host but this seems not to work.

Any suggestion?

8

I have the page validating. but now I need help with what and where I put my info in that code to connect to my Matomo (piwik) analytics.

I replaced https://piwik.example.org/piwik.php with my site name. or do I use my direct link to the analytics?

9

@Hyperboy
Hi,
it works :slight_smile:
Do you know how this work with two SiteId?

10

Can a simple duplication of the code with the second SiteId be a solution?

12

Something like this or is another way better?

<amp-analytics><script type="application/json">
{
	"triggers": {
		"trackPageview": {
			"on": "visible",
			"request": "pageview"
		}
	},
	"requests": {
		"base": "https://www.server.de/piwik.php?idsite=9&rec=1&action_name=${title}&url=${sourceUrl}&rand=${random}&apiv=1&urlref=${documentReferrer}&res=${screenWidth}x${screenHeight}&lang=${browserLanguage}&gt_ms=${serverResponseTime}&cs=${documentCharset}&_cvar={\"1\":[\"errorName\",\"${errorName}\"],\"2\":[\"errorMessage\",\"${errorMessage}\"]}",
		"pageview": "${base}"
	}
}
</script></amp-analytics>

<amp-analytics><script type="application/json">
{
	"triggers": {
		"trackPageview": {
			"on": "visible",
			"request": "pageview"
		}
	},
	"requests": {
		"base": "https://www.server.de/piwik.php?idsite=2&rec=1&action_name=${title}&url=${sourceUrl}&rand=${random}&apiv=1&urlref=${documentReferrer}&res=${screenWidth}x${screenHeight}&lang=${browserLanguage}&gt_ms=${serverResponseTime}&cs=${documentCharset}&_cvar={\"1\":[\"errorName\",\"${errorName}\"],\"2\":[\"errorMessage\",\"${errorMessage}\"]}",
		"pageview": "${base}"
	}
}
</script></amp-analytics>