Hotjar Tracking in your Vanilla Community - HL Vanilla Community
<main> <article class="userContent"> <p>If you have a Hotjar account, you can use its products to get more and deeper insights into how users navigate and use your <strong>Higher Logic Vanilla</strong> (<strong>Vanilla</strong>) community.</p><p>đź“ť <strong>NOTE</strong>: A Hotjar account is <strong>required</strong> for this functionality. Visit <a href="https://hotjar.com/" rel="nofollow noreferrer ugc">hotjar.com</a> to learn more and to open an account.</p><p>With Hotjar products enabled in your community, you can:</p><ul><li>use activity heatmaps to see which areas are "hot" and which are not;</li><li>track users' moves, clicks, and scrolling during their visit; and</li><li>collect user feedback via an online "suggestion box."</li></ul><h2 data-id="install-hotjar-in-the-foundation-theme">Install Hotjar in the Foundation Theme</h2><p>You have to perform installation steps in Hotjar and Vanilla.</p><h4 data-id="in-hotjar">In Hotjar</h4><p>1. Go to the <a href="https://insights.hotjar.com/site/list" rel="nofollow noreferrer ugc">https://insights.hotjar.com/site/list</a> page and click <strong>Tracking Code</strong>.</p><p>2. Copy and save the code.</p><h4 data-id="in-vanilla">In Vanilla</h4><p>1. Access the Dashboard.</p><p>2. Navigate to <strong>Appearance > Style Guides</strong>, then access the Foundation Theme Editor and click the <strong>JavaScript</strong> tab.</p><p>3. On the JavaScript tab, add the Hotjar Tracking Code, without the <script> listing.</p><p>4. Use the <strong>onVanillaReady</strong> function (documented in <a href="https://success.vanillaforums.com/kb/articles/271" rel="nofollow noreferrer ugc"><em>Analytics Events</em></a>).</p><p>The JavaScript tab should resemble:</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/KCKBYX7UGMQG/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/KCKBYX7UGMQG/image.png" alt="image.png" height="664" width="1218" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>5. Save your changes.</p><p>6. Navigate to <strong>Settings > Technical > Security</strong>.</p><p>7. In the <strong>Content Security Domains</strong> field, add <strong>*.hotjar.com</strong>.</p><p>This will cause the script to run and send data to Hotjar.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/2RFODM46D5LF/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/2RFODM46D5LF/image.png" alt="image.png" height="462" width="1508" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="hotjar-in-other-themes">Hotjar in Other Themes</h2><p>If you are installing Hotjar in any other theme, use <a href="https://success.vanillaforums.com/kb/articles/19-pockets" rel="nofollow noreferrer ugc">Pockets</a>, as you would for any other tracker.</p><p>đź“ť <strong>NOTE</strong>: The data of your Knowledge Base will <strong>not be tracked</strong>.</p> </article> </main>