Manual installation for SPA sites

Much of the functionality in Triggerbee revolves around recording web traffic and that page views are being logged. Normally page views are automatically logged to Triggerbee if the tracking script is present on the page. But if you are running a website that is set up as a SPA - Single Page App you need to configure Triggerbee a bit in order for it to work for you in the way it is supposed to.

What is a SPA - Single Page App?

Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app. SPAs use javascript and HTML5 to create fluid and responsive Web apps, without constant page loads. However, this means much of the work happens on the client side, in JavaScript

So since there is no real page loads the Triggerbee tracking script doesn't register that the user shifts from one page to another. Modern browsers' location field can also be dynamically updated using a script so the page views become completely virtual and appear to have loaded an entire page although it is just javascript.

Scripting guidelines

Visitor Analytics

To get the visitor analytics to work you need to log each "virtual page view" using the Triggerbee Javascript API. 

Add the following example lines in your script where you change pages:

mtr.log("/services", "Services");<br>

Onsite Campaigns

If you are programmatically changing the URL that is logged to Triggerbee you need to be aware that the Onsite Campaign will only respond to the URL visible in the browser. 

For example, let's say that your SPA web opens a URL with the path /articles/1234567/qwerty/  but you log /articles/sports/bjorn-borg-wins-wimbledon to Triggerbee using mtr.custom.href. If you want a Campaign to appear on this page you still need to enter the path /articles/1234567/qwerty/ in the Widget Campaign editor.

Example scripts

Here's an example of a working SPA script. Feel free to use it!

<script type="text/javascript">
var mtr_spa = mtr_spa || (function () {

var lastPageUrl;

// The page has changed, get the values and log
function pageHasChanged(e) {
var url = e.arguments[2];
var title = e.arguments[1];

if (!title) {
var tempTitle = document.title;
var waitTimeToGetTitle = 400;
setTimeout(function () {
if (tempTitle !== document.title) {
title = document.title;
}
logAndInitWidgets(url, title);
}, waitTimeToGetTitle);
} else {
logAndInitWidgets(url, title);
}
}

// Log to tracker and init widgets
function logAndInitWidgets(url, title) {
if (url && lastPageUrl !== url) {
lastPageUrl = url;
// console.error('Title: ' + title + ' Url: ' + url + ' lastPageUrl: ' + lastPageUrl);
mtr.log(url, title, 'pageview');
if (typeof triggerbee !== 'undefined' && typeof triggerbee.widgets !== 'undefined') {
triggerbee.widgets.api.reset();
triggerbee.widgets.api.initAsync();
}

triggerEvent('onTriggerbeeSpaPageChanged', { url: url, title: title });
}
}

// Cross-browser events
function createNewEvent(eventName) {
var event;
if (typeof (Event) === 'function') {
event = new Event(eventName);
} else {
event = document.createEvent('Event');
event.initEvent(eventName, true, true);
}
return event;
}

function triggerEvent(eventName, data) {
if (document.createEvent) {
var customEvent = document.createEvent("Events");
customEvent.detail = data;
customEvent.initEvent(eventName, true, true);
document.dispatchEvent(customEvent);
}
}

// Utillity method to make pushState/replaceState listenable
var _wr = function (type) {
var orig = history[type];
return function () {
var rv = orig.apply(this, arguments);
var e = createNewEvent(type);
e.arguments = arguments;
window.dispatchEvent(e);
return rv;
};
};
history.pushState = _wr('pushState'), history.replaceState = _wr('replaceState');

// Add events to listen to changes, log to tracker
window.addEventListener('pushState', function (e) {
pageHasChanged(e);
});
window.addEventListener('replaceState', function (e) {
pageHasChanged(e);
});

});

if (!window.mtr_spa_init) {
window.mtr_spa_init = true;
mtr_spa();
}
</script>

And here's an example of how to track page views on a SPA by injecting logging events on all links in the top navigation:

var triggerbeeCustom = triggerbeeCustom || (function () {
function init() {
  // Custom logging
  $('.navbar-nav li a').click(function () {
  logEvent($(this))
  ;})
}
function logEvent($element)
{
  var url = '/' + $element.attr('href');
  url = url.replace(/#/,"");
  var title = $element.text();
  mtr.log(url, title);
}
init(); // Init on load
return {;}})();