The custom pageView event described in this article is available starting from the following releases.
- Knowledge Base Pages -
2020.006 - Community Pages -
2020.009
The pageView event
Every time the page changes Vanilla fires an event called pageView. You might wonder, "Why do I need an event? Doesn't javascript normally execute on every page?"
While this is currently the case for the community, newer parts of Vanilla like Knowledge Base use a dynamic routing system. This means that even if the URL of browser changes, and new content is loaded, the full document is not necessarily reloaded. Instead the same document is preserved, and additional data is loaded using Vanilla's APIv2 endpoints.
Because of this Vanilla fires an event pageView when:
- A full document is loaded.
- The page changes dynamically to a new resource.
It's worth noting that just because the URL changes, doesn't mean Vanilla considers it a new page view. For example, if the URL changes from /kb/articles/5-analytics-event to /kb/articles/5-analytics-events#the-pageview-event this is not considered a new page view. It is just deeper navigation into the same resource.
Generic Example
document.addEventListener("pageView", function(e) {
// Do something with analytics
})
HubSpot Example
Replace the XXXXXX.js with your current HubSpot ID
/**
* Stuff that executes when vanilla is finished loading.
*/
onVanillaReady(function () {
/**
* Hubspot Tracker
*/
addScript("https://js.hs-scripts.com/XXXXXXX.js");
})
function addScript(src) {
var s = document.createElement('script');
s.setAttribute('src', src);
s.setAttribute("async", "async");
s.setAttribute("defer", "defer");
document.body.appendChild(s);
}
Google Analytics Example
// This if state is in case some other part of the page
// has already loaded and configured google analytics
if (!window.ga) {
(function (i, s, o, g, r, a, m) {
i["GoogleAnalyticsObject"] = r;
(i[r] =
i[r] ||
function() {
(i[r].q = i[r].q || []).push(arguments);
}),
(i[r].l = 1 * new Date());
(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m);
})(window, document, "script", "//www.google-analytics.com/analytics.js", "ga");
// Put your own Google analytics ID here.
ga("create", "UA-########-#", "auto");
// Additional analytics configuration here.
ga("require", "displayfeatures");
}
document.addEventListener("pageView", function () {
// Note we manually pass the URL we calling.
// If you don't do this, Google will only ever record the initial page.
// The hash helps you track if people deep-link directly to certain parts of the page.
// It can be omitted if you do not care to track that.
var analyticsPath;
// Try get the recorded pages canonical.
// This will help keep analytics more consistent if people view articles through alternative URLs.
var canonicalLink = document.querySelector("link[rel='canonical']");
if (canonicalLink) {
var canonicalHref = canonicalLink.getAttribute("href");
if (canonicalHref) {
var canonicalUrl = new URL(canonicalHref);
analyticsPath = canonicalUrl.pathname;
}
}
if (!analyticsUrl) {
analyticsUrl = window.location.pathname;
}
// Add the current #hash selector onto the URL if you want to track people visiting specific parts of pages.
// This is optional and will vary based on how you prefer to track your analytics.
// If you use this, the following URLs will be considered as different pages if they are linked too.
analyticsUrl += window.location.hash;
// Record the page view.
ga("send", "pageview", analyticsUrl);
})
The pageViewWithContext event
Note: This event is currently only available in Knowledge Base.
For site administrators looking for additional information about the page that is loaded, they can subscribe to a different event instead. Do not trigger your analytics on both events, or you will get duplicate analytics data.
This pageViewWithContext event runs slightly later than the pageView event because it provides a lot of structured data about the current page. This data is generally equivalent in structure to what is returned from a resources APIv2 endpoint, so if a page returns information about a knowledgeBase that data will be in the format returned by the /api/v2/knowledge-bases/:id endpoint.
Example
document.addEventListener("pageViewWithContext", function(event) {
var info = event.detail;
// Do something with the event information.
});
Contexts for Different Pages
Here are a few examples of data provided on different pages.
Knowledge Base Page (/kb/my-knowledge-base)
Article List/Category Page
Article Page
Where do I add the Javascript?
This javascript could be added anywhere that in Vanilla that supports javascript. The easiest places to add it will be:
- By copying your theme-template and adding it in the "Javascript" tab.
- By creating a pocket with the location "Head". (Not currently available in Knowledge Base)