Google Tag Manager

If you use Google Tag Manager (GTM) follow one of these methods to integrate Peer5 correctly.

Background

Since scripts are loaded asynchronously its important to initiate player only after peer5 scripts have been loaded. jwplayer is used through out the examples, but the methods apply to all players

1. Create player in external script

player.js

1
2
3
4
5
jwplayer.key = 'JWPLAYER_KEY';

var player = jwplayer('player').setup({
    file: 'MANIFEST_FILE'
});

Custom HTML tag (in GTM dashboard)

1
2
3
4
<script src="//api.peer5.com/peer5.js?id=PEER5_API_KEY"></script>
<script src="//api.peer5.com/peer5.jwplayer7.plugin.js"></script>
<script src="//ssl.p.jwpcdn.com/player/v/7.8.1/jwplayer.js"></script>
<script src="/player.js"></script>

2. Initiate player inline

index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JW7 Player test</title>

    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXX');</script>
    <!-- End Google Tag Manager -->
</head>
<body>
    <div id="player"></div>
    <script>
        // create global function that will be called by the tag manager script
        window.onScriptsReady = function () {
            jwplayer.key = 'JWPLAYER_KEY';
            var player = jwplayer('player').setup({
                file: 'MANIFEST_FILE'
            });
        }
    </script>
</body>
</html>

Custom HTML tag (in GTM dashboard)

1
2
3
4
5
6
7
8
9
<script src="//api.peer5.com/peer5.js?id=PEER5_API_KEY"></script>
<script src="//api.peer5.com/peer5.jwplayer7.plugin.js"></script>
<script src="//ssl.p.jwpcdn.com/player/v/7.8.1/jwplayer.js"></script>
<script>
    // scripts are loaded - safe to init player
    if (window.onScriptsReady) {
        window.onScriptsReady()
    }
</script>