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 website tracking guide. Customers planning to use our Conversion add-on should review our Supported Conversion Flows 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 Conversion Dashboard and see data in the Real-Time Dashboard and . You can also access your top converting articles via the Conversion API. Once subscriptions.js is loading on your site, you'll need to fire conversion events 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.

See our Conversion Events 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 standard website tracking integration. 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 feedback@chartbeat.com.

Sites that are using our cookieless tracking or cookieDomain variable 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.

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 Conversion Events 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

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.

Sites that are using our cookieless tracking or cookieDomain variable 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.