# Adding subscriptions.js to Your Site

## Implementation requirements

Conversion is supported for websites using our tracking library (chartbeat.js or chartbeat\_video.js), covered in the [**website tracking guide**](https://docs.chartbeat.com/cbp/tracking/standard-websites/our-javascript). Customers planning to use our Conversion add-on should review our [Supported Conversion Flows](https://docs.chartbeat.com/cbp/feature-integrations/conversion/supported-conversion-flows) to determine whether or not Conversion is compatible with your conversion flow.&#x20;

Our subscriptions.js library is responsible for Chartbeat's main conversion tracking functionality on your sites. With subscriptions.js, you can track a user’s journey starting at a paywalled article and continuing through the moment they subscribe. Editorial, product, and subscription teams will be able to use the tool from our [Conversion Dashboard](https://help.chartbeat.com/hc/en-us/articles/15963582634267-Guide-to-Conversion) and see data in the [Real-Time Dashboard](https://help.chartbeat.com/hc/en-us/articles/15964458639131) and [Heads-Up Display](https://docs.chartbeat.com/cbp/feature-integrations/conversion/broken-reference). You can also access your top converting articles via the [Conversion API](https://docs.chartbeat.com/cbp/api/conversion-api).\
\
Once subscriptions.js is loading on your site, you'll need to fire [conversion events](https://docs.chartbeat.com/cbp/feature-integrations/conversion/conversion-events) through the global `chartbeat()` function to begin tracking your conversion flows and send key event properties to Chartbeat.&#x20;

There are two requirements for loading subscriptions.js on your site to begin tracking conversions.

#### First requirement

Our conversion snippet should be loaded in the ​`<head>` , after chartbeat.js, on all pages including articles and conversion flows.&#x20;

```markup
<!-- Chartbeat Conversion -->
<script type="text/javascript">
	(function(w,d,s,c,u){
		var qf=function(e,a){(w[c].q=w[c].q||[]).push([e,a]);};w[c]=w[c]||qf;
		var st=d.createElement(s);
		var fs=d.getElementsByTagName(s)[0];
		st.async=1;st.src=u;fs.parentNode.insertBefore(st,fs);
	})(window,document,'script','chartbeat','https://static.chartbeat.com/js/subscriptions.js');
</script>
<!-- End Chartbeat Conversion -->
```

{% hint style="info" %}
The conversion snippet must be loaded after chartbeat.js
{% endhint %}

#### Second requirement

Call the global `chartbeat()` function to track conversion events when they occur with optional parameters. Events fired after the subscriptions.js script loads will be tracked, and any fired before will not be tracked by Chartbeat.

See our [Conversion Events](https://docs.chartbeat.com/cbp/feature-integrations/conversion/conversion-events) to find the full list of the event methods to pass to the `chartbeat()` function.

```javascript
chartbeat('event_name', { // CHANGE THIS TO THE SUPPORTED EVENT YOU WANT TO TRACK
    pathOverride, // optional
    eventLabel, // optional
    eventValue, // optional
} );
```

{% hint style="info" %}
Only events fired after the subscriptions.js script loads will be tracked
{% endhint %}

## Complete example

Here's an example of our standard web tracking snippet with the conversion snippet included:

<pre class="language-markup"><code class="lang-markup"><strong>&#x3C;script type='text/javascript'>
</strong>  (function() {
      /** CONFIGURATION START **/
      var _sf_async_config = window._sf_async_config = (window._sf_async_config || {});
      _sf_async_config.uid = #####; //CHANGE THIS TO YOUR ACCOUNT ID
      _sf_async_config.domain = 'domain.com'; //CHANGE THIS TO YOUR SITE ID
      _sf_async_config.useCanonical = true;
      _sf_async_config.useCanonicalDomain = true;
      _sf_async_config.sections = ''; //SET PAGE SECTION(S)
      _sf_async_config.authors = ''; //SET PAGE AUTHOR(S)
      /** CONFIGURATION END **/
      function loadChartbeat() {
          var e = document.createElement('script');
          var n = document.getElementsByTagName('script')[0];
          e.type = 'text/javascript';
          e.async = true;
          e.src = '//static.chartbeat.com/js/chartbeat.js';
          n.parentNode.insertBefore(e, n);
      }
      loadChartbeat();
   })();
&#x3C;/script>
    
&#x3C;!-- Chartbeat Conversion -->
&#x3C;script type="text/javascript">
    (function(w,d,s,c,u){
	var qf=function(e,a){(w[c].q=w[c].q||[]).push([e,a]);};w[c]=w[c]||qf;
	var st=d.createElement(s);
	var fs=d.getElementsByTagName(s)[0];
	st.async=1;st.src=u;fs.parentNode.insertBefore(st,fs);
    })(window,document,'script','chartbeat','https://static.chartbeat.com/js/subscriptions.js');
&#x3C;/script>
&#x3C;!-- End Chartbeat Conversion -->
</code></pre>

## Limitations

Currently, tracking conversions is only supported for our [**standard website tracking integration**](https://help.chartbeat.com/hc/en-us/articles/360017557814). Though we offer unique *visitor tracking* integrations for native apps (along with AMP), we cannot provide conversion tracking for these separate platform integrations at this time.&#x20;

If you are a current customer and this functionality is important to your team, we'd like to hear from you! Shoot us a note at <feedback@chartbeat.com>.&#x20;

Sites that are using our [cookieless tracking](https://docs.chartbeat.com/cbp/tracking/standard-websites/alternative-integrations-web#implement-cookieless-tracking) or [cookieDomain variable](https://docs.chartbeat.com/cbp/tracking/standard-websites/configuration-variables#cookie-domain) are also not supported at this time.

## Next Steps

The next page of this guide covers the **full list of conversion events** available for your team to send to the Conversion tool.
