30 Replies Latest reply on Jul 14, 2016 1:17 PM by marjantrajkovski

    What is the proper way to add ClickTAG to an Edge Banner?

    lcg_2012 Level 1

      I have used Adobe Edge Animate in the past and I remember buttons being easier. I am currently using Adobe Edge Animate CC 2015. Perhaps they removed some of this ease with the latest version. I have a 0 opacity div over my banner that I want to use as the overall button for the banner.

       

      I need to have it work with clickTag. Something I have done hundreds of times in Flash, but am having a heck of time in Adobe Edge Animate. With Chrome's announcement they will no longer support Flash I need to learn the proper way to put clickTag actions in my code.

       

      I have my button div called "ButtonClickTAG" which is a 0 opacity background color and have clicked on the { } to the left of it in the timeline:

      ButtonClickTAG.jpg

       

      This brings up the Code window where I have entered this:

      window.open(clickTAG, "_blank");

      Code.jpg

       

      There used to be a window where you had some action options (NavigateURL or something like that). I cannot for the life of me find that window.

       

      Is it all straight code now? If so, what is the correct clickTag code to use?

       

      What I have is NOT working, the banner is not clickable.

        • 1. Re: What is the proper way to add ClickTAG to an Edge Banner?
          Zoze Level 1

          replace with:

           

          window.open("http://www.google.com", "_blank");    //google is for reference



          Or

           

           

          var clickTAG = "http://www.google.com"

           

          window.open(clickTAG, "_blank");

          • 2. Re: What is the proper way to add ClickTAG to an Edge Banner?
            lcg_2012 Level 1

            So I need to replace www.google.com with the actual URL of the site I want the banners to go to?

             

            In the well over a thousand flash banners I have done, I have never put the URL the banner links to in the file. That is usually handled by the ad distributor via assigning it there using  ClickTag. So is that gone? Meaning we now need to add URLs?

            • 3. Re: What is the proper way to add ClickTAG to an Edge Banner?
              lcg_2012 Level 1

              Also what happened to some of the Edge Animate helpers? I haven't used Edge in a while and in previous versions there were some actions you could click on such as "Stop", "Play", "Stop at", "Play from", "Play Reverse", "Open URL", etc.

               

              Now the only window I have the Code window where I can select "click" but then have to write the code. Is that the way it is now?

              • 4. Re: What is the proper way to add ClickTAG to an Edge Banner?
                lcg_2012 Level 1

                Is there a way for ad networks to assign the value of the clickTAG variable?

                • 5. Re: What is the proper way to add ClickTAG to an Edge Banner?
                  Dale Duncan [ L E W I S ]

                  Did you ever find the solution to this?

                  • 6. Re: What is the proper way to add ClickTAG to an Edge Banner?
                    MennovD Level 1

                    I would like to know if you find a solution too?

                    • 7. Re: What is the proper way to add ClickTAG to an Edge Banner?
                      rosebudd Level 3

                      Use one of the DoubleClick Studio Edge templates. Then follow the Build Guide instructions.

                       

                      Edge In-page build guide - DoubleClick Creative Solutions Help

                       

                      Rich Media Gallery | Template Database

                      • 9. Re: What is the proper way to add ClickTAG to an Edge Banner?
                        saivamsig

                        Hi, Did you got the way to implement clickTAG in adobe edge banners.?

                        I am trying to implement clickTAG, however i cannot hardcode URL in my script..?

                         

                        am using code  - window.open(clickTAG,"_blank");

                        Appreciate your reply.

                        • 10. Re: What is the proper way to add ClickTAG to an Edge Banner?
                          rosebudd Level 3

                          See above. You are going to need a rich media vendor. Doubleclick and I have heard Celra are the ones to check out.

                          • 11. Re: What is the proper way to add ClickTAG to an Edge Banner?
                            elschwartzodesign

                            Hi,

                             

                            Is there any resolution to this. I have been trying to figure it out. Please let me know.

                             

                            Ken

                            • 12. Re: What is the proper way to add ClickTAG to an Edge Banner?
                              lcg_2012 Level 1

                              Yes, we have successfully built a banner with a ClickTag that works and was successfully uploaded and tested in DoubleClick.

                               

                              I wrote a tutorial for myself since my memory ain't what it used to be.

                               

                              Here it is (this worked for me, hopefully, it will work for you):

                               

                               

                              When building Adobe Edge Animate HTML5 Banners:

                               

                              1) Include:

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

                              above

                              <!--Adobe Edge Runtime-->

                              in the MAIN authoring HTML file, not the .an, the .html.

                               

                               

                              2) Do not use gradients built in Edge. They will not play in some older browsers because they are CSS3. Use a small .jpg built elsewhere. For instance if you want a banner with a gradient from top to bottom for a 300x250 banner, make a gradient that is 1 pixel wide and 250 pixels tall. Then in Edge, change the size to be the full size of the banner 300x250.

                               

                               

                              3) ClickTag

                              Make sure in the MAIN authoring HTML file (the .html not the .an file) that (also see #7 in this guide):

                               

                              <script type="text/javascript">

                              var clickTag = "https://www.google.com";

                              </script>

                              is below:

                              <!--Adobe Edge Runtime End-->

                               

                              In Adobe Edge Animate, place a transparent spacer.gif in the topmost layer and make it the size of the banner ad. Click between the {} to the left of the object:

                              01_Object.png

                               

                              Then give it some code:

                              02_Code.png

                              window.open(clickTag, "_blank");

                               

                              4) LOOPING:
                              On the first frame of the animation click the {} to the left of Actions in the timeline beneath the down arrow. This will put that symbol {•} on frame 0 of the animation:

                              03_Code.png

                              Add this counter code:
                              04_Code.png


                              sym.setVariable("counter",1);

                               

                              Move the playhead JUST past 0:00 (as close to 0:00 as you can get without being on it) and got Timeline > Insert Label in the Edge menu and label the frame “LoopStart”. This will be the spot the banner jumps to when looped.

                               

                               

                               

                              If the banner loops, and it should at least once, that means it has an “out” animation. Meaning some transition from the last frame of content transitioning to the beginning. This is often a simple fade. So we need to tell the animation to check the counter when it hits the start of that “out” animation and see if it has already looped. So position the playhead on that beginning of the “out” animation and click {} to the right of Actions like you did in #4. Then in the coding window add this:

                              05_Code.png

                              if (sym.getVariable("counter") == 2) {

                              sym.stop();

                              }

                              else {

                              sym.play();

                              sym.setVariable("counter", sym.getVariable("counter") + 1);

                              }

                              Change the “2” in the if statement […”counter”) == 2] to whatever number of loops you would like to have the banner loop.

                               

                              Move the playhead to the end of the “out” animation and once again click the {} to the right of Actions in the timeline. Then insert this code (it tells the playhead to jump to the frame labeled “LoopStart”) when it hits that final frame:

                              06_Code.png

                              this.play("LoopStart");

                               

                              5) Once the banner is done, make sure you are on the Stage layer and move the playhead to the visible end frame (the last frame of content before the “out” animation).

                              Click the camera icon next to Poster in the left toolbar to take a snapshot of the frame. If you don’t see “Poster”, you are not on the Stage layer.
                              07_Poster.png

                              This will make a poster.png in images folder. If one already exists, it maybe from the previous banner you used to create this one. Delete all poster.png from the images folder (from outside Edge) and do another snapshot.

                               

                              6) Click Edit… next to Down-level Stage

                               

                              7) Place the poster.png file there and click on it. In the left column choose “self” and the paste “javascript:window.open(window.clickTag)” in the Link URL field.

                              08_Link.png

                               

                              8) BEFORE UPLOADING!!!!!

                               

                              Make sure ALL links are https, not http. DoubleClick won’t accept http only links.

                               

                              MAKE SURE TO CHECK THE PUBLISHED FILE BEFORE DELIVERY(Edge Animate writes http even if you change it to https in the authoring file)  to ensure this link is https:

                               

                              <script type="text/javascript" charset="utf-8" src="https://animate.adobe.com/runtime/6.0.0/edge.6.0.0.min.js"></script>

                              • 13. Re: What is the proper way to add ClickTAG to an Edge Banner?
                                elschwartzodesign Level 1

                                THANK YOU SO MUCH. A few quick questions, I'm assuming below, instead of "google" we place in our url we want directed to?

                                 

                                3) ClickTag

                                Make sure in the MAIN authoring HTML file (the .html not the .an file) that (also see #7 in this guide):

                                 

                                <script type="text/javascript">

                                var clickTag = "https://www.google.com";

                                </script>

                                • 14. Re: What is the proper way to add ClickTAG to an Edge Banner?
                                  lcg_2012 Level 1

                                  I assumed that as well, but that is INCORRECT. DoubleClick replaces "https://www.google.com" with whatever is entered into the DoubleClick system.

                                  • 15. Re: What is the proper way to add ClickTAG to an Edge Banner?
                                    rosebudd Level 3

                                    The only thing that is incorrect in this excellent answer, is including enabler.js in the head. It is not doing anything because there is no reference to enabler in your Edge click function.

                                     

                                    In a DCRM Edge banner ad (RM means Rich Media) enabler.js uses a DCRM specific function to execute what DCRM refers to as exits.

                                     

                                    So one less thing to edit in your Edge HTML file for a DCM uploaded banner ad..

                                    • 16. Re: What is the proper way to add ClickTAG to an Edge Banner?
                                      Stella_Rae

                                      Hi,

                                       

                                      I am working on moving from Flash to Edge Animate for the creation of Web banner ads we created in-house, so far have had no issue creating the artwork required using Edge. The problem has come from the ClickTag on upload to DCM, unfortunately this is done by a third party so its been tricky knowing exactly what the issues have been or dealing direct with DoubleClick when we have no access to the account management side of it. I followed the direction above and the feedback our Media agent received from DCM on the TEST file we did. The ClickTag is finally being recognised on upload with DCM. Below is the email our Media Booker received when she contacted them regarding this:

                                       

                                      ............


                                      Thanks for writing in, and happy to help!

                                       

                                      I appreciate your efforts in trying to switch to HTML5 creatives. It looks like the Click tag isn’t per the DCM’s requirements and that could be the reason why the DCM is asking to include a click tag as it doesn’t recognize one. I’ve mentioned some additional points below:

                                       

                                      ?         To make it easier, the ClickTag should be exactly like below:

                                       

                                      <html>

                                      <head>

                                      <meta name=”ad.size” content=”width=300,height=250”>

                                      <script type="text/javascript">

                                      var clickTag = "http://www.google.com"; </script>

                                      </head>

                                      <body>

                                      [The rest of your creative code goes here.]

                                       

                                      In such case you’d also need to ensure your creative uses the click tag variable as the click-through URL:

                                       

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

                                      <img src="images/dclk.png" border=0>

                                      </a>

                                      </body>

                                      </html>

                                       

                                      ?         Please ask the creative developer to fix the click tag issue accordingly and try uploading the creative in DCM again


                                      ...........

                                       

                                      As mentioned, this along with the guide above, helped ensure the ClickTag is now being recognised but now DCM won't accept it as its flagging the dclk.png image as missing, which it would be as its not in the .Zip file I supplied. As I am stuck in the middle - I am not an HTML expert by any means, I am a Graphic Designer who has been thrown into the realms of HTML (having learnt Flash 10 years ago and discovered they were STILL using it in the my new role that I started a matter of months ago). Now Flash has been pulled, everyone is looking at me to continue creating the same artwork for our Flash web banners but in HTML without understanding that its a completely different process. Can anyone shed some light on the second piece of coding and where this fits in with Adobe Edge Animates to ensure it uploads via DCM as no help forums seem to mention it?

                                       

                                      Any help would be greatly appreciated!

                                      • 17. Re: What is the proper way to add ClickTAG to an Edge Banner?
                                        lcg_2012 Level 1

                                        The only trouble we ran into was that all urls need to be https not http. Other than that, my tutorial works for us. There is a LOT of mis-information out there. I did tons of trial and error before we found what works. The second part of their directions to you seems wrong to me. Your dclk.png needs to be in the Edge Library and on the Edge Stage, then follow #3 in the tutorial. Sorry I can't be more help.

                                        • 18. Re: What is the proper way to add ClickTAG to an Edge Banner?
                                          chasMous ee

                                          I have successfully made in page banners that work in doubleclick.

                                           

                                          I used the following code:

                                           

                                          In the head, right after the title and before "<!--Adobe Edge Runtime-->", I put:

                                           

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

                                           

                                          The "AdobeEdge.loadComposition(...." line that is in the head, I've enclosed in the check function to make sure the enabler is loaded before the banner starts.

                                          <script>

                                          // If true, start function. If false, listen for INIT.

                                              window.onload = function() {

                                                  if (Enabler.isInitialized()) {

                                                      enablerInitHandler();

                                                  } else {

                                                      Enabler.addEventListener(studio.events.StudioEvent.INIT,

                                                      enablerInitHandler);

                                                  }

                                              }

                                              function enablerInitHandler() {

                                                  ----------------------------------> AdobeEdge.loadComposition(....<----------------------------------

                                              }

                                          </script>

                                           

                                          In the body of the html I put:

                                          <script>

                                              var clickTag = "https://www.google.com";

                                              function bgExitHandler(e) {

                                                  Enabler.exit('Background Exit');

                                                  var win = window.open(window.clickTag);

                                              }

                                          </script>

                                           

                                          In Edge, on the click event of a rectangle that I've put over the whole stage and made opacity 0, I put:

                                          bgExitHandler(false);

                                           

                                          Hopefully my code will render correctly here.

                                          • 19. Re: What is the proper way to add ClickTAG to an Edge Banner?
                                            rosebudd Level 3

                                            clicktag and exit are not the same.

                                             

                                            clickTag is for DCM.

                                             

                                            enabler exit is for DCRM

                                             

                                            Exit and enabler.js is for DCRM

                                             

                                            if you create a DCRM file, DCM will flag it as having no clickTag

                                             

                                            DCRM is only needed for Rich Media banners. The vast majority of banners are not rich media.

                                            • 20. Re: What is the proper way to add ClickTAG to an Edge Banner?
                                              rosebudd Level 3

                                              Calling enabler.js does nothing because there is no call to enabler.js in the Edge file that is using .window.open(clickTag, "_blank");

                                              • 21. Re: What is the proper way to add ClickTAG to an Edge Banner?
                                                chasMous ee Level 1

                                                Even though the original post is asking about just how to add clickTag, my answer is how to add clickTag for use in doubleclick. Preparing flash creative, you didn't need to worry about all this enabler and exit stuff, but to serve html5 creative, you have to set all this up as I described.

                                                • 22. Re: What is the proper way to add ClickTAG to an Edge Banner?
                                                  chasMous ee Level 1

                                                  In Edge, there is an event onClick calling a function that is defined in the html, "bgExitHandler". The function calls for the enabler exit as well as clickTag are there.

                                                  • 23. Re: What is the proper way to add ClickTAG to an Edge Banner?
                                                    Stella_Rae Level 1

                                                    Hi,

                                                     

                                                    Thanks for all the responses. I am awaiting an answer from DoubleClick regarding the 2nd part of the code as it makes no sense to me - I have no idea what the missing image is required for - unless this is somehow referencing the clicktag 'rectangle' thats set up as a blank image to allow a clickable area?

                                                     

                                                    If the banners have successfully worked using Edge and DoubleClick using the above solutions, then mine should too with the same code surely? (minus the 2nd part of the code). We are also suffering from an inexperience Media Agency, who don't seem to have any experience with handing HTML files so won't provide us with any solution other than force us to use Google Web Developer - I really don't want to use this, it seems quite confusing from a designer point of view to use.

                                                     

                                                    Has anyone tried creating banners using Google Web Developer? I'm feeling rather frustrated that our media agency is trying to force us down this path instead of working on solving the Edge Animates code with DoubleClick to make their lives easier rather than ours!

                                                     

                                                    Thanks again people!

                                                    • 24. Re: What is the proper way to add ClickTAG to an Edge Banner?
                                                      lcg_2012 Level 1

                                                      We just tested banners I built using the tutorial I wrote and marked as the correct answer to this question and we got no DoubleClick errors. So that is the method I am using without the extra .js file others have mentioned.

                                                      • 25. Re: What is the proper way to add ClickTAG to an Edge Banner?
                                                        Stella_Rae Level 1

                                                        Thanks for this, I will removed the 2nd part of the code given as this seems redundant given yours works without it.

                                                         

                                                        Can i just check on where this piece of code should be as I can't see it within my HTML file to make sure its https:

                                                         

                                                        <script type="text/javascript" charset="utf-8" src="https://animate.adobe.com/runtime/6.0.0/edge.6.0.0.min.js"></script>

                                                        • 26. Re: What is the proper way to add ClickTAG to an Edge Banner?
                                                          elschwartzodesign Level 1

                                                          Hi,

                                                           

                                                          Sorry to chime in late here. But I have tested in Atlas and Double click and had luck. The one important thing to address is to understand where the banner is being served from. While the banner may not have any errors using the Double click, if your banner is not being served through Double click, that code is useless because it only works in conjunction with their server and tracking (this is my understanding). The IAB, is in process of putting out a standard as to how these banners are coded, so that there is less confusion.

                                                          • 27. Re: What is the proper way to add ClickTAG to an Edge Banner?
                                                            chasMous ee Level 1

                                                            In the publish settings, at the bottom there is a box that you need to uncheck, You can't host the cdn files at adobe cloud or however it is phrased. This will put another file in the publish folder and put an include to it in the html.


                                                            That may be your issue. You can't load files from another website. I think I also have seen SSL validation errors from DCM when the event code was broken in edge. like brackets missing.

                                                            • 28. Re: What is the proper way to add ClickTAG to an Edge Banner?
                                                              rosebudd Level 3

                                                              You need to use https://. If you do use https:// you won't be prompted to do SSL which is //somedomain.com

                                                              • 29. Re: What is the proper way to add ClickTAG to an Edge Banner?
                                                                directp77185493

                                                                Is there a way to do this all in Edge without editing the html after you publish?