🛑 IMPORTANT: This article is intended only for developers.
In this article, you'll learn about two Analytics events:
- pageView
- pageViewWithContext
The pageView event
Every time a 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, such as Knowledge Base, use a dynamic routing system. This means that even if the URL of the 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 the pageView event when:
- a full document is loaded and
- the page changes dynamically to a new resource.
📝 NOTE: The fact that the URL changes doesn't mean that Vanilla considers it a new page view. For example, the URL changing from /kb/articles/5-analytics-event to /kb/articles/5-analytics-events#the-pageview-event 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
📝 NOTE: Replace 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.async = true; s.defer = true; 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 analyticsif (!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.
Site administrators who are looking for additional information about a loaded page can subscribe to the pageViewWithContext event instead.
📝 NOTE: 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?
You can add this JavaScript anywhere in Vanilla that supports JavaScript. We recommend that you either:
- Copy your theme-template and add it in the JavaScript tab.
- Create a pocket with the location "Head". (Not currently available in Knowledge Base)