Hello, I want to use Piwik Pro for tracking of Tripetto forms hosted with the Tripetto Wordpress plugin. They have no Piwik example in their help / support, so I looked at the Matomo example Track form activity with custom tracking code - Tripetto Help Center and tried to adapt it, but it did not work. Can anyone suggest how to adapt this code to make it work with Tripetto?
Thanks, Oliver
Hi @oschiffers,
It looks like this could work with a slimmed down version of the code, because the initial tracking setup (called // Init... in the documentation you were referring to) is already activated by the Piwik PRO plugin in Wordpress:
The following code would track the events as custom events.
function() {
Init the tracking queue
var _paq = window._paq = window._paq || [];
// Send events to Piwik PRO (only include the event rules below that you want to track)
return function(event, form, block) {
switch (event) {
case 'start': _paq.push(['trackEvent', 'Tripetto Form', 'Form is started.', form.name ]); break;
case 'stage': _paq.push(['trackEvent', 'Tripetto Form', 'Form block becomes available.', block.name ]); break;
case 'unstage': _paq.push(['trackEvent', 'Tripetto Form', 'Form block becomes unavailable.', block.name ]); break;
case 'focus': _paq.push(['trackEvent', 'Tripetto Form', 'Form input element gained focus.', block.name ]); break;
case 'blur': _paq.push(['trackEvent', 'Tripetto Form', 'Form input element lost focus.', block.name ]); break;
case 'pause': _paq.push(['trackEvent', 'Tripetto Form', 'Form is paused.', form.name ]); break;
case 'complete': _paq.push(['trackEvent', 'Tripetto Form', 'Form is completed.', form.name ]); break;
}
}
}
Could you give it a go?
Cheers,
Richard
Hi Richard,
I will definitely give it a go, thank you very much for looking into it! The problem I guess we’ll have is, that the Piwik Plugin might not be loaded, because the Tripetto Wordpress install seems to bypass almost everything in Wordpress and I could not see it loading anywhere. But I will try and activate the plugin again and give your code a try, thanks again
Best, Oliver
Nope, that does not seem to work either - certainly because the Piwik Pro Plugin does not load on the tripetto form at Hermaid Screener Warteliste
Tripetto bypasses the normal WP body I think… But thank you for your help very much, it was worth a try!
In that case, you could add the manually install code, as seen in administration area.
Because indeed the WP Piwik PRO installation code is not added by Tripetto by default.
So the solution would be to add both the async installation code ( as documented here: Install a container (with a tracking code) | Piwik PRO help center )
without the surrounding elements
Together with the code to listen to the Tripetto events:
It will be like this, but your installation code will show the correct CLIENT and ID of the site, when getting them from the Installation tab of Sites & apps.
// Piwik PRO installation code
(function(window, document, dataLayerName, id) {
window[dataLayerName]=window[dataLayerName]||[],window[dataLayerName].push({start:(new Date).getTime(),event:"stg.start"});var scripts=document.getElementsByTagName('script')[0],tags=document.createElement('script');
function stgCreateCookie(a,b,c){var d="";if(c){var e=new Date;e.setTime(e.getTime()+24*c*60*60*1e3),d="; expires="+e.toUTCString();f="; SameSite=Strict"}document.cookie=a+"="+b+d+f+"; path=/"}
var isStgDebug=(window.location.href.match("stg_debug")||document.cookie.match("stg_debug"))&&!window.location.href.match("stg_disable_debug");stgCreateCookie("stg_debug",isStgDebug?1:"",isStgDebug?14:-1);
var qP=[];dataLayerName!=="dataLayer"&&qP.push("data_layer_name="+dataLayerName),isStgDebug&&qP.push("stg_debug");var qPString=qP.length>0?("?"+qP.join("&")):"";
tags.async=!0,tags.src="https://CLIENT.containers.piwik.pro/"+id+".js"+qPString,scripts.parentNode.insertBefore(tags,scripts);
!function(a,n,i){a[n]=a[n]||{};for(var c=0;c<i.length;c++)!function(i){a[n][i]=a[n][i]||{},a[n][i].api=a[n][i].api||function(){var a=[].slice.call(arguments,0);"string"==typeof a[0]&&window[dataLayerName].push({event:n+"."+i+":"+a[0],parameters:[].slice.call(arguments,1)})}}(i[c])}(window,"ppms",["tm","cm"]);
})(window, document, 'dataLayer', 'REPLACE-with-the-correct-ID-of-the-site');
// Tripetto event listeners code
function() {
// Init the tracking queue
var _paq = window._paq = window._paq || [];
// Send events to Piwik PRO (only include the event rules below that you want to track)
return function(event, form, block) {
switch (event) {
case 'start': _paq.push(['trackEvent', 'Tripetto Form', 'Form is started.', form.name ]); break;
case 'stage': _paq.push(['trackEvent', 'Tripetto Form', 'Form block becomes available.', block.name ]); break;
case 'unstage': _paq.push(['trackEvent', 'Tripetto Form', 'Form block becomes unavailable.', block.name ]); break;
case 'focus': _paq.push(['trackEvent', 'Tripetto Form', 'Form input element gained focus.', block.name ]); break;
case 'blur': _paq.push(['trackEvent', 'Tripetto Form', 'Form input element lost focus.', block.name ]); break;
case 'pause': _paq.push(['trackEvent', 'Tripetto Form', 'Form is paused.', form.name ]); break;
case 'complete': _paq.push(['trackEvent', 'Tripetto Form', 'Form is completed.', form.name ]); break;
}
}
}
Give it a spin if you like and let us know what the outcome is.
Hi Richard,
thanks for looking at this again… I used the code and made sure to use our ID / container URL. The behaviour is strange, I cannot even see a call in the network debugger going out to piwik on Hermaid Screener Warteliste - Perhaps I need to ask their support…
Thanks again, Oliver
Yes, I think a question to their support would make things more clear.
If you gain some insights on the working of the implementation on their end, we can probably stitch the two platforms pretty easy. I don’t see any of the added script code in the sources of the page. It looks like it is not available.
Hello @rmastop et al, I worked a while with Tripetto support and we resolved part of it. Basically they suggested a script without the container just the basic tracking code and then their events section.
- Wen can now see the Piwik scripts firing
- But we cannot see the events firing when you use the questionnaire
And they cannot help further. Could someone take a look again if there’s any idea, why the events are not firing. The whole form is an iframe, but so it the code to initialise the tracking…
CODE:
function() {
var _paq = _paq || ;
_paq.push([“trackPageView”]);
_paq.push([“enableLinkTracking”]);
(function() {
var u=“https://hermaid.piwik.pro/”;
_paq.push([“setTrackerUrl”, u+“ppms.php”]);
_paq.push([“setCookieDomain”, “*.hermaid.me”]);
_paq.push([“setSiteId”, “ba0aee67-7fc6-454b-af93-36744243286b”]);
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+“ppms.js”; s.parentNode.insertBefore(g,s);
})();
return function(event, form, block) {
switch (event) {
case ‘start’: _paq.push([‘trackEvent’, ‘Tripetto Form’, ‘Form is started.’, form.name ]); break;
case ‘stage’: _paq.push([‘trackEvent’, ‘Tripetto Form’, ‘Form block becomes available.’, block.name ]); break;
case ‘unstage’: _paq.push([‘trackEvent’, ‘Tripetto Form’, ‘Form block becomes unavailable.’, block.name ]); break;
case ‘focus’: _paq.push([‘trackEvent’, ‘Tripetto Form’, ‘Form input element gained focus.’, block.name ]); break;
case ‘blur’: _paq.push([‘trackEvent’, ‘Tripetto Form’, ‘Form input element lost focus.’, block.name ]); break;
case ‘pause’: _paq.push([‘trackEvent’, ‘Tripetto Form’, ‘Form is paused.’, form.name ]); break;
case ‘complete’: _paq.push([‘trackEvent’, ‘Tripetto Form’, ‘Form is completed.’, form.name ]); break;
}
}
}
I checked your implementation and the _paq array used for API communication is not declared in global namespace until the ppms.js file is loaded.
Please make sure that the _paq you configure is declared in global namespace.
If you declare it inside a function then easiest way to fix that would be replacing this code:
var _paq = _paq || [];
with this:
var _paq = window._paq = window._paq || [];
Try it and let us know if it’ll help.
Hi Roman, thanks for this, yes I now notice the mistake. But still - unfortunately the only change is that now the pageview gets recorded but still none of the events are firing. Any other suggestions on this? Thank you all, Oliver