۶Ƶ

DocumentationExperience PlatformWeb SDK Guide

sendMediaEvent

Last update: Fri Dec 06 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Developer

The sendMediaEvent command is part of the Web SDK streamingMedia component. You can use this component to collect data related to media sessions on your website. See the streamingMedia documentation to learn how to configure this component.

Use the sendMediaEvent command to track media playbacks, pauses, completions, player state updates, and other related events.

Web SDK can handle media events based on the type of media session tracking:

  • Event handling for automatically-tracked sessions. In this mode you don’t need to pass the sessionID to the media event, or the playhead value. The Web SDK will handle this for you, based on the player ID provided and the getPlayerDetails callback function provided when starting the media session.
  • Event handling for manually-tracked sessions. In this mode you need to pass the sessionID to the media event, along with the playhead value (integer value). You could also pass the Quality of Experience data details, if needed.

Handle media events by type handle-by-type

Select the tabs below to see examples of event type handling for each event type and session tracking method (automatic or manual).

Play play

The media.play event type is used to track when media playback starts. This event should be sent when the player changes state to “playing” from another state. Other states from which the player moves to “playing” include “buffering”, the user resuming from “paused”, the player recovering from an error, or autoplay.

Automatic session tracking
code language-javascript 
alloy("sendMediaEvent", {
    playerId: "movie-test",
    xdm: {
        eventType: "media.play"
    }
});
Manual session tracking
code language-javascript 
sessionPromise.then(sessionID => {
    alloy("sendMediaEvent", {
        xdm: {
            eventType: "media.play",
            mediaCollection: {
                playhead: parseInt(document.getElementById("movie-test").currentTime, 10),
                sessionID
            }
        }
    });
});

Pause pause

The media.pauseStart event type is used to track when a media playback is paused. This event should be sent when the user presses Pause. There is no resume event type. A resume is inferred when you send a media.play event after a media.pauseStart.

Automatic session tracking
code language-javascript 
alloy("sendMediaEvent", {
    playerId: "movie-test",
    xdm: {
        eventType: "media.pauseStart"
    }
});
Manual session tracking
code language-javascript 
sessionPromise.then(sessionID => {
    alloy("sendMediaEvent", {
        xdm: {
            eventType: "media.pauseStart",
            mediaCollection: {
                playhead: parseInt(document.getElementById("movie-test").currentTime, 10),
                sessionID
            }
        }
    });
});

Error error

The media.error event type is used to track when an error occurs during media playback. This event should be sent when an error occurs.

Automatic session tracking
code language-javascript 
alloy("sendMediaEvent", {
    playerId: "movie-test",
    xdm: {
        eventType: "media.error",
        mediaCollection: {
            errorDetails: {
                name: "network-error",
                source: "player"
            }
        }
    }
});
Manual session tracking
code language-javascript 
sessionPromise.then(sessionID => {
    alloy("sendMediaEvent", {
        xdm: {
            eventType: "media.error",
            mediaCollection: {
                playhead: parseInt(document.getElementById("movie-test").currentTime, 10),
                sessionID,
                errorDetails: {
                    name: "network-error",
                    source: "player"
                }
            }
        }
    });
});

Ad break start ad-break-start

The media.adBreakStart event type is used to track when an ad break starts. This event should be sent when an ad break starts.

Automatic session tracking
code language-javascript 
alloy("sendMediaEvent", {
    playerId: "movie-test",
    xdm: {
        eventType: "media.adBreakStart",
        mediaCollection: {
            advertisingPodDetails: {
                friendlyName: "Mid-roll",
                offset: 0,
                index: 1
            }
        }
    }
});
Manual session tracking
code language-javascript 
sessionPromise.then(sessionID => {
    alloy("sendMediaEvent", {
        xdm: {
            eventType: "media.adBreakStart",
            mediaCollection: {
                playhead: parseInt(document.getElementById("movie-test").currentTime, 10),
                sessionID,
                advertisingPodDetails: {
                    friendlyName: "Mid-roll",
                    offset: 0,
                    index: 1
                }
            }
        }
    });
});

Ad break complete ad-break-complete

The media.adBreakComplete event type is used to track when an ad break completes. This event should be sent when an ad break completes.

Automatic session tracking
code language-javascript 
alloy("sendMediaEvent", {
    playerId: "movie-test",
    xdm: {
        eventType: "media.adBreakComplete"
    }
});
Manual session tracking
code language-javascript 
sessionPromise.then(sessionID => {
    alloy("sendMediaEvent", {
        xdm: {
            eventType: "media.adBreakComplete",
            mediaCollection: {
                playhead: parseInt(document.getElementById("movie-test").currentTime, 10),
                sessionID
            }
        }
    });
});

Ad start ad-start

The media.adStart event type is used to track when an ad starts. This event should be sent when an ad starts.

Automatic session tracking
code language-javascript 
alloy("sendMediaEvent", {
    playerId: "movie-test",
    xdm: {
        eventType: "media.adStart",
        mediaCollection: {
            advertisingDetails: {
                friendlyName: "Ad 1",
                name: "/uri-reference/001",
                length: 10,
                advertiser: "۶Ƶ Marketing",
                campaignID: "۶Ƶ Analytics",
                creativeID: "creativeID",
                creativeURL: "https://creativeurl.com",
                placementID: "placementID",
                siteID: "siteID",
                podPosition: 11,
                playerName: "HTML5 player"
            },
            customMetadata: [{
                    name: "myCustomValue3",
                    value: "c3"
                },
                {
                    name: "myCustomValue2",
                    value: "c2"
                },
                {
                    name: "myCustomValue1",
                    value: "c1"
                }
            ]
        }
    }
});
Manual session tracking
code language-javascript 
sessionPromise.then(sessionID => {
    alloy("sendMediaEvent", {
        xdm: {
        eventType: "media.adStart",
        mediaCollection: {
            playhead: parseInt(document.getElementById("movie-test").currentTime, 10),
            sessionID,
            advertisingDetails: {
              friendlyName: "Ad 1",
              name: "/uri-reference/001",
              length: 10,
              advertiser: "۶Ƶ Marketing",
              campaignID: "۶Ƶ Analytics",
              creativeID: "creativeID",
              creativeURL: "https://creativeurl.com",
              placementID: "placementID",
              siteID: "siteID",
              podPosition: 11,
              playerName: "HTML5 player"
            },
            customMetadata: [
              {
                name: "myCustomValue3",
                value: "c3"
              },
              {
                name: "myCustomValue2",
                value: "c2"
              },
              {
                name: "myCustomValue1",
                value: "c1"
              }]
        }
        }
    });
});

Ad complete ad-complete

The media.adComplete event type is used to track when an ad completes. This event should be sent when an ad completes.

Automatic session tracking
code language-javascript 
alloy("sendMediaEvent", {
    playerId: "movie-test",
    xdm: {
        eventType: "media.adComplete"
    }
});
Manual session tracking
code language-javascript 
sessionPromise.then(sessionID => {
    alloy("sendMediaEvent", {
        xdm: {
            eventType: "media.adComplete",
            mediaCollection: {
                playhead: parseInt(document.getElementById("movie-test").currentTime, 10),
                sessionID
            }
        }
    });
});

Ad skip ad-skip

The media.adSkip event type is used to track when an ad is skipped. This event should be sent when an ad is skipped.

Automatic session tracking
code language-javascript 
alloy("sendMediaEvent", {
    playerId: "movie-test",
    xdm: {
        eventType: "media.adSkip"
    }
});
Manual session tracking
code language-javascript 
sessionPromise.then(sessionID => {
    alloy("sendMediaEvent", {
        xdm: {
            eventType: "media.adSkip",
            mediaCollection: {
                playhead: parseInt(document.getElementById("movie-test").currentTime, 10),
                sessionID
            }
        }
    });
});

Chapter start chapter-start

The media.chapterStart event type is used to track when a chapter starts. This event should be sent when a chapter starts.

Automatic session tracking
code language-javascript 
alloy("sendMediaEvent", {
    playerId: "movie-test",
    xdm: {
        eventType: "media.chapterStart",
        mediaCollection: {
            chapterDetails: {
                friendlyName: "Chapter 1",
                position: 1,
                length: 10,
                index: 1,
                offset: 0
            },
            customMetadata: [{
                    name: "myCustomValue3",
                    value: "c3"
                },
                {
                    name: "myCustomValue2",
                    value: "c2"
                },
                {
                    name: "myCustomValue1",
                    value: "c1"
                }
            ]
        }
    }
});
Manual session tracking
code language-javascript 
sessionPromise.then(sessionID => {
    alloy("sendMediaEvent", {
        xdm: {
            eventType: "media.chapterStart",
            mediaCollection: {
                playhead: parseInt(document.getElementById("movie-test").currentTime, 10),
                sessionID,
                chapterDetails: {
                    friendlyName: "Chapter 1",
                    position: 1,
                    length: 10,
                    index: 1,
                    offset: 0
                },
                customMetadata: [{
                        name: "myCustomValue3",
                        value: "c3"
                    },
                    {
                        name: "myCustomValue2",
                        value: "c2"
                    },
                    {
                        name: "myCustomValue1",
                        value: "c1"
                    }
                ]
            }
        }
    });
});

Chapter complete chapter-complete

The media.chapterComplete event type is used to track when a chapter completes. This event should be sent when a chapter completes.

Automatic session tracking
code language-javascript 
alloy("sendMediaEvent", {
    playerId: "movie-test",
    xdm: {
        eventType: "media.chapterComplete"
    }
});
Manual session tracking
code language-javascript 
sessionPromise.then(sessionID => {
    alloy("sendMediaEvent", {
        xdm: {
            eventType: "media.chapterComplete",
            mediaCollection: {
                playhead: parseInt(document.getElementById("movie-test").currentTime, 10),
                sessionID
            }
        }
    });
});

