Piwik - How to track click events? - javascript

I configured Piwik analytics in my app.
I inserted this tracking code inside the body tag:
<!-- Piwik -->
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(["setDomains", ["*.mywebsite.com"]]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
_paq.push(['trackAllContentImpressions']);
(function() {
var u="//mywebsite.piwikpro.com/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', 3]);
var d=document, g=d.createElement('script'),
s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true;
g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<noscript><p><img src="//eatngage.piwikpro.com/piwik.php?idsite=3"
style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code -->
And I added the event trigger to the div:
<div class="my-class" onclick="_paq.push(['trackEvent', 'Documentary',
'Play']);">Click
</div>
In Piwik Dashboard, I see the clicking under "Visitors in Real-Time", but not under "Actions-Events" category.
How can I tracking events click please?
Thanks!


You have to run archive process to see events under Actions-Events. Make also sure your setting that allows to trigger archiving from the browser is enabled.
As a reference, you can use this article about configuring archive proccess: http://piwik.org/docs/setup-auto-archiving/

Related

Matomo does not work with Rails and webpacker

Matomo has stopped tracking page visits for a Rails site of mine that I recently upgraded to use Webpacker.
When I experimentally create a file test.html on a private site and copy/paste the tracking code from my production Rails site to it, tracking does not work either:
!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/packs/",n(n.s=33)}({33:function(e,t){var n,r=window._paq||[];r.push(["setCookieDomain","*.MY_RAILS_SITE"]),r.push(["setDomains",["*.MY_RAILS_SITE","*.MY_RAILS_SITE"]]),r.push(["disableCookies"]),r.push(["trackPageView"]),r.push(["enableLinkTracking"]),function(){var e="https://matomo.MY_MATOMO_HOST/";r.push(["setTrackerUrl",e+"matomo.php"]),r.push(["setSiteId","2"]);var t=document,n=t.createElement("script"),o=t.getElementsByTagName("script")[0];n.type="text/javascript",n.async=!0,n.defer=!0,n.src=e+"matomo.js",o.parentNode.insertBefore(n,o)}(),n=null,addEventListener("turbolinks:load",(function(e){n&&(r.push(["setReferrerUrl",n]),r.push(["setCustomUrl",window.location.href]),r.push(["setDocumentTitle",document.title]),e.data&&e.data.timing&&r.push(["setGenerationTimeMs",e.data.timing.visitEnd-e.data.timing.visitStart]),r.push(["trackPageView"])),n=window.location.href}))}});
However, when I take the script directly from my sources (and not from the production site) and place it into the test.html file, tracking works!
<html>
<head></head>
<body>
<p>Hello</p>
<!-- Matomo -->
<script>
var _paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(["setCookieDomain", "*.MY_RAILS_SITE"]);
_paq.push(["setDomains", ["*.MY_RAILS_SITE","*.MY_RAILS_SITE"]]);
_paq.push(["disableCookies"]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://matomo.MY_MATOMO_HOST/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '2']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
<!-- End Matomo Code -->
</script>
</body>
</html>
(Host names redacted for privacy.)
Evidently, the code gets changed when deploying to production in a way that prevents it from working.
There are no errors in the browser console whatsoever, no trouble with content-security headers etc., and the matomo.js script loads properly, with a HTTP 200 result.
What's going on here?

It seems I have finally gotten it to work again. Looking closely at the JavaScript snippet that Matomo suggests for new sites. I spotted some subtle differences.
- var _paq = window._paq || [];
+ var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(["setCookieDomain", "*.MY_RAILS_SITE"]);
_paq.push(["setDomains", ["*.MY_RAILS_SITE","*.MY_RAILS_SITE"]]);
_paq.push(["disableCookies"]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://matomo.MY_MATOMO_HOST/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '2']);
var d=document, g=d.createElement('script'),
s=d.getElementsByTagName('script')[0];
- g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+ g.type='text/javascript'; g.async=true; g.src=u+'matomo.js';
s.parentNode.insertBefore(g,s);
})();
// From https://github.com/turbolinks/turbolinks/issues/436#issuecomment-456862864
// Send Matomo a new event when navigating to a new page using Turbolinks
// (see https://developer.matomo.org/guides/spa-tracking)
(function() {
var previousPageUrl = null;
addEventListener('turbolinks:load', function(event) {
if (previousPageUrl) {
+ var _paq = window._paq = window._paq || [];
_paq.push(['setReferrerUrl', previousPageUrl]);
_paq.push(['setCustomUrl', window.location.href]);
_paq.push(['setDocumentTitle', document.title]);
The _paq variable is assigned differently, and the working snippet is missing the g.defer=true bit. Additionally, _paq is now assigned in the Turbolinks event handler.

Piwik tracking other users

Hi I am trying to make my Piwik code track other users for my intranet site. So far I am able to track my own views, but if I were to have someone else access the site it would not track it below is my code that Piwik generated for me. I have also tried replacing the localhost with my URL but it still did not work.
Any feed back would be appreciated. Thank You.
<!-- Piwik -->
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(["setCookieDomain", "*.harold.local"]);
_paq.push(["setDomains", ["*.harold.local"]]);
_paq.push(["deleteCookies"]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//localhost:8080/piwik/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', 3]);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<noscript><p><img src="//localhost:8080/piwik/piwik.php?idsite=3&rec=3" style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code -->

Piwik track which user access which page

I want to use Piwik to trace which user stays on which page in my rails app but I cannot figure out how to trace it. I added a custom variable (page scope) but in Piwik I only see the user_id and its count of visits but not which pages. Also, I got url based view but not for which user. Anybody knows how to deal with this? Also I can not use custom Dimension because my Piwik version is older and I can not upgrade it now. I tried setUserId option as well but no luck.
My code :
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['setCustomVariable', 1, "user_id", "<%= current_user.id %>", "page" ]);
_paq.push(['setUserId', '<%= current_user.id %>']);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
_paq.push(['enableHeartBeatTimer']);
(function() {
var u="//myserver/piwik/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', 1]);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<noscript><p><img src="//myserver/piwik/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code -->

Google plus share using dynamic content not working

I am working vehicle tracking website, here I have to share some dynamic content in google plus share that is as prefilled text. Issue is the content I am sharing in google plus is shared,when first time I click google plus share, after the content get refresh automatically one minute once through ajax, the prefill text content getting updated, but i click share button in google plus share window the content not getting posted to anyone.
Here is the sample code
<html>
<head>
<title>Share Demo: Deferred execution with language code</title>
<link rel="canonical" href="http://www.example.com" />
</head>
<body>
<script type="text/javascript" src="https://apis.google.com/js/client:plusone.js"></script>
<div id ="sharePost" action="share">Share</div>
<script>
function add(){
var options = {
contenturl: 'https://plus.google.com/pages/',
contentdeeplinkid: '/pages',
clientid: 'xxx',
cookiepolicy: 'single_host_origin',
prefilltext: 'Hai happy friday'+Math.random(),
calltoactionlabel: 'CREATE',
calltoactionurl: 'http://plus.google.com/pages/create',
calltoactiondeeplinkid: '/pages/create'
};
// Call the render method when appropriate within your app to display
// the button.
gapi.interactivepost.render('sharePost', options);
}
setInterval(function(){
add();
},2000);
add();
</script>
</body>
</html>

I can able to share interactive post using java script render method.The main point we need to noted is, we need to use same url for contenturl and calltoactionurl.
<html>
<head>
<title>Share Demo: Deferred execution with language code</title>
<link rel="canonical" href="http://www.example.com" />
</head>
<body>
<script>
window.___gcfg = {
lang: 'en-US',
parsetags: 'explicit'
};
</script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<div id ="sharePost">Share</div>
<script>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'http://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
var options = {
contenturl: 'http://www.google.com',
contentdeeplinkid: '/pages',
clientid: 'xxxxxxxxxxx.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
prefilltext: 'Hai happy friday',
calltoactionlabel: 'INVITE',
calltoactionurl: 'http://www.google.com'
};
// Call the render method when appropriate within your app to display
// the button.
gapi.interactivepost.render('sharePost', options);
</script>
</body>
</html>

how to use piwik javascript code in app.js on express

I want to use javascript code of piwik to track my website which is built on express.
I had put my javascript code in app.js in express.
But found error.
my javascript code is:-
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(["trackPageView"]);
_paq.push(["enableLinkTracking"]);
(function() {
var u=(("https:" == document.location.protocol) ? "https" : "http") + "://localhost/piwik/";
_paq.push(["setTrackerUrl", u+"piwik.php"]);
_paq.push(["setSiteId", "1"]);
var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
})();
</script>

You can't run the client-side code for Piwik directly on Node.js.
But there are specific Node clients that you can use instead:
nodejs-piwik
nodejs-piwik-api

Categories