Articles in this section

See more

PLYR

Avatar
Tony Gentile
  • Updated
Follow

These are the steps to include your customized collection beacon that will connect to the Datazoom cloud SDK from your PLYR video player:


  1. Login to Datazoom here:  https://app.datazoom.io
  2. Add a Collector as indicated here:  How to add a Collector

  3. Copy the Config that was created at the end of the process
    Click the icon indicated below to copy the Configuration Key

    You will see this message:
  4. Replace the <CONFIG_ID> in Datazoom's beacon script with the Key you copied above.
    Replace the entire placeholder <CONFIG_ID>     including < and >

IMPORTANT: Datazoom's beacon script must come after the player load.

Example:

<html>
    <head>
        <link rel="stylesheet" href="https://cdn.plyr.io/3.4.4/plyr.css">
        <script src="https://cdn.plyr.io/3.4.4/plyr.js"></script>
    </head>
    <body>
        <div class="vid-container" id="plyr_player">
            <video id="myPlayers" controls preload="auto" style="width:100%;height:25em;background: black;">
                <source src=<VIDEO_SOURCE> type="video/mp4">
            </video>
        </div>
		<script>
				var video = document.getElementsByTagName("video")[0];
				var myPlayer = new Plyr(video);
		</script>
        <!-- THIS IS THE DATAZOOM BEACON SCRIPT -->
        <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=<config_ID>'></script>
    </body>
</html>


Related articles

Comments

0 comments

Article is closed for comments.