Chapter skip chapter-skip

The media.chapterSkip event type is used to track when a chapter is skipped. This event should be sent when a chapter is skipped.

Automatic session tracking
code language-javascript 
alloy("sendMediaEvent", {
    playerId: "movie-test",
    xdm: {
        eventType: "media.chapterSkip"
    }
});
Manual session tracking
code language-javascript 
sessionPromise.then(sessionID => {
    alloy("sendMediaEvent", {
        xdm: {
            eventType: "media.chapterSkip",
            mediaCollection: {
                playhead: parseInt(document.getElementById("movie-test").currentTime, 10),
                sessionID
            }
        }
    });
});

Buffer start buffer-start

The media.bufferStart event type is used to track when buffering starts. This event should be sent when buffering starts. There is no bufferResume event type. A bufferResume is inferred when you send a play event after bufferStart.

Automatic session tracking
code language-javascript 
alloy("sendMediaEvent", {
    playerId: "movie-test",
    xdm: {
        eventType: "media.bufferStart"
    }
});
Manual session tracking
code language-javascript 
sessionPromise.then(sessionID => {
    alloy("sendMediaEvent", {
        xdm: {
            eventType: "media.bufferStart",
            mediaCollection: {
                playhead: parseInt(document.getElementById("movie-test").currentTime, 10),
                sessionID
            }
        }
    });
});

Bitrate change bitrate-change

The media.bitrateChange event type is used to track when the bitrate changes. This event should be sent when the bitrate changes.

Automatic session tracking
code language-javascript 
alloy("sendMediaEvent", {
    playerId: "movie-test",
    xdm: {
        eventType: "media.bitrateChange",
        mediaCollection: {
            qoeDataDetails: {
                framesPerSecond: 1,
                bitrate: 35000,
                droppedFrames: 30,
                timeToStart: 1364
            }
        }
    }
});
Manual session tracking
code language-javascript 
sessionPromise.then(sessionID => {
    alloy("sendMediaEvent", {
        xdm: {
            eventType: "media.bitrateChange",
            mediaCollection: {
                playhead: parseInt(document.getElementById("movie-test").currentTime, 10),
                sessionID,
                qoeDataDetails: {
                    bitrate: 35000,
                    droppedFrames: 30,
                    timeToStart: 1364
                }
            }
        }
    });
});

State updates state-updates

The media.statesUpdate event type is used to track when the player state changes. This event should be sent when the player state changes.

Automatic session tracking
code language-javascript 
alloy("sendMediaEvent", {
    playerId: "movie-test",
    xdm: {
        eventType: "media.statesUpdate",
        mediaCollection: {
            statesStart: [{
                    name: "mute"
                },
                {
                    name: "pictureInPicture"
                }
            ],
            statesEnd: [{
                name: "fullScreen"
            }]
        }
    }
});
Manual session tracking
code language-javascript 
sessionPromise.then(sessionID => {
    alloy("sendMediaEvent", {
        xdm: {
            eventType: "media.stateUpdate",
            mediaCollection: {
                playhead: parseInt(document.getElementById("movie-test").currentTime, 10),
                sessionID,
                statesStart: [{
                        name: "mute"
                    },
                    {
                        name: "pictureInPicture"
                    }
                ],
                statesEnd: [{
                    name: "fullScreen"
                }]
            }
        }
    });
});

Session end session-end

The media.sessionEnd event type is used to notify the Media Analytics backend to immediately close the session when the user has abandoned their viewing of the content and they are unlikely to return.

If you do not send a sessionEnd event, an abandoned session will time-out after no events are received for 10 minutes, or when no playhead movement occurs for 30 minutes. The session is automatically deleted.

Automatic session tracking
code language-javascript 
alloy("sendMediaEvent", {
    playerId: "movie-test",
    xdm: {
        eventType: "media.sessionEnd"
    }
});
Manual session tracking
code language-javascript 
sessionPromise.then(sessionID => {
    alloy("sendMediaEvent", {
        xdm: {
            eventType: "media.sessionEnd",
            mediaCollection: {
                playhead: parseInt(document.getElementById("movie-test").currentTime, 10),
                sessionID
            }
        }
    });
});

Session complete session-complete

The media.sessionComplete event type is used to track when a media session completes. This event should be sent when the end of the main content is reached.

Automatic session tracking
code language-javascript 
alloy("sendMediaEvent", {
    playerId: "movie-test",
    xdm: {
        eventType: "media.sessionComplete"
    }
});
Manual session tracking
code language-javascript 
sessionPromise.then(sessionID => {
    alloy("sendMediaEvent", {
        xdm: {
            eventType: "media.sessionComplete",
            mediaCollection: {
                playhead: parseInt(document.getElementById("movie-test").currentTime, 10),
                sessionID
            }
        }
    });
});
recommendation-more-help
ad108910-6329-42f1-aa1d-5920a2b13636