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

1. Download the GTM container file (JSON) attached here
2. Log in to your Google Tag Manager account and import the container file. Learn how to import a GTM container file here. 
3. Replace the Google Analytics Tracking ID 
   1. Navigate to Tags 
   2. Click on GA – Event – Video Interaction 
   3. Add your GA Tracking ID in the Tracking ID field 
4. Under Tags, you will also find Dailymotion Listener. This is a custom HTML tag with JavaScript that can be customized further if needed 
5. 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 

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.

1. Set-up your app to connect to your Google Analytics account. Learn how to get started with Analytics in AMP pages.
2. 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>

3. 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>