We have an Ajax application which is a single page with a tab object to show the progress of a form completion. The screen recording works for the first section when the user clicks to display the second section of the form on next tab object the data is not displayed. Obviously this is because the data is sent from the server as an Ajax request. I have read the docs regarding content tracking but not sure which JavaScript to send from the server to trigger the update of the Dom to display the data on the second section.
I am new to matomo any help would be appreciated
Thanks
Paul
var _paq = _paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//www.youdopet.com/analytics/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', '1']);
_paq.push(['trackPageView']);
_paq.push(['trackAllContentImpressions']);
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);
})();
And i added the piwikTrackContent class to the divs containg my ajax content but still no luck not updating.
Hi Paul, I suggest you either post the URL of your website here or send an email to InnoCraft via contact at innocraft.com so we can have a look at it and reproduce your experience. The steps on how to reproduce it be great as well. Would that be possible?
Choose Get a Quote this goes to our application via reverse proxy. Tracking code inc in our app page
Select Insurer page of get a quote works ok. Go through selection until you get the next button
Next loads Select Cover Page via ajax. On the second page the session recording does not display the data in the left-hand column entitled your policy all the fields aew blank. And when a selection made in the right-hand column our cover for veterinary fees the session recording does not display the fields
If you continue through the process the same thing happens on Estimate savings Page.
we have debugged quite a while and have found the problem. It seems like the elements / input value field is changed in the background via JavaScript like inputField.value = '' but the value attribute on the input field is not updated. As neither the value attribute is updated, nor the change event is triggered on the input field, the tracker is not able to capture the change.
Can maybe you or your developers change the value attribute of the text fields when you change the value in the background?
Hello Thomos see below from our dev. Can you explina a bit more about the value attribute
It seems like the elements / input value field is changed in the background via JavaScript likeinputField.value = ‘’ but the value attribute on the input field is not updated.
Yes, that’s how AJAX works. The Inspect Element will show the current DOM value which may differ from the original load value after AJAX updates. The value is definitely updated in the DOM otherwise you would have experienced major data drops?
Can maybe you or your developers change the value attribute of the text fields when you change the value in the background?
Can maybe you or your developers change the value attribute of the text fields when you change the value in the background?
Can they elucidate on that?
I presume depending on the selection on the “Get quote” page, the devs update the default values of those form fields using the DOM like inputField.value = '5'. My question was if they could eg on top or as a replacement set the value by using inputField.setAttribute('value', 5);? This way the browser would trigger an event about the DOM change and we could capture this change in our plugin.
If I provided a mechanism for you to call their JS update function would that help? That should be easy enough and then surely they can scan the page and retreive the values just like I do myself when sending/receiving data?
An alternative would be to trigger the so called change event on the form fields when the developers change the value of the form fields. For example
if ("createEvent" in document) {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", true, false);
element.dispatchEvent(evt);
}
else {
element.fireEvent("onchange");
}
or if only newer browsers are supported:
var event = new Event('change');
element.dispatchEvent(event);
For more information see Creating and triggering events - Web developer guides | MDN . In case they are using something like jQuery then $(element).change() could work as well. If the change event is for some reason not an option, we could maybe check to use a custom event name but this should not be needed.
If this is not possible, we could think about adding a new tracker method where the developers let us know when a form element value changed “secretly” (this is the case currently, it is neither triggering the change event, nor changing the value attribute) like this:
Note that this new tracking feature is not available yet and we would need to add it. The change event is already supported and would work out of the box. It shouldn’t be more work to trigger the change event for the developers.
Thanks Thomas, We are using jquery so can use $(element).change() However the major issue is that when a user selects say from a combo box we are updating the page with a lot of calculated read only data via ajax (its online quote page) and we cannot see what the user has loaded therefore we need the whole dom refreshed not just the element. Is that poss ?
That would probably not be the best but there are two/three ways.
We had a look how your website applies your values and noticed you send this in the ajax response:
ltgObj('[Signup]RenewAmount').val('0');
Change this to eg ltgObj('[Signup]RenewAmount').val('0').change() or ltgObj('[Signup]RenewAmount').attr('value', '0');
Alternatively, after the Ajax request, if you want to update the whole DOM, you could execute this: $('#compare input').change() but this would be less recommended i would say.
Hello Thomas, We have update dour app. Could you please check again and let me know what I need to do to capture the data. I tried setting up a test server for this but that gives me a different problem. So i am stumped.
Thanks