Analytics Events - Vanilla Success
<main> <article class="userContent"> <p><em>The custom </em><em><code class="code codeInline" spellcheck="false" tabindex="0">pageView</code></em><em> event described in this article is available starting from the following releases.</em></p><ul><li>Knowledge Base Pages - <code class="code codeInline" spellcheck="false" tabindex="0">2020.006</code></li><li>Community Pages - <code class="code codeInline" spellcheck="false" tabindex="0">2020.009</code> </li></ul><h2 data-id="the-pageview-event">The <code class="code codeInline" spellcheck="false" tabindex="0">pageView</code> event</h2><p>Every time the page changes Vanilla fires an event called <code class="code codeInline" spellcheck="false" tabindex="0">pageView</code>. You might wonder, <em>"Why do I need an event? Doesn't javascript normally execute on every page?"</em></p><p>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.</p><p>Because of this Vanilla fires an event <code class="code codeInline" spellcheck="false" tabindex="0">pageView</code> when:</p><ul><li>A full document is loaded.</li><li>The page changes dynamically to a new resource.</li></ul><p><em>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 </em><em><code class="code codeInline" spellcheck="false" tabindex="0">/kb/articles/5-analytics-event</code></em><em> to </em><em><code class="code codeInline" spellcheck="false" tabindex="0">/kb/articles/5-analytics-events#the-pageview-event</code></em><em> this is </em><strong><em>not</em></strong><em> considered a new page view. It is just deeper navigation into the same resource.</em></p><h3 data-id="generic-example">Generic Example</h3><pre class="code codeBlock" spellcheck="false" tabindex="0">document.addEventListener("pageView", function(e) { // Do something with analytics }) </pre><h3 data-id="hubspot-example">HubSpot Example</h3><p>Replace the XXXXXX.js with your current HubSpot ID</p><pre class="code codeBlock" spellcheck="false" tabindex="0"> /** * 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); } </pre><h3 data-id="google-analytics-example">Google Analytics Example</h3><pre class="code codeBlock" spellcheck="false" tabindex="0">// 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); }) </pre><h2 data-id="the-pageviewwithcontext-event">The <code class="code codeInline" spellcheck="false" tabindex="0">pageViewWithContext</code> event</h2><p><em>Note: This event is currently only available in Knowledge Base.</em></p><p>For site administrators looking for additional information about the page that is loaded, they can subscribe to a different event instead. <strong>Do not trigger your analytics on both events, or you will get duplicate analytics data.</strong></p><p>This <code class="code codeInline" spellcheck="false" tabindex="0">pageViewWithContext</code> event runs slightly later than the <code class="code codeInline" spellcheck="false" tabindex="0">pageView</code> 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 <code class="code codeInline" spellcheck="false" tabindex="0">APIv2</code> endpoint, so if a page returns information about a <code class="code codeInline" spellcheck="false" tabindex="0">knowledgeBase</code> that data will be in the format returned by the <code class="code codeInline" spellcheck="false" tabindex="0">/api/v2/knowledge-bases/:id</code> endpoint.</p><h3 data-id="example">Example</h3><pre class="code codeBlock" spellcheck="false" tabindex="0">document.addEventListener("pageViewWithContext", function(event) { var info = event.detail; // Do something with the event information. }); </pre><h2 data-id="contexts-for-different-pages">Contexts for Different Pages</h2><p>Here are a few examples of data provided on different pages.</p><h3 data-id="knowledge-base-page-(kbmy-knowledge-base)">Knowledge Base Page (/kb/my-knowledge-base)</h3><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">knowledgeBase</code> - <a href="https://success.vanillaforums.com/kb/articles/202-apiv2-reference-endpoints#/Knowledge%20Bases/get_knowledge_bases__id_" rel="nofollow noreferrer ugc">A knowledge-base record</a>.</li></ul><h3 data-id="article-listcategory-page">Article List/Category Page</h3><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">knowledgeBase</code> - <a href="https://success.vanillaforums.com/kb/articles/202-apiv2-reference-endpoints#/Knowledge%20Bases/get_knowledge_bases__id_" rel="nofollow noreferrer ugc">A knowledge-base record</a>.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">knowledgeCategory</code> - <a href="https://success.vanillaforums.com/kb/articles/202-apiv2-reference-endpoints#/Knowledge%20Categories/get_knowledge_categories__id_" rel="nofollow noreferrer ugc">A knowledge-category record.</a></li></ul><h3 data-id="article-page">Article Page</h3><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">knowledgeBase</code> - <a href="https://success.vanillaforums.com/kb/articles/202-apiv2-reference-endpoints#/Knowledge%20Bases/get_knowledge_bases__id_" rel="nofollow noreferrer ugc">A knowledge-base record</a>.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">knowledgeCategory</code> - <a href="https://success.vanillaforums.com/kb/articles/202-apiv2-reference-endpoints#/Knowledge%20Categories/get_knowledge_categories__id_" rel="nofollow noreferrer ugc">A knowledge-category record.</a></li><li><code class="code codeInline" spellcheck="false" tabindex="0">article</code> - <a href="https://success.vanillaforums.com/kb/articles/202-apiv2-reference-endpoints#/Articles/get_articles__id_" rel="nofollow noreferrer ugc">An article record</a>.</li></ul><h2 data-id="where-do-i-add-the-javascript">Where do I add the Javascript?</h2><p>This javascript could be added anywhere that in Vanilla that supports javascript. The easiest places to add it will be:</p><ul><li>By copying your theme-template and adding it in the "Javascript" tab.</li><li>By creating a pocket with the location "Head". (<em>Not currently available in Knowledge Base</em>)</li></ul><p><br></p> </article> </main>