How to track HTML5 videos on your website

When you want to track HTML5 videos embedded on your website, you need to set up custom tracking in Tag Manager. In this article, we’ll show you how to do it.

To set up HTML5 video tracking, follow these steps:

  1. Contact us at support@piwik.pro and ask for a custom code to track HTML5 videos on your website.
  2. Log in to Piwik PRO.
  3. Go to Menu > Tag Manager.
  4. Navigate to Tags.
  5. Click + Create new tag.
  6. Name the tag, for example HTML5 video listener, and select Custom asynchronous tag template.
  7. In Tag HTML code, type the code you received from our support.
  8. A custom code for tracking HTML5 videos with Piwik PRO.

    Note: This tag identifies events like play, pause, complete, progress, and more. It then pushes an event to the data layer so that Piwik PRO can track it.

  9. In Tag triggers, click + New trigger.
  10. Name the trigger. For example, HTML5 video is present.
  11. In Event type, select Page view.
  12. A setup of custom code for tracking HTML5 videos with Piwik PRO.
  13. In Trigger conditions, set a tag to fire on pages with embedded HTML5 video. For example, Page URL contains /product-tour.
  14. A setup of custom code for tracking HTML5 videos with Piwik PRO.
  15. Click Save for the trigger and save for the tag.
  16. Click + Create new tag.
  17. Name the tag, for example HTML5 video tracking event, and select Piwik PRO Custom Event.
  18. In Piwik PRO Custom Event setup, set the following:
    • Category: {{event_category}}
    • Action: {{event_action}}
    • Name: {{event_label}}
    A setup of custom code for tracking HTML5 videos with Piwik PRO.

    Note: This tag will send event data to reports in Analytics. By default, Tag Manager knows the value from data layer events, and we don’t need to set them as variables.

  19. In Tag triggers, click + New trigger.
  20. Name the trigger. For example, HTML5 video event.
  21. In Event type, select Event.
  22. A setup of custom code for tracking HTML5 videos with Piwik PRO.
  23. In Data layer event settings, set the following condition: Event name contains video.
  24. A setup of custom code for tracking HTML5 videos with Piwik PRO.

    Note: This trigger will fire a tag when the event is video. The video event is defined in the JavaScript code through the data layer that is presented in step 5.

  25. Click Save for the trigger and save for the tag.
  26. Test your tags in debug mode.
  27. When you’re happy how the tags work, click Publish.

Now Piwik PRO will be tracking events on HTML5 videos embedded on your website. You’ll be able to see tracked data in the custom event report and session log report.

Was this article helpful?

Be the first to rate this article.

Technical Support

If you have any questions, drop us a line at support_SPC@piwik_SPC.pro.

We’re happy to help!