Skip to content

Instantly share code, notes, and snippets.

@ybootin

ybootin/index.html

Last active August 10, 2018 15:34
Show Gist options
  • Save ybootin/57fd6fabc9cb3de9a37c108706aee25d to your computer and use it in GitHub Desktop.
Save ybootin/57fd6fabc9cb3de9a37c108706aee25d to your computer and use it in GitHub Desktop.
Download ZIP
Google IMA player - custom click element - click tracking debug page
Raw
index.html
<!doctype html>
<html>
<head>
<title>VPAID Adapter test page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h1>Google ima - Click Tracking with custom click element debug page</h1>
<div class="form-group">
VAST url : <input type="text" style="min-width:100%" value="https://a.teads.tv/vast/get/1550" id="vast-url" class="form-control"><br />
click element : <input type="radio" value="normal" name="clickelement" id="clickelementcustom" checked> <label for="clickelementcustom"> custom </label>
<input type="radio" value="normal" name="clickelement" id="clickelementnormal"> <label for="clickelementnormal"> default </label><br />
<br /><input type="button" value="run VAST" id="run-vast">
</div>
<hr>
<div id="main-container" style="position:relative;min-width:300px;min-height:200px">
<video muted playsinline webkit-playsinline width="300px" height="200px"></video>
<div id="ad-container" style="position:relative;width:300px;height:200px;position:absolute;top:0;left:0"></div>
</div>
</div>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script>
var videoContent = document.getElementsByTagName('video')[0]
var container = document.getElementById('ad-container')
function loadVast(vastUrl, useCustomClick) {
container.innerHTML = ''
var clickElement
if (useCustomClick) {
clickElement = document.createElement('div')
clickElement.style.position = 'absolute'
clickElement.style.zIndex = '10'
clickElement.style.top = '0'
clickElement.style.left = '0'
clickElement.style.width = '100%'
clickElement.style.height = '100%'
clickElement.style.cursor = 'pointer'
container.appendChild(clickElement)
}
var adDisplayContainer = new google.ima.AdDisplayContainer(container, videoContent, clickElement);
adDisplayContainer.initialize();
var adsLoader = new google.ima.AdsLoader(adDisplayContainer);
adsLoader.getSettings().setDisableCustomPlaybackForIOS10Plus(true)
var onAdsManagerLoaded = function(adsManagerLoadedEvent) {
var adsManager = adsManagerLoadedEvent.getAdsManager(videoContent);
adsManager.init(300, 200, 'normal')
adsManager.start()
}
adsLoader.addEventListener(google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, onAdsManagerLoaded, false);
var adsRequest = new google.ima.AdsRequest();
adsRequest.adTagUrl = vastUrl
adsLoader.requestAds(adsRequest);
}
document.getElementById('run-vast').addEventListener('click', function() {
loadVast(document.getElementById('vast-url').value.trim(), document.getElementById('clickelementcustom').checked)
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment