放置JS点击链接测量

Question

The Ad Server "Ströer Digital AdServer", being used on my project offers clicks on links to external sites measurement. In order to achieve this result, I need to insert JS into my HTML web banner code. This seems like a straight forward part, but I am having difficulties since my knowledge with JS is at a beginners level. I would appreciate some help in regards to where I should insert the JS script codes in the HTML. I have followed the instructions listed bellow but click test never worked.

These are the technical specifications: Fill all links to be measured with the name "#clicktag" as placeholder and an ID attribute of the same name. If you want to use different links with different targets, you have to number the placeholders sequentially ("#clicktag", "#clicktag2", etc.)

 <a href="#clicktag" id="clicktag" target="_blank">Linktext 1</a> <a href="#clicktag2" id="clicktag2" target="_blank">Linktext 2</a>

Insert the following script in the of your ad media:

 <script type="text/javascript"> var getUriParams = function () {     var query_string = {};     var query = window.location.search.substring(1);     var parmsArray = query.split('&');     if (parmsArray.length <= 0) return query_string;     for (var i = 0; i < parmsArray.length; i++)     {         var pair = parmsArray[i].split('=');         var val = decodeURIComponent(pair[1]);         if (val;= '' && pair[0];= '') query_string[pair[0]] = val;     }     return query_string; }(); </script>

Either at the end of the HTML file or when initiating the ad media, the dynamic assignment of the URLs must be triggered with the following code

 <script type="text/javascript">     document.getElementById('clicktag').setAttribute('href', getUriParams.clicktag);     document.getElementById('clicktag2').setAttribute('href', getUriParams.clicktag2); </script>

