Piwik 1.10 Page Overlay

Support & Bugs
41

Thanks created report in Bug in overlay when using setSiteId with a string value.. · Issue #3746 · matomo-org/matomo · GitHub

42

FWIW, I had the same problem because the tracker code generated had two ‘//’ in the URL. I’m not sure if that was my bad or the software.

It would be useful to add something to the troubleshooting section about making sure the tracker URLs match exactly (or did I miss that?)

Cheers.

43

In the upcoming release, the machanism will be changed. The troubleshooting section has already been updated for the new release, so the information about exactly matching URLs has been removed.

In the future, this one applies:

Page Overlay tries to load scripts and data from the URL you pass to the Piwik tracker. If you have a restrictive mod_proxy setup or there’s another reason why this doesn’t work, use the method setAPIUrl(apiUrl) of the Piwik tracker to let it know from which URL it should load the scripts and the data. The parameter apiUrl has to point to the root directory of piwik, e.g. http://piwik.example.org/ or https://example.org/piwik/.

44

Hey Folks,

Waited patiently for rtelease 1.12 and installed today.

We have piwik sitting behind a firewall. we expose a single directory /path/to/piwik/public and build symbolic links to piwik.js and piwik.php this methods has worked for tracking but not page overlays.

external: geogratis.gc.ca/track leads to the js and php files publicly.

internal: dashboard.geogratis.gc.ca should point to the internal files

What follows are two code snippets I tried. The first one works for tracking external traffic but not page overlays. The second one works for page overlays but tracks only internal traffic.

sample 1:


<script type="text/javascript">
  var _paq = _paq || [];
  _paq.push(["trackPageView"]);
  _paq.push(["enableLinkTracking"]);

  (function() {
    var u=(("https:" == document.location.protocol) ? "https" : "http") + "://geogratis.gc.ca/track/" ;
    _paq.push(["setTrackerUrl", u+"piwik.php"]);
    _paq.push(["setSiteId", "30"]);
    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>

sample 2:


<script type="text/javascript">
  var _paq = _paq || [];
  _paq.push(["trackPageView"]);
  _paq.push(["enableLinkTracking"]);

  (function() {
    var u=(("https:" == document.location.protocol) ? "https" : "http") + "://dashboard.geogratis.gc.ca/" ;
    _paq.push(["setTrackerUrl", u+"piwik.php"]);
    _paq.push(["setSiteId", "30"]);
    _paq.push(["setAPIUrl", "http://dashboard.geogratis.gc.ca/"])
    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>

Any thoughts?

Also, to clarify the function is setAPIUrlk and NOT setApiUrl (notice cammel case)

Thanks in advance

45

The tracker URL is the public URL, the API URL is the internal one. In your second snippet you set both URLs to the internal one. You need to use the external URL in the line “var u = …” and the internal URL in setAPIUrl. Then it should work.

46

Thanks for the info! On a related note, something along the lines of the following could also be added to the troubleshooting section:

If you use the “js/” tracking subdirectory of your Piwik installation instead of piwik.php/piwik.js, you would also need to use the setAPIUrl(apiUrl) of the Piwik tracker as described above.

E.g., I had to add that method to the following tracker I use (Piwik 1.12, after updating from 1.8.2):

<script type="text/javascript">
var pkBaseURL = (("https:" == document.location.protocol) ? "https://www.piw.example.org/p/" : "http://www.piw.example.org/p/");
document.write(unescape("%3Cscript src='" + pkBaseURL + "js/' type='text/javascript'%3E%3C/script%3E"));
</script><script type="text/javascript">
try {
var piwikTracker = Piwik.getTracker(pkBaseURL + "js/", 1);
piwikTracker.setAPIUrl(pkBaseURL);     // <<==== Had to just insert this line to make the "Overlay" work
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
} catch( err ) {}
</script>

Lest “http://www.piw.example.org/p/js/” is considered the API base, with calls to “http://www.piw.example.org/p/[b]js/[/b]plugins/Overlay/…” obviously failing. (Can be seen e.g. in the Firefox Web Console.)

47

Timo,

When I set ‘var u=’ to the external URL I gain external tracking, but loose page overley functionality. This still happens when I use _paq.push([“setAPIUrl”, apiUrl]) to point to the internal API.

So from my assesment I am unable to get pageoverlay to work properly.

I am a bit confused on the need for setAPIUrl in the first place. Piwik can see the outside world just fine and posts content from feeds and is able to load pages for overley. Why can pageoverlay not use the JS file from the external URL?

The external link to piwik.php and piwik.js are simply symbolic links to the internal server from the outside world so they are the same physical files.

I am a little lost, and could use with a little push in the right direction.

This is my custom script that I am working on to make things work.


<script>
  var _paq = _paq || [];
  _paq.push(["trackPageView"]);
  _paq.push(["enableLinkTracking"]);
  (function() {
    var u=(("https:" == document.location.protocol) ? "https" : "http") + "://" + piwikUrl + "/";
    _paq.push(["setTrackerUrl", u+"piwik.php"]);
    _paq.push(["setSiteId", "#"]);
    _paq.push(["setAPIUrl", apiurl ]);
    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>

Output from console log:

Any thoughts on this?

Thanks.

Cheers

48

What you see next to the Overlay sidebar, is a frame that opens your actual website. The website needs to load some resources (JS/CSS) from Piwik and access the Piwik API (index.php). That’s why linking piwik.js and piwik.php is not enough.

Loading these URLs (JS, CSS and index.php) needs to be possible from the machine you are viewing Overlay on. If they are not available via the tracking URL, you need to tell Piwik about the location where it can load the resources and access the API.

Unfortunately, I cannot debug your setup since it’s not public. I can only tell you that you need to tell Piwik about the location where index.php opens Piwik using setAPIUrl.

Having that said, the problem may be elsewhere. Overlay is launched when calling trackPageView. You push it to _paq before pusing the config method calls (e.g. setAPIUrl). I don’t this works.

49

Timo,

I moved the “setAPIUrl” call further up and it worked. It might be good to mention this in the help documents that order matters (especially for us non javascript folks).

Providing sample modified code would also be useful as I was looking for copy and paste examples myself.


<script>
  var _paq = _paq || [];
_paq.push(["setAPIUrl", apiUrl]);
  _paq.push(["trackPageView"]);
  _paq.push(["enableLinkTracking"]);
  (function() {
    var u=(("https:" == document.location.protocol) ? "https" : "http") + "://" + piwikurl +/;
    _paq.push(["setTrackerUrl", u+"piwik.php"]);
    _paq.push(["setSiteId", "#"]);
    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>
50

I just updated the doc page.

You should call all the other setup methods (setTrackerUrl, setSiteId) before trackPageView as well. If your code really works, I’d be surprised.

Try it like this


<script>
  var _paq = _paq || [];
  (function() {
    var u=(("https:" == document.location.protocol) ? "https" : "http") + "://" + piwikurl +/;
    _paq.push(["setTrackerUrl", u+"piwik.php"]);
    _paq.push(["setAPIUrl", apiUrl]);
    _paq.push(["setSiteId", "#"]);
    _paq.push(["trackPageView"]);
    _paq.push(["enableLinkTracking"]);
    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>
51

Thanks for the info, I jsut started with what PIWIK produced in the application. Perhaps some changes need to be made for piwik to give out sane code. Of course this could have been a few versions ago.

Thanks of the info I have 14 application owners to work with to update this code.

To date Overlay was the only thing not working.

52

please suggest exactly what we should change / improve in the code, or documentation, if there is still any problem. Thanks