How to track clicking an image on a sequential page?

Hi,

We are trying to make Piwik work for 1 of our applications; if it works out, we will use it for other applications as well.

Here is a scenario that we encountered - we want to find out if we can track the “image clicking” with piwik for this scenario; it is not a simple image posted on a page, so I will break down the steps:

  1. User goes to an url (http://www.mysite.com/Survey/TakeOne/100) to start taking the survey (this url has a idSite 1); note: here “100” is the surveyid; and we plan to add tracking code for idSite 1 on this page;
  2. User clicks “Next” button to go to next page (http://www.mysite.com/Survey/TakeOneNext) to see more questions of the same survey, and finish taking the survey;
  3. User clicks “Next” to go to a Form (http://www.mysite.com/Survey/Form), and fill in a form there;
  4. User clicks “Submit” to go to the last page (http://www.mysite.com/Survey/Result/100) - and here on this page, there will be 3 images – We want to track the clicking of these 3 images here.

Now, our question is:

Must we create a new idSite for this url (http://www.mysite.com/Survey/Result/100), separate from the idSite for the starting page, in order to track the 3 images on the “Result” page?

If yes, that is workable on our end; we just don’t want to miss anything. Our initial thinking was: since it is the same survey, if there is a way to use 1 idSite, that’d be more streamlined, with only 1 idSite; however, we do realize that these pages may be treated as 2 seperate “sites” in Piwik’s term, since they do have 2 different urls.

Please confirm.

Thanks,

SoftDev

Hi there,
For tracking images when they are viewed and when they are clicked, we recommend to try the powerful Content Tracking feature: Content Tracking - Analytics Platform - Matomo

Matt,

Thanks for your reply. I have already read through the link you mentioned. I think for our needs (tracking the impression and clicks on images), here is the functions we need to use:

http://developer.piwik.org/api-reference/tracking-javascript#content-tracking

On this page, there are 2 functions that we are thinking about using:

trackContentImpression( contentName, contentPiece, contentTarget ) - Tracks a content impression using the specified values.
trackContentInteraction( contentInteraction, contentName, contentPiece, contentTarget ) - Tracks a content interaction using the specified values.

Now, in the above definitions, there is no idSite mentioned - so it does not seem to be tied into any idSite from just this page; however, the functions on this page are for JavaScript Tracking API; so, my understanding is: we may only be able to use these functions after we set up the “Piwik Javascript Tracker” - which, from this page: JavaScript Tracking Client: Integrate - Matomo Analytics (formerly Piwik Analytics) - Developer Docs - v3, it seems that it always have to pass an “idSite” in order for any tracking to work.

Hence my question in the previous post - I would prefer that the tracking of images (impressions and clicks) are NOT tied to any idSite, that would be much more flexible, and be ideal. However, based on the above info that I read, I’m not sure how to implement that in Piwik yet; or does Pwik provide a way to “Track image without idSite”?

Please kindly confirm this.

Thanks,
SoftDev

Hi Matt,

I have figured out how to use these, and added the 2 lines next to the javascript tracker code on my web pages:

paq.push([‘trackContentImpression’], 'Ad@(Session[“AdID”])_1’, ‘@Session[“Ad1ImagePath”]’, ‘@Session[“Ad1URL”]’);
paq.push([‘trackContentInteraction’], ‘click’, 'Ad@(Session[“AdID”])_1’, ‘@Session[“Ad1ImagePath”]’, ‘@Session[“Ad1URL”]’);

and tagged the image elements that I want to track, by following this page: Content Tracking: Integrate - Matomo Analytics (formerly Piwik Analytics) - Developer Docs - v3

Now, how do I retrieve the information programmatically - the # of impressions on each image; the # of clicks on each image? Is there any API calls to make to retrieve that info? I assume so, but have not found the info I need.

Update: I went to this page to look for API calls to retrieve the tracking data for the images: Reporting API Reference: API Reference - Matomo Analytics (formerly Piwik Analytics) - Developer Docs - v3

There are only 2 API calls under “Contents”, but neither seems relevant:

API for plugin Contents

  • Contents.getContentNames (idSite, period, date, segment = ‘’, idSubtable = ‘’) [ Example in XML, Json, Tsv (Excel) , RSS of the last 10 days ]
  • Contents.getContentPieces (idSite, period, date, segment = ‘’, idSubtable = ‘’) [ Example in XML, Json, Tsv (Excel) , RSS of the last 10 days ]

Can you help with this?

Thanks,
SoftDev

Only those two APIs are currently available. They give you basic stats eg how often an image was viewed or interacted with. I created an issue to add more API’s a while ago: Content-tracking: Provide more reports · Issue #6267 · matomo-org/matomo · GitHub but it is not implemented yet.

Hi thomas-piwik,

Thanks for the reply. Have you used these 2 API calls? If so, can you tell me what they each return? The examples on that page for these 2 APIs are both empty, with no data; so I cannot see what they actually return.

  • Contents.getContentNames (idSite, period, date, segment = ‘’, idSubtable = ‘’) [ Example in XML, Json, Tsv (Excel) , RSS of the last 10 days ]
  • Contents.getContentPieces (idSite, period, date, segment = ‘’, idSubtable = ‘’) [ Example in XML, Json, Tsv (Excel) , RSS of the last 10 days ]

If you/anyone can provide that info, with an example, I’d appreciate it very much!

Thanks,
Claudia

Sure, I have used those API’s and they are used in the UI as well. If you see something in Piwik itself under “Actions => Contents” then those API’s should actually return data.

GetContentNames returns data like this:


[{"label":"myName4","nb_visits":3,"nb_impressions":44,"nb_interactions":0,"sum_daily_nb_uniq_visitors":2,"interaction_rate":"0%","contentTarget":"http:\/\/www.test.de\/ing.png","idsubdatatable":2845},{"label":"contentName","nb_visits":2,"nb_impressions":7,"nb_interactions":3,"sum_daily_nb_uniq_visitors":2,"interaction_rate":"42.86%","contentTarget":"http:\/\/apache.piwik\/","idsubdatatable":2857},{"label":"no search result","nb_visits":1,"nb_impressions":18,"nb_interactions":9,"sum_daily_nb_uniq_visitors":1,"interaction_rate":"50%","contentTarget":"http:\/\/localhost:8080\/project","idsubdatatable":2851}]

GetContentPieces returns the same data but it contains a list of all used content pieces instead of names. You might notice that the API returns a “idsubdatatable” property. If you add a URL param to the API-URL eg “&idSubtable=2845” then you will get all content pieces that were used for a given content name.

Make sure you are requesting the data for the correct site id (&idSite) URL parameter. For a test you could also switch the period parameter to “month”. Maybe there is just no data for the current day.

Hi Matt or thomas-piwik,

I have tried using the Contents.getContentNames method, in order to get tracking data (nb_impressions, etc.) for the images displayed on our website, but it always returns nothing.

I then logged into piwik, under “Action”, “Contents”, it shows no data - so my understanding is that no data is logged fro these images; thus the API call returns nothing.

BTW - all other api calls to piwik worked so far.

I went to the error log on the web server, and can see that my clicking of the ad images are recorded. Here is from the log:

“GET /piwik.php?c_i=click&c_n=Ad_1_1&c_p=https%3A%2F%2Fmydownload.s3.amazonaws.com%2FQuiz%2F78%2FAds%2F1653_ad1_new.jpg%3FAWSAccessKeyId%3OurKey%26Expires%3D1440676239%26Signature%3DYkuBOC1I9hiIeki%252BR8tkFkYKyXM%253D&c_t=http%3A%2F%2Fqbritedev.com&idsite=2&rec=1&r=277978&h=1&m=50&s=54&url=http%3A%2F%2Flocalhost%3A62719%2FQuiz%2FTakeSlide%3FQuizID%3DMDAwMDQwMTM0NS03OA&_id=dcfc74f9b956268e&_idts=1440656167&_idvc=1&_idn=0&_refts=0&_viewts=1440656167&send_image=0&pdf=1&qt=0&realp=0&wma=0&dir=0&fla=1&java=0&gears=0&ag=1&cookie=1&res=1366x768&gt_ms=3719 HTTP/1.1” 204 - “http://localhost:62719/Quiz/TakeSlide?QuizID=MDAwMDQwMTM0NS03OA” “Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0”
172.31.60.156 - - [27/Aug/2015:06:50:51 +0000] “-” 408 - “-” “-”

Plus other clicks on images; recorded in the same order that I have clicked.

So, my question:

  1. If I can see the above log on the web server, that means that the javascript tracker code that I put on my web pages is working, correct?

  2. If yes, why were they not recorded?

  3. The images will be displayed on the very siteUrl that is associated with the idSite, PLUS all subsequent pages. i.e. if it starts with www.mysite.com/page1 (which is the siteUrl on piwik dashboard), then when user submit a form on this page, it will go to Page2, then Page 3, where the url will be different than the original siteUrl.

In this case, if the user clicks on the image from Page1, then Page2, Page3…will these clicks ALL be tracked?

NOte: Our images are hosted in a Amazon S3 bucket, so all of them have a fixed url like this:

https://mydownload.s3.amazonaws.com/Survey/28/Ads/6854_ad1_new.jpg?AWSAccessKeyId=OurKey&Expires=1…"

  1. We are using the Javascript tracker, so we have this code on each of the Page1, Page 2 and Page3 mentioned above:

var _paq = _paq || []; (function(){
var u=((“https:” == document.location.protocol) ? “https://mypiwik.elasticbeanstalk.com/” : “http://mypiwik.elasticbeanstalk.com/”);
_paq.push([‘setSiteId’, ‘9’]);
_paq.push([‘setTrackerUrl’, u+‘piwik.php’]);
_paq.push([‘enableLinkTracking’]);
_paq.push([‘trackPageView’]);
_paq.push([‘trackAllContentImpressions’]);

_paq.push([‘trackContentImpression’], ‘Ad_2_1’, ‘https://mydownload.s3.amazonaws.com/Survey/28/Ads/6854_ad1_new.jpg?AWSAccessKeyId=OurKey&Expires=1440657021&Signature=mm9WWcGEWdYgfxOjmnl3A%2BVO6wg%3D’, ‘http://mysite.com’);
_paq.push([‘trackContentInteraction’], ‘click’, ‘Ad_2_1’, ‘https://mydownload.s3.amazonaws.com/Survey/28/Ads/6854_ad1_new.jpg?AWSAccessKeyId=OurKey&Expires=1440657021&Signature=mm9WWcGEWdYgfxOjmnl3A%2BVO6wg%3D’, ‘http://mysite.com’);

And here is the markup for the ad images:

Is this correct?

Thanks,

SoftDev

  1. It looks good and should mean it’s setup correctly if there was also a content impression looked. The piwik.php call is showing an interaction. An interaction will be only counted if there was an impression before that. Are you seeing requests without the “c_i” parameter but the others like “c_n”?

  2. It should be recorded correctly but see 1). It’s important that an impression is logged as well. Otherwise it’s useless.

  3. They should be all tracked if I remember correctly

  4. In



_paq.push(['trackContentImpression'], 'Ad_2_1', 'https://mydownload.s3.amazonaws.com/Survey/28/Ads/6854_ad1_new.jpg?AWSAccessKeyId=OurKey&Expires=1440657021&Signature=mm9WWcGEWdYgfxOjmnl3A%2BVO6wg%3D', 'http://mysite.com'); 


I think it should be


_paq.push(['trackContentImpression', 'Ad_2_1', 'https://mydownload.s3.amazonaws.com/Survey/28/Ads/6854_ad1_new.jpg?AWSAccessKeyId=OurKey&Expires=1440657021&Signature=mm9WWcGEWdYgfxOjmnl3A%2BVO6wg%3D', 'http://mysite.com']);


The closing array bracket should be at the end I think

Hi thomas-piwik,

Thanks for the reply. Update:

  1. I did what you suggested in above 4) - i.e. move the ending bracket ] to the very end. SO the code looks like this now:

_paq.push([‘trackContentImpression’, ‘Ad_1_1’, ‘https://mydownload.s3.amazonaws.com/Quiz/78/Ads/1653_ad1_new.jpg?AWSAccessKeyId=OurKey&Expires=1440748065&Signature=xWNmPOsb9lsT1F7BWTRRNEQ18p0%3D’, ‘http://mysite.com’]);
_paq.push([‘trackContentInteraction’, ‘click’, ‘Ad_1_1’, ‘https://mydownload.s3.amazonaws.com/Quiz/78/Ads/1653_ad1_new.jpg?AWSAccessKeyId=OurKey&Expires=1440748065&Signature=xWNmPOsb9lsT1F7BWTRRNEQ18p0%3D’, ‘http://mysite.com’]);

However, the content is still not tracked. Meaning: I log into Piwik, go to Actions, go to “Contents” - still no data is there.

  1. You mentioned: " An interaction will be only counted if there was an impression before that. Are you seeing requests without the “c_i” parameter but the others like “c_n”?"

My question is: what do I need to do to ensure that there is an impression before interaction? How do I make sure that an impression is logged ?

After I made the change you suggested, and ran the app., went back to the server access log - I still do not see an "request without the “c_i” parameter ". I see the same log as yesterday; all of them have “c_i=click”.

Before this log, there is:

172.31.18.108 - - [28/Aug/2015:03:47:03 +0000] “GET /piwik.php?action_name=MySite&idsite=9&rec=1&r=617556&h=22&m=47&s=10&url=http%3A%2F%2Flocalhost%3A62719%2FSurvey%2FShowResult&urlref=http%3A%2F%2Flocalhost%3A62719%2FSurvey%2FInfoForm&_id=be5859940b48828b&_idts=1440733532&_idvc=1&_idn=0&_refts=0&_viewts=1440733532&send_image=0&pdf=1&qt=0&realp=0&wma=0&dir=0&fla=1&java=0&gears=0&ag=1&cookie=1&res=1366x768&gt_ms=976 HTTP/1.1” 204 -

So, I think this is the problem - how do I track then impression?

Please advise how I should proceed.

Thanks,
SoftDev

My question is: what do I need to do to ensure that there is an impression before interaction? How do I make sure that an impression is logged ?

trackAllContentImpressions() should make sure that content impressions are tracked. Otherwise always make sure to call trackContentImpression() with the same parameters when a trackContentInteraction() is called. Maybe it doesn’t detect the content impressions or maybe bulk tracking is not working. Or maybe you don’t see them in the logs as it is a POST request. From the looks it does sound that they are not tracked. I think it would be helpful to add a method to piwik.js that let’s you get information about all content blocks in your page.

Are you familiar with checking network requests in the browsers? You could have a look if a tracking request is sent for this. Will create some issues now!

FYI: Created New method logAllContenBlocksOnPage to piwik.js that lets you debug which content blocks are on your page · Issue #8650 · matomo-org/piwik · GitHub and Add method to piwik.js that let's you log all tracking requests to console · Issue #8651 · matomo-org/piwik · GitHub

Hi thomas-piwik,

Update - issue solved. I can see tracking data and retrieve them via api call.

My bad - I did not select the correct website at the top right corner, when checking “Action” -> “Contents” after logging into piwik - the tracking data was there all along.

1 more question: what I’m testing now is for the Dev server; now, for Production server, do I need to set up a new, separate installation for Piwik, create a new DB, correct? Basically repeat the same steps?

Please confirm.

Thanks,
SoftDev

Exactly, just repeat the steps. Glad it’s working now! Have a good weekend

You have a great weeked as well! Thank you very much for the continuoous help - I really appreciate it :slight_smile:

Thanks,
SoftDev