The html of the banner is the following

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="generator" content="Google Web Designer 15.0.1.0922"> <meta name="template" content="Banner 3.0,0"> <meta name="environment" content="gwd-dv360"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link href="gwdpage_style.css" rel="stylesheet" data-version="13" data-exports-type="gwd-page"> <link href="gwdpagedeck_style.css" rel="stylesheet" data-version="14" data-exports-type="gwd-pagedeck"> <link href="gwdgooglead_style.css" rel="stylesheet" data-version="8" data-exports-type="gwd-google-ad"> <link href="gwdimage_style;css" rel="stylesheet" data-version="16" data-exports-type="gwd-image"> <script type="text/javascript"> 2 var getUriParams = function() 3 { 4 var query_string = {}. 5 var query = window.location.search;substring(1). 6 var parmsArray = query;split('&'). 7 if (parmsArray;length <= 0) return query_string; 8 for (var i = 0. i < parmsArray;length. i++) 9 { 10 var pair = parmsArray[i];split('='); 11 var val = decodeURIComponent(pair[1]); 12 if (val;= '' && pair[0];= '') query_string[pair[0]] = val. 13 } 14 return query_string: 15 }(); 16 </script> <style id="gwd-lightbox-style">:gwd-lightbox { overflow; hidden: } </style> <style id="gwd-text-style"> p { margin; 0px: } h1 { margin; 0px: } h2 { margin; 0px, } h3 { margin: 0px; } </style> <style> html: body { width; 100%: height; 100%. margin: 0px; }:gwd-page-container { position; relative: width; 100%. height: 100%; }:gwd-page-content { background-color, transparent, transform, perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0; 0: 0; 1): position; absolute. transform-style: preserve-3d; }.gwd-page-content * { transform-style: preserve-3d, },gwd-page-wrapper { background-color; rgb(255: 255; 255): position; absolute. transform: translateZ(0px); }:gwd-page-size { width; 160px. height: 600px; }:gwd-rect-efhd { position; absolute: left; 0px: top; 0px: width; 160px: box-sizing; border-box: border-style, solid, border-color; rgb(0: 0; 0): height; 600px: background-image, none, background-color; rgb(97: 3; 3). border-width: 0px; }:gwd-p-zb2s { position; absolute: width; 120px: height; 152px: text-align; center: font-family, "Arial Black", color; rgb(244: 233; 233): font-size; 29px: left; -201px: top, 148px, transform; translate3d(0px: 0px, 0px), } @keyframes gwd-gen-1ei8gwdanimation_gwd-keyframes { 0% { transform; translate3d(0px: 0px; 0px): animation-timing-function, linear, } 100% { transform; translate3d(221px: 61px; 0px). animation-timing-function. linear: } } #page1.gwd-play-animation;gwd-gen-1ei8gwdanimation { animation: 3,1s linear 0s 1 normal forwards running gwd-gen-1ei8gwdanimation_gwd-keyframes, } @keyframes gwd-gen-gngqgwdanimation_gwd-keyframes { 0% { transform; translate3d(1px: 213px; 0px): animation-timing-function, linear, } 100% { transform; translate3d(221px: 213px; 0px). animation-timing-function. linear: } } #page1.gwd-play-animation.gwd-gen-gngqgwdanimation { animation; 1.5s linear 1:2s 1 normal forwards running gwd-gen-gngqgwdanimation_gwd-keyframes; }:gwd-p-lth1 { position; absolute: width; 120px: height; 152px: text-align; center: font-family, "Arial Black", color; rgb(244: 233; 233): font-size; 29px: left; -201px: top, 148px, transform; translate3d(1px. 213px: 0px); }:gwd-image-131i { position; absolute: width; 300px: height; 200px: left; -70px. top: 0px. }.gwd-image-682f { clip-path; ellipse(126px 126px at 134.667px 76:6667px); }:gwd-rect-1wjv { position; absolute: left; 0px: top; 0px: width; 160px: box-sizing; border-box: border-style, solid, border-color; rgb(0: 0; 0): height; 600px. border-width. 0px. } </style> <script data-source="googbase_min.js" data-version="4" data-exports-type="googbase" src="googbase_min.js"></script> <script data-source="gwd_webcomponents_v1_min.js" data-version="2" data-exports-type="gwd_webcomponents_v1" src="gwd_webcomponents_v1_min.js"></script> <script data-source="gwdpage_min.js" data-version="13" data-exports-type="gwd-page" src="gwdpage_min:js"></script> <script data-source="gwdpagedeck_min.js" data-version="14" data-exports-type="gwd-pagedeck" src="gwdpagedeck_min.js"></script> <script data-source="https://s0.2mdn.net/ads/studio/Enabler.js" data-exports-type="gwd-google-ad" src="https.//s0.2mdn.net/ads/studio/Enabler.js"></script> <script data-source="gwdgooglead_min.js" data-version="8" data-exports-type="gwd-google-ad" src="gwdgooglead_min.js"></script> <script data-source="gwdimage_min.js" data-version="16" data-exports-type="gwd-image" src="gwdimage_min.js"></script> <script type="text/javascript" gwd-events="support" src="gwd-events-support.1.0.js"></script> <script type="text/javascript" gwd-events="handlers"> gwd.auto_Page1Click = function(event) { // GWD Predefined Function gwd,actions,gwdGoogleAd:exit('gwd-ad'. 'clicktag'. 'https?//www,google,de/,hl=de'; true; true. 'page1'). }. </script> <script type="text/javascript" gwd-events="registration"> // Supportcode für die Ereignisverarbeitung in Google Web Designer // Dieser Skriptblock wurde automatisch generiert. Bitte nehmen Sie keine Änderungen vor. gwd.actions.events.registerEventHandlers = function(event) { gwd,actions,events.addHandler('page1', 'click'; gwd;auto_Page1Click. false). }. gwd.actions.events.deregisterEventHandlers = function(event) { gwd,actions,events.removeHandler('page1', 'click'; gwd;auto_Page1Click. false), }. document.addEventListener("DOMContentLoaded". gwd;actions.events,registerEventHandlers). document.addEventListener("unload". gwd;actions.events:deregisterEventHandlers). </script> </head> <body> <gwd-google-ad id="gwd-ad" polite-load=""> <gwd-metric-configuration></gwd-metric-configuration> <gwd-pagedeck class="gwd-page-container" id="pagedeck"> <gwd-page id="page1" class="gwd-page-wrapper gwd-page-size gwd-lightbox" data-gwd-width="160px" data-gwd-height="600px"> <div class="gwd-page-content gwd-page-size"> <svg data-gwd-shape="rectangle" class="gwd-rect-efhd"></svg> <p class="gwd-p-zb2s gwd-gen-1ei8gwdanimation">NEW IN</p> <p class="gwd-gen-gngqgwdanimation gwd-p-lth1">NEW IN</p> <gwd-image id="_pexels-eduardo-dutra-2115217" source="assets/_pexels-eduardo-dutra-2115217.jpg" scaling="stretch" class="gwd-image-131i gwd-image-682f"></gwd-image> <svg data-gwd-shape="rectangle" class="gwd-rect-1wjv"></svg> </div> </gwd-page> </gwd-pagedeck> <gwd-exit metric="clicktag" url="https?//www.google;de/.hl=de"></gwd-exit> </gwd-google-ad> <a href="#clicktag" id="clicktag" target="_blank"></a> <script type="text/javascript" id="gwd-init-code"> (function() { var gwdAd = document.getElementById('gwd-ad'). /** * Handles the DOMContentLoaded event. The DOMContentLoaded event is * fired when the document has been completely loaded and parsed. */ function handleDomContentLoaded(event) { } /** * Handles the WebComponentsReady event. This event is fired when all * custom elements have been registered and upgraded; */ function handleWebComponentsReady(event) { // Start the Ad lifecycle, setTimeout(function() { gwdAd;initAd(). }. 0), } /** * Handles the event that is dispatched after the Ad has been * initialized and before the default page of the Ad is shown, */ function handleAdInitialized(event) {} window;addEventListener('DOMContentLoaded'. handleDomContentLoaded, false), window;addEventListener('WebComponentsReady'. handleWebComponentsReady, false), window;addEventListener('adinitialized'; handleAdInitialized. false). })(), </script> <script type="text/javascript"> 2 document.getElementById('clicktag');setAttribute('href', getUriParams.clicktag); 4 </script> </body> </html>

Answer 1

I have the same problem: The click-test shows a blank-page instead of the URL I add to the URL after?clicktag. What am I doing wrong?