Web Apps built on a single page are becoming an increasingly common way of displaying content. By default, our JS SDK looks for indicators like a new page loading in order to know when to fire key events like pageviews or inventory collection. While those don't exist in a single-page app, LiftIgniter has several built-in features to help our Javascript SDK work seamlessly with these types of sites.
Hash Routing OR HTML5 pushState
If you are using either hash routing or the pushState functionality of HTML5, you can use a simple $p("init") config to enable our system to detect this - just include "pushStateReset" : "true" in the config argument.
<script type="text/javascript">
if (typeof $igniter_var === 'undefined') {
// Ensures that our client code is updated.
(function(w,d,s,p,v,e,r) {w.$ps = (w.performance &amp;&amp; w.performance.now &amp;&amp; typeof(w.performance.now) == "function") ? w.performance.now() : undefined;w['$igniter_var']=v;w[v]=w[v]||function(){(w[v].q=w[v].q||[]).push(
arguments)};w[v].l=1*new Date();e=d.createElement(s),r=d.getElementsByTagName(s)[0];e.async=1;
e.src=p+'?ts='+(+new Date()/3600000|0);
r.parentNode.insertBefore(e,r)})(window,document,'script','//cdn.petametrics.com/JAVASCRIPT_KEY.js','$p');
// Don't forget to REPLACE JAVASCRIPT_KEY for cdn url.
var customConfig = {
sdk: {
pushStateReset: true
}
}
$p("init", "JAVASCRIPT_KEY", customConfig); // REPLACE JAVASCRIPT_KEY
$p("send", "pageview");
}
</script>Other Implementations
If you are using a different method to control displaying new content in your single page web app, you'll want to leverage the $p("resetPageview") function instead. When invoked, this function re-initializes our script - that includes sending a new pageview, resetting activity timers, fetching new recommendations, and applying tracking parameters to newly rendered recommendations. You'll want to trigger $p("resetPageview") in the right place within your page transition sequence - it should be late enough that page metadata has updated for the new content, but not so late that we may miss or miscalculate data or see a noticeable delay in recommendations loading on the page.
Common Issues
1) Not all metadata is updated on the page
The most common example of this is the canonical URL. If the canonical URL of the page is always set to the homepage, this can prevent us from correctly collecting inventory or matching activity data to inventory items. If your web app always uses the same canonical URL, please contact Support and we can modify your account's settings to use the URL displayed in the browser instead of the canonical URL.
Similar scenarios include other important metadata such as the title, description, category and tag metadata for your item. These are best handled by generating values within a custom JSON object for our inventory collection function to pick up.
2) Inventory collection is not triggering
In some cases, our inventory collection will not trigger because the page never finishes loading (or takes significantly longer than a few seconds to load). In this case, it can be useful to disable automatic inventory collection (which is keyed to the page having finished loading) and instead use the $p("sendItem") function instead.