Tracking Flash with Piwik - Working example

Knowledge base
1

I was like many of you pulling out my hair trying to figure out how to get Flash to call the Piwik tracker function and track something. Let me save you some time… None of the suggestions you’ll find work. There is an AS3 class for this out there on github… but that doesnt work either. There is an article with some vague direction… its suggestion doesnt work either. Heres a brief explanation of what to do and some example code that you can copy/paste.

We basically need to have Flash call the Piwik tracker function and pass some variables to it to specify what we are tracking. This example demonstrates setting a custom variable in piwik for use as a psuedo flash event tracker. The problem with most solutions out there is that they attempt to call the piwik function from Flash, but Flash cannot communicate with the piwik function in this way because the variable which references the Piwik tracker (piwikTracker.setCustomVariable) is out of scope (wrapped up in a whos variables are not accessible to flash.) What I did was add a function within the Piwik code so Flash can actually pick up on the Piwik function.

So here goes…This is an AS3 solution…

// PIWIK CODE

  1. Copy/Paste the following Piwik code below at the bottom of your page before the tag.
  2. Replace the number (2) in the code “idsite=2” with your sites id #
  3. Replace the number (2) in the code “+ “piwik.php”, 2);” with your sites id #
  4. Replace “yourPiwiksite.com” (in all three places) with your Piwik site Url

<!-- Piwik --> 

<script type="text/javascript">
var pkBaseURL = (("https:" == document.location.protocol) ? "https://yourPiwiksite.com" : "http://yourPiwiksite.com");
document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));

</script>

<script type="text/javascript">

function flasher(app,appEvent){
  
  try {

    var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 2);
    piwikTracker.setCustomVariable(1,app,appEvent,"page");
    piwikTracker.trackPageView();
  
  } catch( err ){
     
      alert(err)
  
  }

}

</script>
<noscript><p><img src="http://yourPiwiksite.com/piwik.php?idsite=2" style="border:0" alt="" /></p></noscript>

<!-- End Piwik Tracking Code -->

// FLASH CODE

Then in Flash you call the Piwik function and pass your custom variables with the example code below…(On a button or other event). Change the “My Game” and “Clicked to play game” to your “variable” and “value”


if (ExternalInterface.available) {
		
       ExternalInterface.call("flasher","My Game","Clicked to play game") ;

}

// NOTE

In the Piwik code above you’ll notice the line…


catch( err ){
     
      alert(err)
  
  }

The line “alert(err)” will popup a javascript alert window with an error message if theres an error. Useful for debugging. For example… you can do “alert(appEvent)” if you are getting an error to check if Flash is passing the variable correctly. You will want to take out “alert(err)” before making your site live so users who might receive an error dont get a popup.

2

Thanks for the write up, I’m sure it will help other users!

3

No sweat Matt. Thank you for a great product.

4

would you please update the code for async version?

I tried this without success


  function flasher(app,appEvent){
  try {
  var _paq = _paq || [];
  _paq.push(['setCustomVariable',1,app,appEvent,"page"]);
  _paq.push(['trackPageView']);
  (function() {
    var u=(("https:" == document.location.protocol) ? "https" : "http") + "://yourPiwiksite.com//";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', 2]);
    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);
  })();
  } catch( err ){}
}