Dailymotion provides a convenient way to collect and send events to a connected Google Analytics account. Please note that this implementation only works with a player initialized using the DM JS Library. Players initialized with a standard embed code are currently not supported.
Setup instructions
- Download the GTM container file (JSON) attached here
- Log in to your Google Tag Manager account and import the container file. Learn how to import a GTM container file here.
- Replace the Google Analytics Tracking ID
- Navigate to Tags
- Click on GA – Event – Video Interaction
- Add your GA Tracking ID in the Tracking ID field
- Under Tags, you will also find Dailymotion Listener. This is a custom HTML tag with JavaScript that can be customized further if needed
- Publish the changes. Learn how to publish GTM changes.
Supported events
By default, the integration will support tracking of the following player events:
- Video started
- Pause video
- % Completed
- Video ended
Additional events can be configured by modifying the JavaScript in the Dailymotion Listener Tag with Dailymotion player API events. List of Player API events.
Example scenarios
Scenario |
Events generated |
Video is automatically played when a user lands on the page |
Video started |
User clicks on the play button after landing on the page |
Video started |
User pauses the video and then plays the video |
Pause video |
User watches over 25% of the video |
25% completed |
User watches until the end of the video and the video stops |
Video ended |
For asynchronous player loads
If you are loading the player asynchronously, please update the code to include DM_GTM_INIT()
<script>
window.dmAsyncInit = function()
{
DM.init({ apiKey: ‘your app id’, status: true, cookie: true });
DM_GTM_INIT();
};
(function() {
var e = document.createElement('script');
e.async = true;
e.src = 'https://api.dmcdn.net/all.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(e, s);
}());
</script>
Limitations
- Players initialized with a standard embed code are not supported. This integration relies on the DM JS library. Learn how to initialize a player using DM JS Library.
Accelerated media pages (AMP)
You can set up Accelerated Mobile Pages (AMP) to send Dailymotion player events to a connected Google Analytics account using the following steps.
- Set-up your app to connect to your Google Analytics account. Learn how to get started with Analytics in AMP pages.
- If not already included, add <amp-dailymotion> script to the page. Learn about amp-dailymotion component.
<script async custom-element="amp-dailymotion" src="https://cdn.ampproject.org/v0/amp-dailymotion-0.1.js"></script>
- Refer to the example code below to set-up triggers to capture video events generated by the dailymotion video player. Learn more about amp-video-analytics triggers.
Example code
<amp-dailymotion id="video" data-videoid="x2m8jpp" layout="responsive" width="480" height="270"></amp-dailymotion>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars": {
"gtag_id": "UA-XXXXXXXX-2",
"config": {
"UA-XXXXXXXX-2": {
"groups": "default"
}
}
},
"triggers": {
"videoPlay": {
"on": "video-play",
"request": "event",
"selector": "#video",
"vars": {
"event_category": "AMP Dailymotion player (client-side)",
"event_name": "Video Started",
"event_label": "${id}",
"method": "Google"
}
},
"videoPause": {
"on": "video-pause",
"request": "event",
"selector": "#video",
"vars": {
"event_category": "AMP Dailymotion player (client-side)",
"event_name": "Video Paused",
"event_label": "${id}",
"method": "Google"
}
},
"videoEnded": {
"on": "video-ended",
"request": "event",
"selector": "#video",
"vars": {
"event_name": "Video Ended",
"event_category": "AMP Dailymotion player (client-side)",
"event_label": "${id}",
"method": "Google"
}
}
}
}
</script>
</amp-analytics>