Sie können auch Ihre eigene Lösung implementieren, wie z.B. einen benutzerdefinierten Zustimmungsbanner als Alternative zum von uns bereitgestellten Zustimmungsdialog (siehe die Dokumentation hier).

In diesen Fällen können Sie die JavaScript-API verwenden, um dem Player mitzuteilen, Analytics zu akzeptieren oder abzulehnen

Beachten Sie, dass die folgenden Schritte die Anzeige eines benutzerdefinierten Zustimmungsbanners oder Elements erfordern.

HTML-Beispiel

Ein Zustimmungsbanner kann in HTML folgendermaßen aussehen:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Your website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="main.js"></script>
  </head>

  <body>
    <!-- Embedded video -->
    <div
      mi24-video-player
      video-id="<VideoID>"
      player-id="<PlayerID>"
      channel-id="6"
      config-type="vmpro"
      flash-path="//e.video-cdn.net/v2/"
      api-url="//d.video-cdn.net/play"
    ></div>
    <script src="//e.video-cdn.net/v2/embed.js"></script>

    <!-- Consent Banner-->
    <div class="consent-banner">
        <button id="accept-button">Accept</button>
        <button id="reject-button">Reject</button>
    </div>
  </body>
</html>

Der Benutzer sieht auf Ihrer Website ein solches Zustimmungsbanner:


Funktionen

Um Analytics zu aktivieren oder zu deaktivieren, fügen Sie dem Skript die folgenden Funktionen hinzu (weitere Funktionen sind hier verfügbar):

  • Analytics aktivieren
VideoPlayer.Collection.acceptAnalytics()
  • Deaktiviere Analytics
VideoPlayer.Collection.rejectAnalytics()

Das folgende Beispiel zeigt, wie man Analytics im Skript aktivieren oder deaktivieren kann.

Beachte, dass die "Annehmen" und "Ablehnen" Buttons mit den Funktionen verbunden sind.


// main.js
document.getElementById("accept-button").addEventListener("click", function () {
    VideoPlayer.Collection.acceptAnalytics();
});
document.getElementById("reject-button").addEventListener("click", function () {
    VideoPlayer.Collection.rejectAnalytics();
});

iframe-Beispiel

Wenn sich der Videoplayer in einem Iframe befindet, ruft die übergeordnete Domäne die postMessage-API auf, um die Zustimmung festzulegen.

Wenn Ihr Video in einen iframe eingebettet ist, würde Ihr HTML-Code wie folgt aussehen:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Your website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="main.js"></script>
  </head>

  <body>
    <!-- Embedded video -->
    <iframe
      id="player_iframe"
      width="800"
      height="450"
      src="<SOURCE_URL>"
      allowfullscreen
      frameborder="0"
    ></iframe>

    <!-- Consent Banner-->
    <div class="consent-banner">
      <button id="accept-button">Accept</button>
      <button id="reject-button">Reject</button>
    </div>
  </body>
</html>

Das Skript für ein eingebettetes Video in einem iframe wiederum könnte wie folgt aussehen:

// main.js
// We wait until the content of the page was loaded
document.addEventListener("DOMContentLoaded", function () {
    document.getElementById('accept-button').addEventListener('click', function () {
        var iframeWindow = document.getElementById("player_iframe").contentWindow;
        iframeWindow.postMessage('CONSENT_GIVEN', '*');
    });
    document.getElementById('reject-button').addEventListener('click', function () {
        var iframeWindow = document.getElementById("player_iframe").contentWindow;
        iframeWindow.postMessage('CONSENT_DECLINED', '*');
    });
});