13 Replies Latest reply on Oct 7, 2016 12:53 PM by ering36988291

    ONE Action/Go To WebPage Link for whole animation

    ering33291968

      Hi,

       

      I'm very stuck! I made an animation in Adobe Animate that has a CTA. I need people to be able to click on the CTA AND on the whole area of the animation.

       

      However, since I"m uploading it to DoubleClick, I can only have one link/clickTag.

       

      Is there a way to do this? At the moment, I have people clicking the whole animation, but the CTA doesn't work.

       

      Thank you!

        • 1. Re: ONE Action/Go To WebPage Link for whole animation
          just.emma Level 4

          Apply the clickTag to the whole canvas element in your HTML, instead of to a button in Animate.

           

          Are these for DCM?  If so, in the HTML it would look like:

          <canvas id="canvas" width="300" height="250" onclick="javascript:window.open(window.clickTag)"></canvas>

          </body>

           

          With the bolded portion added before the closing canvas tag.

          2 people found this helpful
          • 2. Re: ONE Action/Go To WebPage Link for whole animation
            rezun8 Level 4

            You can have multiple click tags and links in your file, you'll need to specify where each one goes inside the DCM account.

            1 person found this helpful
            • 3. Re: ONE Action/Go To WebPage Link for whole animation
              just.emma Level 4

              To clarify, do you want the whole banner to lead to one URL no matter where it's clicked, or do you want to have it lead to multiple clickthrough URLs depending on where it's clicked?

               

              When you said the CTA isn't working, I was assuming you meant that the rollover state wasn't working on the CTA because you have a button covering the whole banner on top of the CTA button.

              1 person found this helpful
              • 4. Re: ONE Action/Go To WebPage Link for whole animation
                ering33291968 Level 1

                Exactly - I'd like to have whole banner lead to one URL no matter where it's clicked. The rollover state and all the animations are working fine.

                 

                This IS for DCM.

                 

                At the moment, I have been adding the below code to the Actions section:

                 

                this.Base.addEventListener("click", fl_ClickToGoToWebPage_10);

                 

                function fl_ClickToGoToWebPage_10() {

                  window.open("http://www.adobe.com", "_blank");

                }

                 

                Then, after publishing, I'll add the this to the <head> of the HTML

                 

                <script type=”text/javascript”>

                  var clickTag = “http://www.adobe.com”;

                </script>

                 

                ----

                 

                I was ALSO told this:

                "One last thing, could you double check that the click through URL will be referencing the click tag and that we are not hard coding the landing page in the creative.  We have additional tracking parameters which DCM ads to the URL and if we hardcode the landing page they are not appended."

                 

                "It looks like in the code you provided the code is telling the click action to open in a new window directly to the landing page but doesn’t reference the click tag variable."

                 

                So basically, I need to know what to put in Animate and what to put in the < head> of HTML.

                 

                I know this is a LOT! I hope you can help.

                • 5. Re: ONE Action/Go To WebPage Link for whole animation
                  just.emma Level 4

                  Okay, that's what I thought.  So you can delete all of your that code from Animate, and just put all of the clickTag stuff in the HTML; add the bolded part below before the closing canvas tag:

                  <canvas id="canvas" width="300" height="250" onclick="javascript:window.open(window.clickTag)"></canvas>

                  </body>

                   

                   

                  Regarding your second question, you're already defining the clickTag as a variable in the head of the HTML, so you don't want to also hard code the URL the way you have it.  Keep the clicktag variable in the head the way you currently have it, and then apply the clicktag to the canvas as I showed above.

                   

                  Alternately, you could replace your current code in Animate with this:

                  this.Base.on("click", function(evt){

                    window.open(clickTag, "_blank");

                  });

                   

                  And also include:

                  this.CTA.on("click", function(evt){

                    window.open(clickTag, "_blank");

                  });

                   

                  so the CTA will be clickable too.   (Replace "CTA" with whatever the instance name of your CTA is).

                  1 person found this helpful
                  • 6. Re: ONE Action/Go To WebPage Link for whole animation
                    ering33291968 Level 1

                    This works beautifully locally!

                     

                    I'm not sure if this is your purview, but when I upload it to DCM it says it's "Missing click tag check". Am I missing something in the code below?

                     

                    <meta name="ad.size" content="width=300, height=600">
                    <script type=”text/javascript”>
                      
                    var clickTag = http://www.adobe.com”;
                    </script>

                    <!--write your code here -->

                    <canvas id="canvas" width="300" height="600" style="display: block; background-color:rgba(56, 56, 56, 0.00)  onclick="javascript:window.open(window.clickTag)">

                    </canvas>

                    • 7. Re: ONE Action/Go To WebPage Link for whole animation
                      just.emma Level 4

                      You're using curly quotes which won't work.  Change  http://www.adobe.com  to "http://www.adobe.com".

                       

                      I would also use google.com instead of adobe.com, though it won't really matter in the end.

                      • 8. Re: ONE Action/Go To WebPage Link for whole animation
                        just.emma Level 4

                        The quotes are also curly here <script type=”text/javascript”> and shouldn't be.  Use straight quotes (") everywhere.

                        • 9. Re: ONE Action/Go To WebPage Link for whole animation
                          ering33291968 Level 1

                          Wow, wow, wow. Thank you so, so much for you help. I'm all set! In case someone is looking for a summary of my solution:

                           

                          I added this snippet to Adobe Animate actions (bold being the instance being clicked on).

                           

                          this.[instance].on("click", function(evt){

                            window.open(clickTag, "_blank");

                          });

                           

                          Published it and added the following snippets to HTML.

                           

                          In the <head> portion at the beginning with relevant parts adapted:

                          <meta name="ad.size" content="width=300, height=600">
                          <script type="text/javascript">
                            var clickTag = "http://www.google.com";
                          </script>

                           

                          Then in the <canvas id> at the end - by inserting the text in bold inside it:

                          <canvas id="canvas" width="300" height="600" onclick="javascript:window.open(window.clickTag)">
                          </canvas>

                           

                          (In some ways, it would be nice to have the question for this thread edited as it answered a few other issues. Let me know I how I can pay it forward!)

                          • 10. Re: ONE Action/Go To WebPage Link for whole animation
                            just.emma Level 4

                            Hey, just to clarify a little bit... that's actually redundant.  if you have this in your HTML:

                            <canvas id="canvas" width="300" height="600"onclick="javascript:window.open(window.clickTag)">

                            </canvas>

                             

                            You don't need this in Animate:

                            this.[instance].on("click", function(evt){

                              window.open(clickTag, "_blank");

                            });

                             

                            Both of those do the same thing (open the clickTag in a new window), so you only need to include one or the other.

                            • 11. Re: ONE Action/Go To WebPage Link for whole animation
                              ering36988291

                              Hi -- I'm working on another ad. For some reason, even though I've copied and pasted the code directly, been careful with curly quotes, this still doesn't click through properly. Am I missing something here?

                               

                              This is what I have:

                               

                              <script type="text/javascript">

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

                              </script>

                              <title>ShrinkingWorldSmall2</title>

                              <!-- write your code here -->

                               

                              (rest of code)

                               

                              <!-- write your code here -->

                              </head>

                              <body onload="init();" style="margin:0px;">

                                <canvas id="canvas" width="300" height="250" style="display: block; background-color:rgba(0, 204, 255, 0.00)onclick="javascript:window.open(window.clickTag)"></canvas>

                              </body>

                              </html>

                              • 12. Re: ONE Action/Go To WebPage Link for whole animation
                                just.emma Level 4

                                You're missing the quote after background-color:rgba(0, 204, 255, 0.00) before onclick, which is needed to end the style tag.

                                 

                                It should look like this:

                                <canvas id="canvas" width="300" height="250" style="display: block; background-color:rgba(0, 204, 255, 0.00)" onclick="javascript:window.open(window.clickTag)"></canvas>

                                1 person found this helpful
                                • 13. Re: ONE Action/Go To WebPage Link for whole animation
                                  ering36988291 Level 1

                                  just.emma to the rescue again! Thank you so much!