Adding subscriptions.js to Your Site

An introduction to our code snippet for tracking conversions on your site. Note that this is an add-on feature, not included in all Chartbeat service plans.

PreviousConversion NextConversion Events

Last updated 1 year ago

Was this helpful?

Adding subscriptions.js to Your Site

An introduction to our code snippet for tracking conversions on your site. Note that this is an add-on feature, not included in all Chartbeat service plans.

Implementation requirements

Conversion is supported for websites using our tracking library (chartbeat.js or chartbeat_video.js), covered in the . Customers planning to use our Conversion add-on should review our to determine whether or not Conversion is compatible with your conversion flow.

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 and see data in the and . You can also access your top converting articles via the . Once subscriptions.js is loading on your site, you'll need to fire through the global chartbeat() function to begin tracking your conversion flows and send key event properties to Chartbeat.

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.

<!-- 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 -->

The conversion snippet must be loaded after chartbeat.js

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.

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

Only events fired after the subscriptions.js script loads will be tracked

Complete example

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

<script type='text/javascript'>
  (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();
   })();
</script>
    
<!-- 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 -->

Limitations

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.

PreviousConversion NextConversion Events

Last updated 1 year ago

Was this helpful?

Implementation requirements

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.

<!-- 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 -->

The conversion snippet must be loaded after chartbeat.js

Second requirement

See our to find the full list of the event methods to pass to the chartbeat() function.

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

Only events fired after the subscriptions.js script loads will be tracked

Complete example

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

<script type='text/javascript'>
  (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();
   })();
</script>
    
<!-- 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 -->

Limitations

Currently, tracking conversions is only supported for our . 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.

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 .

Sites that are using our or 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.