4 Replies Latest reply on Mar 24, 2016 10:47 AM by matthew stuart

    clickTag on a specific part of the creative

    matthew stuart Level 2

      Hi all, I need to know how to implement clickTag code for a button that only appears for a short while in a banner ad I am creating. I don't want to apply it to the whole ad.

       

      I have been given a sample code, but it makes the whole stage clickable all of the time rather than just a small section when it's meant to appear. Here's the supplied code:

       

       

       

      Firstly I need to create a variable:

       

      <script type="text/javascript">

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

      </script>

       

      Then I need to create the clickable link:

       

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

           <div id="Stage" class="EDGE-1052579"></div>

      </a>

       

      But as I say, this makes the whole stage clickable all of the time. This is manually added to the published HTML file.

       

       

       

       

      So, I have been trying to create the variable as above in the published HTML, and then implement the clickTag click on the button on the stage within Edge so its appearance is controlled by the timeline.

       

        sym.$("ctaButton").css("cursor","pointer");

            Symbol.bindElementAction(compId, symbolName, "${ctaButton}", "click", function(sym, e) {

               window.open("javascript:window.open(window.clickTag)", "_blank");

           });

            //Edge binding end

       

       

       

      Doing this seems to have halted the animation, or the click isn't reacting when I need it to as the _blank window isn't opening.

       

      I have followed a video by Paul Trani where he selects an object on the stage and then sets a symbol variable within Edge Animate (I was hoping to set it on mouseover), but I can't find that option. I'm assuming he recorded that video in an earlier version of Edge. So, my next solution is to try to set a variable in Edge because it does't seem to work when I add it to the published HTML, but how?

       

      If you can see anything else that I might be abel to try, please let me know.

       

      Thanks.

        • 1. Re: clickTag on a specific part of the creative
          resdesign Adobe Community Professional & MVP

          You can add code to buttons either in the button - access the element's code with the {} next to it in the elements panel then choose mouseenter or mouseover/

          You can also add code to your button in compositionReady as so:

          sym.$("button").bind('click',function(){

                    window.open("javascript:window.open(window.clickTag)", "_blank");

          });

           

          Hope it works that way for you.

          • 2. Re: clickTag on a specific part of the creative
            resdesign Adobe Community Professional & MVP

            BTW if you want it to appear only part of the time you can turn off your button on the timeline with display off.

            • 3. Re: clickTag on a specific part of the creative
              matthew stuart Level 2

              Thanks for responding resdesign... I've had a bit of a play since posting, and I have similar (or the same) code to what I posted:

               

                    Symbol.bindElementAction(compId, symbolName, "${ctaButton}", "click", function(sym, e) {

                       window.open("javascript:window.open(window.clickTag)", "_blank");

                   });


              and this is working as I intend as far as the click is concerned, but I have now got the problem of setting a variable and binding to the click. The variable that I am trying to bind is a URL. At the moment, I am getting a new browser window that is blank, so how do I ensure that the desired URL is captured?


              Am I going about this the right way?


              Thanks.

              • 4. Re: clickTag on a specific part of the creative
                matthew stuart Level 2

                So, in the video that I've been following for trying to set variables, this is where Paul Trani is implementing them see screen shot, but I can't seem to find this at all!

                 

                Any thoughts?

                 

                Screen Shot 2016-03-24 at 17.36.43.png

                 

                The code hint buttons seem to be down the side, whereas they're not in my version of Edge. Also, I can locate the stop, play and other code hints, but there doesn't seem to be any for variables anymore. Have they been removed?