# Best way to implement Chartbeat

**URL:** https://meta.discourse.org/t/best-way-to-implement-chartbeat/58026
**Category:** Support
**Created:** [Fevereiro 27, 2017, 4:51pm UTC](https://meta.discourse.org/t/best-way-to-implement-chartbeat/58026 "2017-02-27T16:51:19Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![frostydog](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/frostydog/32/68228_2.png) [@frostydog](https://meta.discourse.org/u/frostydog)
#### Post date: [Fevereiro 27, 2017, 4:51pm UTC](https://meta.discourse.org/t/best-way-to-implement-chartbeat/58026/1 "2017-02-27T16:51:19Z")

</div>

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](http://support.chartbeat.com/docs/#ajax), 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](http://example.com/page1), but the page changes to the virtual page [http://example.com/page2](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 🙂

---

<div class="post-metadata">

### Author: ![frostydog](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/frostydog/32/68228_2.png) [@frostydog](https://meta.discourse.org/u/frostydog)
#### Post date: [Fevereiro 28, 2017, 6:19pm UTC](https://meta.discourse.org/t/best-way-to-implement-chartbeat/58026/2 "2017-02-28T18:19:49Z")

</div>

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](https://meta.discourse.org/t/setup-google-tag-manager-for-analytics/47335). 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:

 ![](https://global.discourse-cdn.com/meta/original/3X/7/5/75f3d60078599ec37f78c3f88fe65aea8f234270.jpg)

Finally, I added the [standard Chartbeat code](http://support.chartbeat.com/docs/#code) on the `</body>` section in the Customize → CSS/HTML admin panel.

That’s it! 🙂

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [Maio 17, 2019, 4:04pm UTC](https://meta.discourse.org/t/best-way-to-implement-chartbeat/58026/3 "2019-05-17T16:04:17Z")

</div>



---

<div class="post-metadata">

### Author: ![neil](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/neil/32/102150_2.png) [@neil](https://meta.discourse.org/u/neil)
#### Post date: [Maio 17, 2019, 6:29pm UTC](https://meta.discourse.org/t/best-way-to-implement-chartbeat/58026/4 "2019-05-17T18:29:30Z")

</div>


