Skip to content

Instantly share code, notes, and snippets.

@techsassy

techsassy/ad-preview-test.html

Created June 14, 2019 16:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save techsassy/900f4be093631bdc3654bf0f1a932e0a to your computer and use it in GitHub Desktop.
Save techsassy/900f4be093631bdc3654bf0f1a932e0a to your computer and use it in GitHub Desktop.
Download ZIP
Let's render ads
Raw
ad-preview-test.html
<html>
<head>
</head>
<body>
<div style="display: none;" id="creative-content">
<div style="display:none" data-hymnal-ad-id="870bccfc-67dd-46d1-b492-8ebdd26ce3ba" data-hymnal-design-variant-id="c88aec7d04e4928c77e0c70a1c5b61ec" data-hymnal-dfp-click-url="https://adclick.g.doubleclick.net/aclk?sa=l&ai=C63UO5_R9WrnQOZruoga7qJz4DAEAexABILlgKASIAQGQAQDAAQLIAQngAgGoAwGqBFZP0DHTsSgBOjPOoXbxCtJuOf5KtrdLdsjFuFlOg8ize94xDr3Vad4R6JZI9Lfj9V5HccvbpoUnDmJh8HdpURwxLMCrSHivGp7IhKeOcxGqayeCRY-ixLgEAaAGINgHANIIBQiAYRAB&preview=&num=1&sig=AOD64_3exQEAtI4amkbys5nozvLuIMjSOg&client=ca-pub-4886449010011563&adurl=" data-hymnal-dfp-dest-url="https://www.google.com" data-hymnal-top-level-adunit="171968704" data-hymnal-bottom-level-adunit="172509424" data-hymnal-ad-unit-id="" data-hymnal-site-id="" data-hymnal-network="curbed" data-hymnal-order="" data-hymnal-entry-type=""></div>
<script type="text/javascript" src="https://cdn.concert.io/hymnal-ad-sdk/master/latest/sdk.standard-build.1.0.js"></script>
</div>
<div id='container-div'></div>
<script type="text/javascript">
var scr = document.createElement('script');
scr.innerText = 'window.hymnalAdConfig = ' + JSON.stringify(window.hymnalAdConfig) + ';';
scr.innerText += 'window.KaraokeAdConfig = ' + JSON.stringify(window.KaraokeAdConfig) + ';';
var adcode = document.getElementById('creative-content');
const sdk = '<script type="text/javascript" src="https://cdn.concert.io/hymnal-ad-sdk/master/latest/sdk.standard-build.1.0.js"/>';
adcode.innerText = scr.outerHTML + sdk;
</script>
<script type="text/javascript">
(function () {
var frame = document.createElement('iframe');
frame.style = 'border: 0px; vertical-align: bottom;';
frame.width = '1060';
frame.height = '590';
frame.scrolling = 'no';
frame.marginHeight = 0;
frame.marginWidth = 0;
var adCode = document.getElementById('creative-content').value;
var frameContents = `<head></head><body>${adCode}</body>`;
frame.srcdoc = frameContents;
document.getElementById('container-div').appendChild(frame);
})()
</script>
<script type="text/javascript">
window.hymnalAdConfig = {
id: 'f609c3cf-0a54-4d7f-a4ba-e8f3a7b96572',
slug: '_test_client_cannes_demo_storybook_f609c3cf-0a54-4d7f-a4ba-e8f3a7b96572',
adName: "Cannes Demo Storybook",
type: 'Athena Template',
campaign: '_test_client_kevin_test_663',
campaignName: 'Kevin Test',
brand: '!_Test Client_!',
design_template: 'Athena (Storybook 2.0) with SDKv2',
disableSlotRefresh: true,
showFeedbackForm: true,
preambleEnabled: true,
preambleOverlay: false,
aspect_ratio: {"mobile":0.6666666666666666,"desktop":1.7966101694915255},
max_height: {"mobile":960,"desktop":590},
renderInIframe: true,
html: {"39e4807189de85aeb90aaf744c22ecad":"\u003cdiv class=\\\"ad__athena ad__hymnal ad__has-preamble\\\"\u003e\u003csvg display=\\\"none\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"\u003e\u003csymbol id=\\\"arrow\\\" viewBox=\\\"0 0 34 52\\\"\u003e\u003ctitle\u003eArrow\u003c\\/title\u003e\u003cpath fill-rule=\\\"nonzero\\\" d=\\\"M.929 7.563L8 .492 33.508 26 8 51.508l-7.071-7.07L19.366 26z\\\"/\u003e\u003c\\/symbol\u003e\u003c\\/svg\u003e\u003cp class=\\\"ad__accessibility\\\"\u003e\u003c\\/p\u003e\u003cdiv class=\\\"ad__content\\\"\u003e\u003cbutton class=\\\"ad__slide-button ad__prev-button\\\" aria-label=\\\"Previous\\\" type=\\\"button\\\" \u003e\u003csvg class=\\\"prev-arrow\\\"\u003e\u003cuse xlink:href=\\\"#arrow\\\"\u003e\u003c\\/use\u003e\u003c\\/svg\u003e\u003c\\/button\u003e\u003cbutton class=\\\"ad__slide-button ad__next-button\\\" aria-label=\\\"Next\\\" type=\\\"button\\\"\u003e\u003csvg class=\\\"next-arrow\\\"\u003e\u003cuse xlink:href=\\\"#arrow\\\"\u003e\u003c\\/use\u003e\u003c\\/svg\u003e\u003c\\/button\u003e\u003cul class=\\\"ad__slideshow\\\"\u003e\u003cli aria-hidden=\\\"false\\\" tabindex=\\\"0\\\" role=\\\"tabpanel\\\" data-mobile=\\\"https://hymnal-prod.vox-cdn.com/uploads/asset/file/86999/Nest_Hello_-Slideshow_Mobile_-180214_ImageA_-km.jpg\\\" data-desktop=\\\"https://hymnal-prod.vox-cdn.com/uploads/asset/file/86998/Nest_Hello_-Slideshow_Desktop_-180208_ImageA_-km.jpg\\\" data-clickthrough=\\\"\\\"\u003e\u003c\\/li\u003e\u003cli aria-hidden=\\\"false\\\" tabindex=\\\"0\\\" role=\\\"tabpanel\\\" data-mobile=\\\"https://hymnal-prod.vox-cdn.com/uploads/asset/file/87001/Nest_Hello_-Slideshow_Mobile_-180214_ImageB_-km.jpg\\\" data-desktop=\\\"https://hymnal-prod.vox-cdn.com/uploads/asset/file/87000/Nest_Hello_-Slideshow_Desktop_-180208_ImageB_-km.jpg\\\" data-clickthrough=\\\"\\\"\u003e\u003c\\/li\u003e\u003cli aria-hidden=\\\"false\\\" tabindex=\\\"0\\\" role=\\\"tabpanel\\\" data-mobile=\\\"https://hymnal-prod.vox-cdn.com/uploads/asset/file/87003/Nest_Hello_-Slideshow_Mobile_-180214_ImageC_-km.jpg\\\" data-desktop=\\\"https://hymnal-prod.vox-cdn.com/uploads/asset/file/87002/Nest_Hello_-Slideshow_Desktop_-180208_ImageC_-km.jpg\\\" data-clickthrough=\\\"\\\"\u003e\u003c\\/li\u003e\u003cli aria-hidden=\\\"false\\\" tabindex=\\\"0\\\" role=\\\"tabpanel\\\" data-mobile=\\\"\\\" data-desktop=\\\"\\\" data-clickthrough=\\\"\\\"\u003e\u003c\\/li\u003e\u003cli aria-hidden=\\\"false\\\" tabindex=\\\"0\\\" role=\\\"tabpanel\\\" data-mobile=\\\"\\\" data-desktop=\\\"\\\" data-clickthrough=\\\"\\\"\u003e\u003c\\/li\u003e\u003cli aria-hidden=\\\"false\\\" tabindex=\\\"0\\\" role=\\\"tabpanel\\\" data-mobile=\\\"\\\" data-desktop=\\\"\\\" data-clickthrough=\\\"\\\"\u003e\u003c\\/li\u003e\u003cli aria-hidden=\\\"false\\\" tabindex=\\\"0\\\" role=\\\"tabpanel\\\" data-mobile=\\\"\\\" data-desktop=\\\"\\\" data-clickthrough=\\\"\\\"\u003e\u003c\\/li\u003e\u003cli aria-hidden=\\\"false\\\" tabindex=\\\"0\\\" role=\\\"tabpanel\\\" data-mobile=\\\"\\\" data-desktop=\\\"\\\" data-clickthrough=\\\"\\\"\u003e\u003c\\/li\u003e\u003cli aria-hidden=\\\"false\\\" tabindex=\\\"0\\\" role=\\\"tabpanel\\\" data-mobile=\\\"\\\" data-desktop=\\\"\\\" data-clickthrough=\\\"\\\"\u003e\u003c\\/li\u003e\u003cli aria-hidden=\\\"false\\\" tabindex=\\\"0\\\" role=\\\"tabpanel\\\" data-mobile=\\\"\\\" data-desktop=\\\"\\\" data-clickthrough=\\\"\\\"\u003e\u003c\\/li\u003e\u003c\\/ul\u003e\u003cul class=\\\"ad__slideshow-progress\\\"\u003e\u003c\\/ul\u003e\u003c\\/div\u003e\u003c\\/div\u003e"},
css: {"39e4807189de85aeb90aaf744c22ecad":".ad__hymnal{width:100%;height:0;position:relative;overflow:hidden;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,\\\"Segoe UI\\\",Roboto,Oxygen,Ubuntu,Cantarell,\\\"Open Sans\\\",\\\"Helvetica Neue\\\",sans-serif;background-color:#eee;background-size:cover;background-position:center}.ad__hymnal *{font-size:inherit;text-decoration:inherit;background:none;margin:0}.ad__hymnal p{font-size:16px;line-height:normal;margin:0 0 .5em}.ad__hymnal h1,.ad__hymnal h2,.ad__hymnal h3{font-size:22px;line-height:24px;margin:0 0 .25em;font-weight:600}.ad__hymnal #svg-defs{display:none}.ad__hymnal svg{fill:currentColor;width:1em;height:1em}.ad__hymnal .hymnal_logo{height:14px;background:#fff;padding:6px;position:absolute;top:18px;right:4%}.ad__hymnal .ad__content{border:solid 1px #eee;-webkit-box-sizing:border-box;box-sizing:border-box;background-repeat:no-repeat;background-position:50% 50%;background-color:transparent;background-size:cover;position:absolute;top:0;right:0;left:0;bottom:0}.ad__hymnal .ad__cta{font-family:-apple-system,BlinkMacSystemFont,\\\"Segoe UI\\\",Roboto,Oxygen,Ubuntu,Cantarell,\\\"Open Sans\\\",\\\"Helvetica Neue\\\",sans-serif;font-size:11px;white-space:nowrap;font-size:12px;border:1px solid;padding:6px 8px}.is-small .ad__hymnal .ad__cta{font-size:16px}.ad__hymnal .ad__cta-tag{text-decoration:none;font-size:22px;line-height:24px;margin:0 0 .25em;font-weight:400;text-shadow:0 0 3px rgba(0,0,0,0.4);margin-bottom:1em;display:inline-block;text-align:left;width:100%}.ad__hymnal .ad__cta-cover{opacity:1;bottom:20%;left:10%;-webkit-transform:translate(0, 0);transform:translate(0, 0);width:80%;position:absolute;min-width:220px;-webkit-transition:opacity .3s;transition:opacity .3s;text-align:left}.ad__hymnal .ad__footer{position:absolute;top:90%;left:0;right:0;bottom:0}.ad__athena{padding:0 0 150%}.is-medium .ad__athena,.is-large .ad__athena{padding:0 0 55.66038%}*,*:before,*:after{-webkit-box-sizing:border-box;box-sizing:border-box}.ad__content{cursor:pointer}.ad__slideshow-progress{display:none;list-style:none;margin:0;padding:0 3px;position:absolute;text-align:center;width:100%;display:block}.ad__slideshow-progress-dot{background-color:#000;border-radius:5px;display:inline-block;height:6px;width:20px;margin:0 1px;opacity:.3;padding:0;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.ad__progress-active{background-color:#000;opacity:.6}.ad__slide-button{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;cursor:pointer;border:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;height:100%;margin:0;outline:none;padding:0;position:absolute;top:0;width:20%}.ad__slide-button:before{display:block;content:\\'\\';height:100%;opacity:0;position:absolute;-webkit-transition:opacity .3s ease;transition:opacity .3s ease;width:100%}.ad__slide-button:hover:before{opacity:1}.is-medium .ad__slide-button,.is-large .ad__slide-button{width:18%}.ad__next-button{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;right:0;-webkit-transition:background 2s ease;transition:background 2s ease}.ad__next-button:before{background:-webkit-gradient(linear, left top, right top, from(transparent), to(rgba(0,0,0,0.1)));background:linear-gradient(to right, transparent 0%, rgba(0,0,0,0.1) 100%)}.ad__prev-button{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;left:0}.ad__prev-button:before{background:-webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0.1)), to(transparent));background:linear-gradient(to right, rgba(0,0,0,0.1) 0%, transparent 100%)}.ad__hymnal .prev-arrow,.ad__hymnal .next-arrow{fill:#fff;height:24px;margin:14px;width:16px}.prev-arrow{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ad__hymnal .ad__accessibility{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}"},
js: {"39e4807189de85aeb90aaf744c22ecad":"//////////////////////////////////////////////\n// Variable Setup\n\nvar container = document.querySelector('.ad__slideshow');\nvar nextButton = document.querySelector('.ad__next-button');\nvar prevButton = document.querySelector('.ad__prev-button');\nvar progress = document.querySelector('.ad__slideshow-progress');\nvar secondsPerSlide = parseInt(6, 10);\n\n//////////////////////////////////////////////\n// Setting up Slideshow\n\nvar slideshow = AD.Slideshow({\n container: container,\n prevButton: prevButton,\n nextButton: nextButton,\n progressContainer: progress\n});\n\nslideshow.autoplay(secondsPerSlide);\n\n//////////////////////////////////////////////\n// Styling Progress Dots\n\nvar progressDots = document.querySelectorAll('.ad__slideshow-progress li');\nvar progressDotsWidth = 100 / progressDots.length;\n\nprogressDots.forEach(function(dot) {\n dot.style.width = 'calc(' + progressDotsWidth + '% - 2px)';\n});\n\n//////////////////////////////////////////////\n// Tracking\n\nvar ga = new AD.metrics({ provider: 'GA', video: null });\n\nfunction trackGaEvent(data) {\n var action = data.action;\n var activeSlide = data.activeSlide;\n var eventAction = action + ':' + activeSlide;\n \n if (activeSlide === slideshow.slideCount && action !== 'left-button-clicked') {\n eventAction = 'restart';\n }\n \n ga.track('interaction', eventAction, { value: activeSlide });\n}\n\nAD.on('slideChange', trackGaEvent);\n\n//////////////////////////////////////////////\n// Clickthrough Logic\n\nvar slides = document.querySelectorAll('.ad__slideshow li');\n\nslides.forEach(function(slide) {\n var clickthroughPresent = slide.firstChild.classList.contains('ad__slide-click');\n \n if (!clickthroughPresent) {\n slide.addEventListener('click', function() {\n AD.clickthrough();\n });\n }\n});\n"},
fields: {"39e4807189de85aeb90aaf744c22ecad":{"html":"<div class=\"ad__athena ad__hymnal ad__has-preamble\">\n <svg display=\"none\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <symbol id=\"arrow\" viewBox=\"0 0 34 52\">\n <title>Arrow</title>\n <path fill-rule=\"nonzero\" d=\"M.929 7.563L8 .492 33.508 26 8 51.508l-7.071-7.07L19.366 26z\"/>\n </symbol>\n </svg>\n <p class=\"ad__accessibility\">$TEMPLATE_TEXT[accessibility_messaging_text]</p>\n <div class=\"ad__content\">\n <button class=\"ad__slide-button ad__prev-button\" aria-label=\"Previous\" type=\"button\" >\n <svg class=\"prev-arrow\"><use xlink:href=\"#arrow\"></use></svg>\n </button>\n <button class=\"ad__slide-button ad__next-button\" aria-label=\"Next\" type=\"button\">\n <svg class=\"next-arrow\"><use xlink:href=\"#arrow\"></use></svg>\n </button>\n <ul class=\"ad__slideshow\">\n <li aria-hidden=\"false\" tabindex=\"0\" role=\"tabpanel\" data-mobile=\"$TEMPLATE_IMAGE[mobile_slide_1]\" \n data-desktop=\"$TEMPLATE_IMAGE[desktop_slide_1]\" data-clickthrough=\"$TEMPLATE_TEXT[clickthrough_link_1]\"></li>\n <li aria-hidden=\"false\" tabindex=\"0\" role=\"tabpanel\" data-mobile=\"$TEMPLATE_IMAGE[mobile_slide_2]\"\n data-desktop=\"$TEMPLATE_IMAGE[desktop_slide_2]\" data-clickthrough=\"$TEMPLATE_TEXT[clickthrough_link_2]\"></li>\n <li aria-hidden=\"false\" tabindex=\"0\" role=\"tabpanel\" data-mobile=\"$TEMPLATE_IMAGE[mobile_slide_3]\"\n data-desktop=\"$TEMPLATE_IMAGE[desktop_slide_3]\" data-clickthrough=\"$TEMPLATE_TEXT[clickthrough_link_3]\"></li>\n <li aria-hidden=\"false\" tabindex=\"0\" role=\"tabpanel\" data-mobile=\"$TEMPLATE_IMAGE[mobile_slide_4]\"\n data-desktop=\"$TEMPLATE_IMAGE[desktop_slide_4]\" data-clickthrough=\"$TEMPLATE_TEXT[clickthrough_link_4]\"></li>\n <li aria-hidden=\"false\" tabindex=\"0\" role=\"tabpanel\" data-mobile=\"$TEMPLATE_IMAGE[mobile_slide_5]\"\n data-desktop=\"$TEMPLATE_IMAGE[desktop_slide_5]\" data-clickthrough=\"$TEMPLATE_TEXT[clickthrough_link_5]\"></li>\n <li aria-hidden=\"false\" tabindex=\"0\" role=\"tabpanel\" data-mobile=\"$TEMPLATE_IMAGE[mobile_slide_6]\"\n data-desktop=\"$TEMPLATE_IMAGE[desktop_slide_6]\" data-clickthrough=\"$TEMPLATE_TEXT[clickthrough_link_6]\"></li>\n <li aria-hidden=\"false\" tabindex=\"0\" role=\"tabpanel\" data-mobile=\"$TEMPLATE_IMAGE[mobile_slide_7]\"\n data-desktop=\"$TEMPLATE_IMAGE[desktop_slide_7]\" data-clickthrough=\"$TEMPLATE_TEXT[clickthrough_link_7]\"></li>\n <li aria-hidden=\"false\" tabindex=\"0\" role=\"tabpanel\" data-mobile=\"$TEMPLATE_IMAGE[mobile_slide_8]\"\n data-desktop=\"$TEMPLATE_IMAGE[desktop_slide_8]\" data-clickthrough=\"$TEMPLATE_TEXT[clickthrough_link_8]\"></li>\n <li aria-hidden=\"false\" tabindex=\"0\" role=\"tabpanel\" data-mobile=\"$TEMPLATE_IMAGE[mobile_slide_9]\"\n data-desktop=\"$TEMPLATE_IMAGE[desktop_slide_9]\" data-clickthrough=\"$TEMPLATE_TEXT[clickthrough_link_9]\"></li>\n <li aria-hidden=\"false\" tabindex=\"0\" role=\"tabpanel\" data-mobile=\"$TEMPLATE_IMAGE[mobile_slide_10]\"\n data-desktop=\"$TEMPLATE_IMAGE[desktop_slide_10]\" data-clickthrough=\"$TEMPLATE_TEXT[clickthrough_link_10]\"></li>\n </ul>\n <ul class=\"ad__slideshow-progress\"></ul>\n </div>\n</div>\n","css":"//////////////////////////////////////////////\n// Input from fields in the design tab\n\n$arrow-button-color: $TEMPLATE_COLOR[arrow_button_color];\n$progress-dot-color: $TEMPLATE_COLOR[progress_dot_color];\n$progress-bar-enabled: $TEMPLATE_BOOLEAN[progress_bar_enabled];\n\n@include athena;\n\n*, *:before, *:after {\n box-sizing: border-box;\n}\n\n.ad__content {\n cursor: pointer;\n}\n\n.ad__slideshow-progress {\n display: none;\n list-style: none;\n margin: 0;\n padding: 0 3px;\n position: absolute;\n text-align: center;\n width: 100%;\n \n @include fieldHasValue($progress-bar-enabled) {\n display: block;\n }\n \n &-dot {\n background-color: $progress-dot-color;\n border-radius: 5px;\n display: inline-block;\n height: 6px;\n width: 20px;\n margin: 0 1px;\n opacity: .3;\n padding: 0;\n transition: opacity .3s ease;\n }\n}\n\n.ad__progress-active {\n background-color: $progress-dot-color;\n opacity: .6;\n}\n\n.ad__slide-button {\n align-items: center;\n cursor: pointer;\n border: none;\n display: flex;\n flex-direction: row;\n height: 100%;\n margin: 0;\n outline: none;\n padding: 0;\n position: absolute;\n top: 0;\n width: 20%;\n \n &:before {\n display: block;\n content: '';\n height: 100%;\n opacity: 0;\n position: absolute;\n transition: opacity .3s ease;\n width: 100%;\n }\n \n &:hover:before {\n opacity: 1;\n }\n}\n\n.is-medium .ad__slide-button,\n.is-large .ad__slide-button {\n width: 18%;\n}\n\n.ad__next-button {\n justify-content: flex-end;\n right: 0;\n transition: background 2s ease;\n \n &:before {\n background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 100%); \n }\n}\n\n.ad__prev-button {\n justify-content: flex-start;\n left: 0;\n \n &:before {\n background: linear-gradient(to right, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%);\n }\n}\n\n.ad__hymnal .prev-arrow,\n.ad__hymnal .next-arrow {\n fill: $arrow-button-color;\n height: 24px;\n margin: 14px;\n width: 16px;\n}\n\n.prev-arrow {\n transform-origin: center;\n transform: rotate(180deg);\n}\n\n.ad__hymnal .ad__accessibility {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n","js":"//////////////////////////////////////////////\n// Variable Setup\n\nvar container = document.querySelector('.ad__slideshow');\nvar nextButton = document.querySelector('.ad__next-button');\nvar prevButton = document.querySelector('.ad__prev-button');\nvar progress = document.querySelector('.ad__slideshow-progress');\nvar secondsPerSlide = parseInt($TEMPLATE_TEXT[seconds_per_slide], 10);\n\n//////////////////////////////////////////////\n// Setting up Slideshow\n\nvar slideshow = AD.Slideshow({\n container: container,\n prevButton: prevButton,\n nextButton: nextButton,\n progressContainer: progress\n});\n\nslideshow.autoplay(secondsPerSlide);\n\n//////////////////////////////////////////////\n// Styling Progress Dots\n\nvar progressDots = document.querySelectorAll('.ad__slideshow-progress li');\nvar progressDotsWidth = 100 / progressDots.length;\n\nprogressDots.forEach(function(dot) {\n dot.style.width = 'calc(' + progressDotsWidth + '% - 2px)';\n});\n\n//////////////////////////////////////////////\n// Tracking\n\nvar ga = new AD.metrics({ provider: 'GA', video: null });\n\nfunction trackGaEvent(data) {\n var action = data.action;\n var activeSlide = data.activeSlide;\n var eventAction = action + ':' + activeSlide;\n \n if (activeSlide === slideshow.slideCount && action !== 'left-button-clicked') {\n eventAction = 'restart';\n }\n \n ga.track('interaction', eventAction, { value: activeSlide });\n}\n\nAD.on('slideChange', trackGaEvent);\n\n//////////////////////////////////////////////\n// Clickthrough Logic\n\nvar slides = document.querySelectorAll('.ad__slideshow li');\n\nslides.forEach(function(slide) {\n var clickthroughPresent = slide.firstChild.classList.contains('ad__slide-click');\n \n if (!clickthroughPresent) {\n slide.addEventListener('click', function() {\n AD.clickthrough();\n });\n }\n});\n","desktop_slide_1":"https://hymnal-prod.vox-cdn.com/uploads/asset/file/86998/Nest_Hello_-Slideshow_Desktop_-180208_ImageA_-km.jpg","mobile_slide_1":"https://hymnal-prod.vox-cdn.com/uploads/asset/file/86999/Nest_Hello_-Slideshow_Mobile_-180214_ImageA_-km.jpg","desktop_slide_2":"https://hymnal-prod.vox-cdn.com/uploads/asset/file/87000/Nest_Hello_-Slideshow_Desktop_-180208_ImageB_-km.jpg","mobile_slide_2":"https://hymnal-prod.vox-cdn.com/uploads/asset/file/87001/Nest_Hello_-Slideshow_Mobile_-180214_ImageB_-km.jpg","desktop_slide_3":"https://hymnal-prod.vox-cdn.com/uploads/asset/file/87002/Nest_Hello_-Slideshow_Desktop_-180208_ImageC_-km.jpg","mobile_slide_3":"https://hymnal-prod.vox-cdn.com/uploads/asset/file/87003/Nest_Hello_-Slideshow_Mobile_-180214_ImageC_-km.jpg","desktop_slide_4":null,"mobile_slide_4":null,"desktop_slide_5":null,"mobile_slide_5":null,"desktop_slide_6":null,"mobile_slide_6":null,"desktop_slide_7":null,"mobile_slide_7":null,"desktop_slide_8":null,"mobile_slide_8":null,"desktop_slide_9":null,"mobile_slide_9":null,"desktop_slide_10":null,"mobile_slide_10":null,"clickthrough_link_1":"","clickthrough_link_2":"","clickthrough_link_3":"","clickthrough_link_4":"","clickthrough_link_6":"","clickthrough_link_7":"","clickthrough_link_8":"","clickthrough_link_9":"","clickthrough_link_10":"","arrow_button_color":"#ffffff","progress_dot_color":"#000000","progress_bar_enabled":true,"seconds_per_slide":"6","accessibility_messaging_text":"","large_backup_image":null,"medium_backup_image":null,"small_backup_image":null,"clickthrough_link_5":""}},
clickthroughUrl: '',
trackers: []
};
var script = document.createElement('script');
script.src = 'https://cdn.concert.io/hymnal-ad-sdk/master/latest/sdk.standard-build.1.0.js';
document.body.appendChild(script);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment