ChristopherHackett/index.html

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>YouTube Play Event</title>
  <script>
    // You will have a GTM dataLayer
    var dataLayer = {};
  </script>
</head>
<body>
  <h1>A Video</h1>

  <iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/gu4aRp4BTYw?enablejsapi=1&origin=http://bl.ocks.org"
  frameborder="0"></iframe>

  <script>
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;
    var playedIds = {};
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        events: {
          'onStateChange': onPlayerStateChange
        }
      });
    }

    function onPlayerStateChange(event) {
      var id = event.target.getVideoData()['video_id'];
      if (event.data == YT.PlayerState.PLAYING && !(id in playedIds)) {
        var url = event.target.getVideoUrl();
        playedIds[id] = true;
        // This would go in the data layer
        console.log({
          'mcbc.video.resource': url,
          'mcbc.video.action': 'play',
          'event': 'mcbc.video'
        });
      }
    }
  </script>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>YouTube Play Event</title>
	<script>
	// You will have a GTM dataLayer
	var dataLayer = {};
	</script>
	</head>
	<body>
	<h1>A Video</h1>

	<iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/gu4aRp4BTYw?enablejsapi=1&origin=http://bl.ocks.org"
	frameborder="0"></iframe>

	<script>
	var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	var player;
	var playedIds = {};
	function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
	events: {
	'onStateChange': onPlayerStateChange
	}
	});
	}

	function onPlayerStateChange(event) {
	var id = event.target.getVideoData()['video_id'];
	if (event.data == YT.PlayerState.PLAYING && !(id in playedIds)) {
	var url = event.target.getVideoUrl();
	playedIds[id] = true;
	// This would go in the data layer
	console.log({
	'mcbc.video.resource': url,
	'mcbc.video.action': 'play',
	'event': 'mcbc.video'
	});
	}
	}
	</script>
	</body>
	</html>