Ajax Implementation

 

If you are serving up a piece of content through AJAX, and if reach.js has already been implemented on the current page, all you need to do is create another object that looks like __reach_config (typically called __ajax_reach_config).

The difference between the new and old __reach_config's is that the new one will have the values for the page being loaded by AJAX. Generally this will mean that the title, url, date, and authors, categories and/or tags are going to change.

The new __reach_config will be passed to the SPR.Reach.collect() method when the new page is loaded. So if the above code was loaded once for the normal HTML page, the following will work:

var __ajax_reach_config = { ... };
SPR.Reach.collect(__ajax_reach_config);

You can do this as many times as you want for each new AJAX page load. It is not necessary to use the SPR.Reach.collect() method unless you are making an additional page load calls (i.e. AJAX or PJAX). The SimpleReach JavaScript will attempt initially assume that it is on a static page and send any __reach_config already on the page through the SPR.Reach.collect method on its own.

REFERRER ISSUES 

When tracking items in this way, there may be issues with the referrer. The referrer is a field that we automatically populate with document.referrer. Normally, this will provide us with the URL of the referring page (if applicable), which allows us to properly attribute referral types (i.e. direct, internal, external, etc.) in our tool.

"STICKY" REFERRER

Sometimes the initial referrer on page load "sticks" across all the slides in a slideshow. A user might arrive to a page via Facebook, and the referrer will be properly attributed to www.facebook.com on the initial slide, but incorrectly attributed as the referrer on every slide in the slideshow as well. If a user navigates to one slide from another, the referrer should be the URL for the previous slide. Since every slide change is collected as a page view, we don't want to inflate social referrals in our tool by incorrectly attributing multiple page views to the same URL.

If you encounter an issue with "sticky" referrers, do NOT manually populate the referrer field. Just add an additional field to your __ajax_reach_config object called ref_url. The ref_url field will override the referrer and should be populated with the correct referring URL. This is usually achieved by attributing the current URL to a variable before the slide change event, and then assigning that variable to the ref_url field when the SR code fires on the slide change. Of course, you may implement whatever logic works best for you—this is just an example.

It's very important that the ref_url field is not used on the initial page load (including situations where a user might navigate directly to a particular slide in a slideshow)—we still need to be able to pull in the correct initial referrer.

Do not include the ref_url field unless the "sticky" referrer is a known issue.

Ensuring accurate Average Engaged Time metrics

After the first valid SPR.Reach.collect() event is executed, a few things will happen. Page view data will be immediately sent to SimpleReach, and then the SimpleReach on-page JavaScript (reach.js) will begin to execute events in the background that capture engagement time.  As long as the user is engaging with the page reach.js will continue to send subsequent events.

If the user navigates to another part of the page through an ajax or infinite-scroll usecase and a second SPR.Reach.collect() event is executed, reach.js will begin to properly send engagement events for the second page, and will stop sending them for the first page. This is expected behavior.

In the event that the user navigates away from the tracked content to other content that should not be tracked, then you must execute a command to stop the engagement tracker from continuing to fire. The following code will stop engagement time from being tracked:

SPR.stop()

If this code does not fire when the user navigates from a tracked page to an ajax-loaded page that already has reach.js running on it, the page's "engaged time" metrics will appear inflated in the SimpleReach dashboard.