Best way to implement Chartbeat

[frostydog (Ed Arcos)]

Not sure if anyone else is using Chartbeat but we use it everyday on our website. Since we’re soon launching our own community with Discourse we would love to see our realtime traffic.

I couldn’t find anyone else explaining the best way to implement Chartbeat code, so I decided to ask.

According to Chartbeat documentation, if the website serves up content dynamically via AJAX like Discourse, there is a need to call the function virtualPage everytime a visitor navigates to a new page or piece of content.

From the documentation:

If your site “changes pages” without actually going to a new url, using for example AJAX, you can inform Chartbeat about these new pages by using the virtualPage() function.

For example, if the page the user is loading is http://example.com/page1, but the page changes to the virtual page http://example.com/page2, you should call this:

pSUPERFLY.virtualPage("/page2", "New Title");

The second parameter is the title for the new virtual page, and is optional.

So I was wondering if anyone can help me to find out the best way to call this function from Discourse without the need to write a whole plugin

[frostydog (Ed Arcos)]

I will answer myself for future reference, if someone needs to use Cloudflare with Discourse.

First: I followed @neil 's guide to add Google Tag Manager in Discourse. Why are we using GTM? We need to fire two Google Analytics tags and ComScore’s tag.

Then, I just created a new Custom HTML tag with the following code:

<script type="text/javascript">
pSUPERFLY.virtualPage(location.pathname, document.title);
</script>

Which fires everytime virtualPageView is invoked. On advanced settings I left the “fire once per event” option.

Here’s a screenshot:

Finally, I added the standard Chartbeat code on the </body> section in the Customize → CSS/HTML admin panel.

That’s it!