Analytics Events - HL Vanilla Community
<main> <article class="userContent"> <p>In this article, you'll learn about two Analytics events:</p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">pageView</code></li><li><code class="code codeInline" spellcheck="false" tabindex="0">pageViewWithContext</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 a 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 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.</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, that 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><strong>📝 NOTE</strong>: This event is currently only available in <strong>Knowledge Base</strong>.</p><p>For site administrators looking for additional information about a loaded page, they can subscribe to the <code class="code codeInline" spellcheck="false" tabindex="0">pageViewWithContext</code> event instead. </p><p><strong>🛑 WARNING</strong>: <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 (<code class="code codeInline" spellcheck="false" tabindex="0">/kb/my-knowledge-base</code>)</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>You can add this JavaScript anywhere 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 <strong>JavaScript </strong>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>