Analytics

NOTE: This feature is only available on select billing plans, please reach out to your account manager to have this feature enabled. When embedding using the SDK, all analytics data can be sent to the parent page in the form of a custom event. This allows you to listen for these events and send the data to your own analytics platform.

Event listener

All Smartzer events can be broadcasted as custom events which can be picked up using the following code as an example:

  <!-- load the SDK -->
  <script src="https://scripts.smartzer.com/sdk/latest/embed.js"></script>
  <!-- setup a listener to capture the events and process -->
  <script>
    document.addEventListener('smrtzr:broadcast:analytics', (e) => {
      console.log(e.detail);
    });
  </script>

Examples

We have created some examples of how you can use this data to share to common analytics platforms:

Google Tag Manager

Assuming you have the Google Tag Manager script already installed on your page, you can use the following examples to push Smartzer events to Google Tag Manager. In these examples the events are all prefixed with the smrtzr_ prefix to make it easier to filter them in GTM, but you can change the formatting to suit your requirements.

Event Listener on your page

You can add an event listener directly to your page where the player and SDK are embedded to push Smartzer events to the window.dataLayer array, which should exist and have been instantiated by the GTM script.

Web Page:

  <!-- load the SDK -->
  <script src="https://scripts.smartzer.com/sdk/latest/embed.js"></script>
  <!-- load you player via iframe -->
  <iframe src="https://player.smartzer.com/v/{YOUR_PLAYER_ID}>"></iframe>
  <!-- or load your player using the SDK -->
  <smrtzr-project projectId="v/{YOUR_PROJECT_ID}">
  <!-- setup a listener to capture the events and push to dataLayer -->
  <script>
    document.addEventListener('smrtzr:broadcast:analytics', function (e) {
      if (window.dataLayer && Array.isArray(window.dataLayer)) {
        window.dataLayer.push({ event: 'smrtzr_'.concat(e.detail.analyticsType), analyticsData: e.detail });
      }
    });
  </script>

Event listener in GTM Account

Alternatively, you can add the event listener to your Google Tag Manager account. In this case you will still need the Smartzer SDK script on your page, along with the player embedded via an iframe or the custom components, which would look something like this:

Web Page:

  <!-- load the SDK -->
  <script src="https://scripts.smartzer.com/sdk/latest/embed.js"></script>
  <!-- load you player via iframe -->
  <iframe src="https://player.smartzer.com/v/{YOUR_PLAYER_ID}>"></iframe>
  <!-- or load your player using the SDK -->
  <smrtzr-project projectId="v/{YOUR_PROJECT_ID}">

GTM Account:

  <script>
    document.addEventListener('smrtzr:broadcast:analytics', function (e) {
      if (window.dataLayer && Array.isArray(window.dataLayer)) {
        window.dataLayer.push({ event: 'smrtzr_'.concat(e.detail.analyticsType), analyticsData: e.detail });
      }
    });
  </script>

See the Get started with Tag Manager guide for more information on how to set up Google Tag Manager and add it to your website.

If you are unable to add the GTM script to your page, you can also use the the Smartzer GTM Plugin to automatically push these events to your Google Tag Manager account. Speak to your account manager about how to add this to your account.