8 Replies Latest reply on Oct 12, 2016 9:55 AM by nickg55985485

    Html 5 banner clickTag insertion Help !

    douglasp35586355

      Sorry if this question was posted again and again, but i'm not a developper, just a graphic designer with little html abilities. But for this i'm starting to be crazy : My publisher(www.bonus.ch) said there is no clickTag in my banner, and i don't know what is wrong and how to make it works.

      I've made this banner in Edge animate and created a transparent button with this code on it :

       

      // insérer le code du clic de souris ici

      window.open(clickTag, "_blank");

       

      in the second time and here is the problem what do i need to do in my html file ? :

       

      <!DOCTYPE html>

      <html>

      <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

        <title>Sans titre</title>

      <!--Adobe Edge Runtime-->

          <script type="text/javascript" charset="utf-8" src="edge_includes/edge.6.0.0.min.js"></script>

          <style>

              .edgeLoad-EDGE-720233178 { visibility:hidden; }

          </style>

      <script>

         AdobeEdge.loadComposition('CAF_Bonus_300x100px_CA-Boost_DE_V1', 'EDGE-720233178', {

          scaleToFit: "none",

          centerStage: "none",

          minW: "0px",

          maxW: "undefined",

          width: "300px",

          height: "100px"

      }, {"dom":{}}, {"dom":{}});

      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;

      } ();

      var clickTag= getUriParams.click + 'https://www.ca-financements.ch/de/de/kampagne/ca-boost.html?utm_source=Bonus&utm_medium=Ba nnerDE&utm_campaign=CA-Boost';

      </script>

      <!--Adobe Edge Runtime End-->

       

       

      </head>

      <body style="margin:0;padding:0;">

        <div id="Stage" class="EDGE-720233178">

        </div>

      </body>

      </html>

       

      I become crazy and some help will be very welcome !

       

      Thanks a lot !

        • 2. Re: Html 5 banner clickTag insertion Help !
          douglasp8567674

          Thanks a lot for this, but everything in Edge is OK and the clickTag inserted on a button

          (I've certainly used this tutorial in fact !) But the problem is in the HTML, i can't found the correct code to make it works on the website where the banner must be displayed (www.bonus.ch).

          And there's no help from them to solve the problem. They just told me it doesn't work (wrong redirection on click). As i told you i'm only a graphic designer and not a web developper.. Don't throw me any stone !

          You are my only hope !

          Thanks a lot

          • 3. Re: Html 5 banner clickTag insertion Help !
            osiic Level 1

            Hi,

            Try this one:

             

            <!DOCTYPE html>

            <html>

            <head>

              <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

              <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

              <title>Sans titre</title>

            <!--Adobe Edge Runtime-->

                <script type="text/javascript" charset="utf-8" src="edge_includes/edge.6.0.0.min.js"></script>

                <style>

                    .edgeLoad-EDGE-720233178 { visibility:hidden; }

                </style>

            <script>

               AdobeEdge.loadComposition('CAF_Bonus_300x100px_CA-Boost_DE_V1', 'EDGE-720233178', {

                scaleToFit: "none",

                centerStage: "none",

                minW: "0px",

                maxW: "undefined",

                width: "300px",

                height: "100px"

            }, {"dom":{}}, {"dom":{}});

            </script>

            <script type="text/javascript">

            var parsed = (document.location.href.split('#')[1]||'').split('&');

            var params = parsed.reduce(function (params, param) {

            var param = param.split('=');

            params[param[0]] = decodeURIComponent(param.slice(1).join('='));

            return params;

            }, {});

            </script>

            <!--Adobe Edge Runtime End-->

             

            </head>

            <body style="margin:0;padding:0;">

                <div onclick="window.open(params.clickTag,'_blank');" style="cursor:pointer">

                <div id="Stage" class="EDGE-720233178">

                </div>

                </div>

            </body>

            </html>

            • 4. Re: Html 5 banner clickTag insertion Help !
              douglasp8567674 Level 1

              Hi osiic and thanks for your answer. It seems to work, but a blank page is opening on click, then what about the destination url, do i need to insert it somewhere in the code or not? When I test the banner on DoubleClick Campaign Manager HTML5 Validator. It says "Missing click tag check ".

              I've searched a lot and found some directions like this :

               

              <!DOCTYPE html>

              <html>

              <head>

                <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

                <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

                <title>Sans titre</title>

               

              <!--Adobe Edge Runtime-->

                  <script type="text/javascript" charset="utf-8" src="edge_includes/edge.6.0.0.min.js"></script>

                 

                  <style>

                      .edgeLoad-EDGE-720233178 { visibility:hidden; }

                  </style>

              <script>

                  AdobeEdge.loadComposition('CAF_Bonus_300x100px_CA-Boost_DE_V1', 'EDGE-720233178', {

                  scaleToFit: "none",

                  centerStage: "none",

                  minW: "0px",

                  maxW: "undefined",

                  width: "300px",

                  height: "100px"

              }, {"dom":{}}, {"dom":{}});

              </script>

              <script type="text/javascript">

              var clickTag = "https://www.ca-financements.ch/de/de/kampagne/ca-boost.html?utm_source=Bonus&utm_medium=Ba nnerDE&utm_campaign=CA-Boost";

              var parsed = (document.location.href.split('#')[1]||'').split('&');

              var params = parsed.reduce(function (params, param) {

              var param = param.split('=');

              params[param[0]] = decodeURIComponent(param.slice(1).join('='));

              return params;

              }, {});

              </script>

              <!--Adobe Edge Runtime End-->

              </head>

              <body style="margin:0;padding:0;">

                  <div onclick="params.clickTag,'_blank';" style="cursor:pointer">

                  <div id="Stage" class="EDGE-720233178">

                  </div>

                  </div>

              </body>

              </html>

               

              It seems to work on DoubleClick Campaign Manager HTML5 Validator, but the website where the banners must be hosted, said it's not working (no tracking). It made me crazy, because no one from this website can explain what to do and my client is waiting for his campaign.

               

              They only send to me this code, where in line 35 they asked me to insert the destination url but when i do that, on click it opens a page with a wrong address like this : undefinedhttps://www.xxxxxx

               

              code.png

              Sorry this is certainely an easy question but i need to learn a lot about doubleclick process i think.

              • 5. Re: Html 5 banner clickTag insertion Help !
                osiic Level 1

                In my situation it works, and the destination URL is added by the publisher.

                • 6. Re: Html 5 banner clickTag insertion Help !
                  osiic Level 1

                  I have found one banner on that website and there is code, so I aded it to your HTML:

                   

                  <!DOCTYPE html>

                  <html>

                  <head>

                      <script type="text/javascript">

                     

                        (function() {

                          var relegateNavigation = '';

                          var handleClickTagMessage = function(e) {

                            try {

                              var eventData = JSON.parse(e.data);

                            } catch (err) {

                              return;

                            }

                            if (eventData.isInitClickTag) {

                              if (eventData.clickTags) {

                                for (var i = 0; i < eventData.clickTags.length; i++) {

                                  var clkTag = eventData.clickTags[i];

                                  window[clkTag.name] = clkTag.url;

                                }

                              } else if (eventData.clickTag) {

                                window.clickTag = eventData.clickTag;

                              }

                              relegateNavigation = eventData.relegateNavigation;

                            }

                          };

                   

                   

                          if (open.call) {

                            window.open = function(open) {

                              return function(url, name, features) {

                                if (relegateNavigation === 'parent') {

                                  var message = {'clickTag': url, 'isPostClickTag': true};

                                  parent.postMessage(JSON.stringify(message), '*');

                                } else {

                                  var args = [url, name];

                                  if (features) {

                                    args.push(features);

                                  }

                                  open.apply(window, args);

                                }

                              };

                            }(window.open);

                          }

                   

                   

                          if (window.addEventListener) {

                            window.addEventListener(

                                'message', handleClickTagMessage, false);

                          } else {

                            window.attachEvent('onmessage', handleClickTagMessage);

                          }

                        })();

                     

                    </script>

                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

                    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

                    <title>Sans titre</title>

                  <!--Adobe Edge Runtime-->

                      <script type="text/javascript" charset="utf-8" src="edge_includes/edge.6.0.0.min.js"></script>

                      <style>

                          .edgeLoad-EDGE-720233178 { visibility:hidden; }

                      </style>

                  <script>

                     AdobeEdge.loadComposition('CAF_Bonus_300x100px_CA-Boost_DE_V1', 'EDGE-720233178', {

                      scaleToFit: "none",

                      centerStage: "none",

                      minW: "0px",

                      maxW: "undefined",

                      width: "300px",

                      height: "100px"

                  }, {"dom":{}}, {"dom":{}});

                  </script>

                  <!--Adobe Edge Runtime End-->

                  <script type="text/javascript">

                  var clickTag = "https://www.ca-financements.ch/de/de/kampagne/ca-boost.html?utm_source=Bonus&utm_medium=Ba nnerDE&utm_campaign=CA-Boost"; </script>

                   

                  </head>

                  <body style="margin:0;padding:0;">

                      <a href="javascript:window.open(window.clickTag); void(0);">

                    <div id="Stage" class="EDGE-720233178">

                    </div>

                  </a>

                  </body>

                  </html>

                  • 7. Re: Html 5 banner clickTag insertion Help !
                    douglasp8567674 Level 1

                    It seems to work, as the last time but the publisher said at each try, "hey there is no tracking" that's just why i become crazy. I'll try with this code, if it doesn't work, i give up ! Thanks for your time.

                    • 8. Re: Html 5 banner clickTag insertion Help !
                      nickg55985485 Level 1

                      I had this problem with double click.

                       

                      I assigned this code to my clicktag

                      window.open("https://insertwebsite.com", "_blank");

                       

                      then publish and UNTICK Host runtime and Publish content as static html.

                       

                      I then opened the html file in brackets (app) and added this code before <!--Adobe Edge Runtime-->

                       

                      <script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>

                      <!--Adobe Edge Runtime-->

                       

                      Then

                      <!--Adobe Edge Runtime End-->

                      <script type="text/javascript">

                      var clickTag = "https://insertwebsite.com";

                      </script>

                       

                       

                      after <!--Adobe Edge Runtime End-->

                       

                       

                      This worked for me.

                      I was stumped for weeks!

                      1 person found this helpful