Created
June 14, 2019 16:16
-
-
Save techsassy/900f4be093631bdc3654bf0f1a932e0a to your computer and use it in GitHub Desktop.
Let's render ads
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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