Install the @snowplow/browser-tracker and @snowplow/browser-plugin-vimeo-tracking via npm, yarn or any other package manager of your choice. Example using npm:

npm install @snowplow/browser-tracker @snowplow/browser-plugin-vimeo-tracking

It is also possible to integrate this plugin using a JavaScript script tag. For instructions on installing the tracker with the JavaScript tag, please visit this page in our documentation, and then for instructions on installing the plugin, see this page in our documentation.

Install the @snowplow/browser-tracker and @snowplow/browser-plugin-youtube-tracking via npm, yarn or any other package manager of your choice. Example using npm:

npm install @snowplow/browser-tracker @snowplow/browser-plugin-youtube-tracking

It is also possible to integrate this plugin using a JavaScript script tag. For instructions on installing the tracker with the JavaScript tag, please visit this page in our documentation, and then for instructions on installing the plugin, see this page in our documentation.

Install the @snowplow/browser-tracker and @snowplow/browser-plugin-media-tracking via npm, yarn or any other package manager of your choice. Example using npm:

npm install @snowplow/browser-tracker @snowplow/browser-plugin-media-tracking

It is also possible to integrate this plugin using a JavaScript script tag. For instructions on installing the tracker with the JavaScript tag, please visit this page in our documentation, and then for instructions on installing the plugin, see this page in our documentation.

You can install the tracker using SPM as follows:

1. In Xcode, select File > Swift Packages > Add Package Dependency.
2. Add the URL where to download the library: https://github.com/snowplow/snowplow-ios-tracker

To learn about other options for installing the tracker (e.g. using CocoaPods or Carthage), see the mobile tracker documentation .

The tracker can be installed using Gradle. Add the following to your build.gradle file:

dependencies {
  ...
  // Snowplow Android Tracker
  implementation 'com.snowplowanalytics:snowplow-android-tracker:5.+'
  // In case 'lifecycleAutotracking' is enabled
  implementation 'androidx.lifecycle-extensions:2.2.+'
  ...
}

To add the VimeoTrackingPlugin on the JavaScript tracker, you should include it as shown below:

import { newTracker } from '@snowplow/browser-tracker';
import { VimeoTrackingPlugin, enableYouTubeTracking } from '@snowplow/browser-plugin-youtube-tracking';

newTracker('sp1', '{{collector_url}}', {
    appId: 'my-app-id',
    plugins: [ VimeoTrackingPlugin() ],
});

To add the YouTubeTrackingPlugin on the JavaScript tracker, you should include it as shown below:

import { newTracker } from '@snowplow/browser-tracker';
import { YouTubeTrackingPlugin, enableYouTubeTracking } from '@snowplow/browser-plugin-youtube-tracking';

newTracker('sp1', '{{collector_url}}', {
    appId: 'my-app-id',
    plugins: [ YouTubeTrackingPlugin() ],
});

To add the MediaTrackingPlugin on the JavaScript tracker, you should include it as shown below:

import { newTracker } from '@snowplow/browser-tracker';
import { MediaTrackingPlugin, enableMediaTracking } from '@snowplow/browser-plugin-media-tracking';

newTracker('sp1', '{{collector_url}}', {
    appId: 'my-app-id',
    plugins: [ MediaTrackingPlugin() ],
});

We recommend creating a class or a file with helper functions (e.g., Tracker.swift) to manage all the Snowplow related code in your project. Import the Snowplow tracker package in the file as follows:

import SnowplowTracker

The next step is to initialize the tracker instances in your app. Tracker instances are initialized given configuration that includes network settings, tracker feature settings, session settings, and more.

The following snippets show how to initialize tracker instances using the default settings. They call the createTracker function and with some arguments:

1. The tracker namespace which uniquely identifies the tracker within the app (ns in the snippet).
2. Network configuration with the endpoint address of the Snowplow Collector (e.g. Snowplow Micro or Snowplow Mini ) to send events to. We will update this with a testing endpoint later when we discuss the testing setup .
3. Tracker configuration with the application ID that identifies events across different applications (appId in the snippet).

let networkConfig = NetworkConfiguration(endpoint: "{{URL for Collector}}")
let trackerConfig = TrackerConfiguration()
    .appId("appId")
let tracker = Snowplow.createTracker(
    namespace: "ns",
    network: networkConfig,
    configurations: [trackerConfig]
)

We recommend creating a class or a file with helper functions (e.g., Tracker.kt) to manage all the Snowplow related code in your project. Import the Snowplow tracker package in the file as follows:

import com.snowplowanalytics.snowplow.configuration.NetworkConfiguration
import com.snowplowanalytics.snowplow.configuration.TrackerConfiguration
import com.snowplowanalytics.snowplow.controller.TrackerController
import com.snowplowanalytics.snowplow.Snowplow.createTracker

The next step is to initialize the tracker instances in your app. Tracker instances are initialized given configuration that includes network settings, tracker feature settings, session settings, and more.

The following snippets show how to initialize tracker instances using the default settings. They call the createTracker function and with some arguments:

1. The tracker namespace which uniquely identifies the tracker within the app (ns in the snippet).
2. Network configuration with the endpoint address of the Snowplow Collector (e.g. Snowplow Micro or Snowplow Mini ) to send events to. We will update this with a testing endpoint later when we discuss the testing setup .
3. Tracker configuration with the application ID that identifies events across different applications (appId in the snippet).

val networkConfig = NetworkConfiguration("{{URL for Collector}}")
val trackerConfig = TrackerConfiguration("appId")
val tracker = createTracker(
    context,
    "ns",
    networkConfig,
    trackerConfig
)

Vimeo tracking instances are identified by a unique ID. This is an identifier that you provide. Make sure that each media player and content tracked have a different ID.

const id = 'XXXXX'; // randomly generated ID

To start tracking media events, call the startVimeoTracking function. The function takes a video attribute that accepts either:

• an iframe element,
• or an instance of Vimeo.Player, created with the Vimeo Player SDK.

In case of using an iframe element for the attribute, call the function as follows.

import { startVimeoTracking } from '@snowplow/browser-plugin-vimeo-tracking'

const video = document.getElementById('vimeo-iframe')

startVimeoTracking({ id, video })

In case of passing an instance of Vimeo.Player, created with the Vimeo Player SDK, you can call startVimeoTracking as follows.

import { Player } from '@vimeo/player'
import { startVimeoTracking } from '@snowplow/browser-plugin-vimeo-tracking'

const video = new Player('vimeo-player', {
  videoId: 'zSM4ZyVe8xs'
});

startVimeoTracking({ id, video })

After the video player disappears (particularly important in single page apps), it’s important to call endVimeoTracking as this will end any recurring ping events, clear all listeners set by the Vimeo plugin, along with resetting statistics counters.

import { endVimeoTracking } from '@snowplow/browser-plugin-vimeo-tracking'

endVimeoTracking(id)

For more configuration and tracking options, visit the documentation.

To start tracking media events, call the  enableYouTubeTracking function. To find the YouTube player, this function takes an id parameter which is the HTML id attribute of the media element.

enableYouTubeTracking({
  id: 'my-video',
  options: {
    label: 'My Video Name',
  }
})

For more configuration options, see the documentation.

To start tracking media events, call the  enableMediaTracking function. To find your media element, this function takes an id parameter which can either be:

1. the id of the <audio> or <video> HTML element,
2. or the id of the parent element of the <audio> or <video> element (the parent can only have one child element).

It is also a good practice to set the label of the media being played. This may be the title of the video.

import { enableMediaTracking } from '@snowplow/browser-plugin-media-tracking'

enableMediaTracking({
  id: 'my-video',
  options: {
    label: 'My Video Name'
  }
})

For more configuration options, see the documentation.

Media tracking instances are identified by a unique ID. This is an identifier that you provide. Make sure that each media player and content tracked have a different ID.

let id = "XXXXX" // randomly generated ID

To start tracking media events, call the startMediaTracking function with the ID, which return an instance of MediaTracking that you will use to track events and manage the media tracking.

let tracker = Snowplow.defaultTracker()
let player = MediaPlayerEntity()
    .duration(150.0) // A double-precision floating-point value indicating the duration of the media in seconds
    .label("Sample video") // A human-readable title for the media
let configuration = MediaTrackingConfiguration(id: id)
    .player(player)
    .boundaries([10, 25, 50, 75])
let mediaTracking = tracker.media.startMediaTracking(configuration: configuration)

See the documentation for the full list of options.

Subscribe for playback position changes on the media player and make sure to update the player properties as follows.

mediaTracking.update(player: MediaPlayerEntity().currentTime(10.0))

Subscribe to the player events that you are interested in and use the relevant media event classes to track the events (see the documentation for the full list), for example:

• MediaPlayEvent – player changes state to playing from previously being paused.
• MediaPauseEvent – user pauses the playback.
• MediaEndEvent – playback stops when end of the media is reached.
• MediaSeekStartEvent – seek operation begins.
• MediaSeekEndEvent – seek operation completes.
• MediaPlaybackRateChangeEvent – playback rate has changed (accepts a newRate parameter with the new playback rate).
• MediaVolumeChangeEvent – volume has changed (accepts a newVolume parameter with the new volume).
• MediaBufferStartEvent – player goes into the buffering state and begins to buffer content.
• MediaBufferEndEvent – player finishes buffering content and resumes playback.
• MediaQualityChangeEvent – video playback quality changes (accepts newQuality, bitrate, framesPerSecond, automatic optional parameters to describe the new setting).
• in case you are interested in tracking ads during playback, see the relevant ad events in the documetation.

To track the events, simply provide the media tracking ID to the respective tracking function:

mediaTracking.track(MediaPlayEvent())

You can also pass additional optional information to the track methods as documented here.

Finally, use the endMediaTracking call to end media tracking. This will clear the local state for the media tracking and stop any background updates.

tracker.media.endMediaTracking(id: id)

Media tracking instances are identified by a unique ID. This is an identifier that you provide. Make sure that each media player and content tracked have a different ID.

val id = "XXXXX" // randomly generated ID

To start tracking media events, call the startMediaTracking function with the ID, which return an instance of MediaTracking that you will use to track events and manage the media tracking.

val tracker = Snowplow.defaultTracker
val player = MediaPlayerEntity(
    duration = 150.0, // A double-precision floating-point value indicating the duration of the media in seconds
    label = "Sample video", // A human-readable title for the media
)
val configuration = MediaTrackingConfiguration(
    id = id,
    player = player,
    boundaries = listOf(10, 25, 50, 75) // Percentage progress events will be tracked when playback reaches the boundaries
)
val mediaTracking = tracker?.media?.startMediaTracking(configuration)

See the documentation for the full list of options.

Subscribe for playback position changes on the media player and make sure to update the player properties as follows.

mediaTracking?.update(player = MediaPlayerEntity(currentTime = 10.0))

Subscribe to the player events that you are interested in and use the relevant media event classes to track the events (see the documentation for the full list), for example:

• MediaPlayEvent – player changes state to playing from previously being paused.
• MediaPauseEvent – user pauses the playback.
• MediaEndEvent – playback stops when end of the media is reached.
• MediaSeekStartEvent – seek operation begins.
• MediaSeekEndEvent – seek operation completes.
• MediaPlaybackRateChangeEvent – playback rate has changed (accepts a newRate parameter with the new playback rate).
• MediaVolumeChangeEvent – volume has changed (accepts a newVolume parameter with the new volume).
• MediaBufferStartEvent – player goes into the buffering state and begins to buffer content.
• MediaBufferEndEvent – player finishes buffering content and resumes playback.
• MediaQualityChangeEvent – video playback quality changes (accepts newQuality, bitrate, framesPerSecond, automatic optional parameters to describe the new setting).
• in case you are interested in tracking ads during playback, see the relevant ad events in the documetation.

To track the events, simply provide the media tracking ID to the respective tracking function:

mediaTracking?.track(MediaPlayEvent())

You can also pass additional optional information to the track methods as documented here.

Finally, use the endMediaTracking call to end media tracking. This will clear the local state for the media tracking and stop any background updates.

tracker?.media?.endMediaTracking(id)