AJAX is a technology that allows the page to fetch more data and content without reloading.
- The Bootstrap.js file and serverComponent calls only occur once per "real pageload."
- Post-pageload AJAX activity does not update or refresh any of the Manage deployments.
- Key Point: The initial load of the page where AJAX activity is expected to occur must download a FULL PAYLOAD of any and all tracking code that might be need for later AJAX tracking.
AJAX Tracking Approach
- Setup listeners within the DOM that wait for certain things to occur.
- When the listeners trigger, execute additional tag code.
Use Case: AJAX Infinite Scroll
When an internal search is performed and user continues to scroll down through the results page, more results keep showing up (being a continual AJAX fetch).
If we want to fire a pixel off when any search result link is clicked.
Need to do
- Dispatch a delegated event (Bootstrapper.on or jQuery.on function with a CSS selector)
The event actually sits on the document root (and listens for clicks on all the search results links) - this approach will automatically work for both the links that existed upon page load - as well as all the new links that were brought in via AJAX.
Use Case: AJAX Form Submission
Take the case of a user filling out an online AJAX feedback form that validates server-side. Say that you want to fire a tag on a successful feedback submission when the form has successfully validated and has successfully submitted with an message is the AJAX response of "your feedback has been sent."
Need to do
- Setup a "listener" within the DOM that can trigger appropriate code once the form is successfully completed.
- Use Value Change Ensighten Events (perfect to solve this tricky scenario)
The AJAX listener "listens" within the DOM and waits for a specific element to exist. As soon as that element exists, it fires off the custom (appropriate) code. In essence, it is a fancy way of executing a setInterval to check for something on the page.
HTML Available On the Page
<div id="notification" class="top-right" style="right: 551.5px;">
<div class="header-notification default" style="display: block">
<img class="feedback-received" src="/images/feedback-received-png">
Your feedback has been sent
Extractor for EDL Data Definition - To Be Used in Value Change Ensighten Event
var a = jQuery("div#notification div.header:contains(Your feedback has been sent");
return "Feedback Form Success DIV Found";
return "Feedback Form Success DIV NOT Found";