stackoom
  简体   繁体   中英

Placement of JS click on links measurements

 原文  2022-09-27 21:36:12  7   1    javascript/ html/ click/ banner

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>

1 answers

solution1
 0  2022-09-27 21:59:15

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?

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Click through links JS Hidden menu after click on links - HTML/JS Vanilla JS version of jQuery document on click for links? Chart js size and placement JS await execution and then placement Placement of JS script in CodeIgniter JS Project file placement Show hide links using angular js or JS on click count links based on placement and assign as variable? jquery Active class on links angular js with ng-click?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM