Introducing Snowplow JavaScript trackers v3.2 with Video Tracking
This release brings the long-awaited video (and audio) tracking functionality to the JavaScript Tracker, along with several plugin/tracker enhancements.
HTML5 Media Tracking
The Media Tracking plugin allows the tracking of any <audio>
or <video>
element on a web page.
The following snippet, using the Browser Tracker, shows a minimal example of enabling tracking of a video element.
Install required packages:
npm i @snowplow/browser-tracker @snowplow/browser-plugin-media-tracking
index.html
<body>
...
<video id="example-id" src="./example-video.mp4"></video>
...
</body>
main.js
import { newTracker } from "@snowplow/browser-tracker";
import { MediaTrackingPlugin, enableMediaTracking } from "@snowplow/browser-plugin-media-tracking"
newTracker("sp2", "{{collector_url}}", {
appId: "my-app-id",
plugins: [ MediaTrackingPlugin() ],
})
enableMediaTracking({
id: "example-id"
})
Docs
Check out the following docs for more information on how Media tracking works, and the features available in the plugin.
YouTube Tracking
The YouTube Tracking plugin allows the tracking of embedded YouTube videos.
The following snippet, using the Browser Tracker, shows a minimal example of enabling tracking of an embedded YouTube video.
Install required packages:
npm i @snowplow/browser-tracker @snowplow/browser-plugin-youtube-tracking
index.html
<body>
...
<iframe
id="example-id"
src="https://www.youtube.com/embed/zSM4ZyVe8xs"
></iframe>
...
</body>
main.js
import { newTracker } from "@snowplow/browser-tracker";
import { YouTubeTrackingPlugin, enableYouTubeTracking } from "@snowplow/browser-plugin-youtube-tracking"
newTracker("sp2", "{{collector_url}}", {
appId: "my-app-id",
plugins: [ YouTubeTrackingPlugin() ],
})
enableYouTubeTracking({
id: "example-id"
})
Docs
Check out the following docs for more information on how YouTube tracking works, and the features available in the plugin.
Changelog
Features
Updates
- Add support for custom headers (#1010)
- Allow enableFormTracking to capture dynamic form changes (#748)
- Allow alternative Access-Control-Allow-Credentials values (#808)
- Ensure Browser Data is added to Payload before plugin beforeTrack fires (#1025)
Upgrading
Version 3.2.3 is available as @snowplow/browser-tracker on npm, or as the tag based javascript tracker - available on GitHub Releases, jsDelivr or unpkg.
Media Tracking and Youtube Tracking plugins are also available npm, and on GitHub Releases, jsDelivr (Media / Youtube) or unpkg (Media / Youtube).
Edit: Update links to 3.2.3