7 Replies Latest reply on Feb 13, 2018 1:40 PM by kryinlion

    Adding Click Tags for DCM in Adobe Animate HTML5 file

    gerber914 Level 1

      Hello,

       

      I would like to use Adobe Animate to create ads for use in DCM. I need help in getting the published code to be compliant, valid for use in DCM, including Click Tags, etc. Does anyone have any info or help on how to go about adding Click Tags and any other required DCM code to published Animate html 5 files? Either within Animate or afterwards in the published html file?


      Thanks!

        • 1. Re: Adding Click Tags for DCM in Adobe Animate HTML5 file
          just.emma Level 4

          This gets asked several times per week; I feel like it should be stickied:

           

          HTML5 banners (for DoubleClick) ?

          • 2. Re: Adding Click Tags for DCM in Adobe Animate HTML5 file
            kryinlion Level 1

            I have been doing this since the forced march to H5. I used to use flash, then adobe Edge, then finally back to Adobe animate. I prefer to put my objects and code inside my canvas object.  It works better across browsers that way, had a terrible time with browsers using GWD. 

             

            Some of your units have a clickable disclaimer so we cannot simply wrap the canvas object in an anchor tag. Which is a simple solution mentioned above, but in our case it is not a viable option.

             

            I have figured out the code to get this to work in DCS (Double Click Studio), using a combination of a frame script and then the .enabler function which is called by adding <script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script> to your Html template with the variable clickTag:      var clickTag = "http://www.thebellbeat.com";

             

            The call out to the enabler function is in the JS in the canvas object, i put it on the frame script in frame one, linking it to the CTA and the background ClickThru. Here is the example for the background clickthru object.

            //========================  NEED for DC  ========================

            //listens for click event and calls click function

            root.ClickThru.addEventListener("click", clickTag);

             

             

            //click function

            function clickTag() {

            Enabler.exit('clickTag');

            }

            //========================  NEED for DC  ========================

             

            The enabler script allows the vendor to change the exit url when they load it into DCS.  Which makes life easier across the board.

             

            Which is great, but now there are DC bid manager and DCM to deal with. Those two do not use the enabler function. The only examples i have found are ones that wrap the canvas object in an anchor tag.  Which of course with a clickable disclaimer featured in most of our ad units will not work. I am currently working thru ideas trying to figure out how to get the tracking to fire, while still maintaining the disclaimer functionality.  

             

            I have tested them in the double click validator and have several that validate. However when the vendor uploads them to DCM, the tracking does not fire.  According to the validator both exit links work, the back ground click thru, and the CTA, and it says that they will track...according to the vendor they do not.

            Screen Shot 2018-02-13 at 10.37.54 AM.png

             

            Has anyone ran into this before or figured out a solution to it?

             

            This is the script i have added to my template for DCM, still waiting on test results of this last version.

             

             

            --------This goes in the top portion they give you to add your code  --------------------------

            <!-- write your code here -->

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

            <script type="text/javascript"> 

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

            </script>

             

            --------This goes in the bottom portion they give you to add your code  --------------------------

            <!-- write your code here -->

            <script type="text/javascript">     

               

            //-------------- clickTag -------------------------------

            function clickthrough() {

            window.open(window.clickTag );

            }

            </script>

            <!-- END write your code here -->

             

            any thoughts or advice would be appreciated.

            cheers

            • 3. Re: Adding Click Tags for DCM in Adobe Animate HTML5 file
              ClayUUID Adobe Community Professional

              kryinlion  wrote

               

              I have been doing this since the forced march to H5.

              What on Earth is "H5"?

              • 4. Re: Adding Click Tags for DCM in Adobe Animate HTML5 file
                kryinlion Level 1

                lol. Sorry got sick of saying HTML5 a zillion times a day.

                • 5. Re: Adding Click Tags for DCM in Adobe Animate HTML5 file
                  kryinlion Level 1

                  The good news is I got the latest test back and it worked. The missing piece was adding window.clickTag in this line of code.

                  window.open(window.clickTag );

                   

                  DCM must look for the window.clickTag to register the click.

                   

                  Here is a link to a file which contains a template which can be loaded via the publish settings in Adobe Animate, and a js file which can be copied and added to frame one of the timeline.  If anyone ever runs into the same problem.

                   

                  Hightail

                  Thanks for the help.

                  • 6. Re: Adding Click Tags for DCM in Adobe Animate HTML5 file
                    marjantrajkovski Level 4

                    Why do you complicate?

                     

                    Here is template for DoubleClick Campaign Manager (DCM) and DoubleClick Bid Manager (DBM)

                    Added red parts and removed necessary lines from default template.

                     

                    <!DOCTYPE html>

                    <html>

                    <head>

                    <meta charset="UTF-8">

                    <title>$TITLE</title>

                    <meta name="viewport" content="width=device-width, initial-scale=1">

                    <meta name="ad.size" content="width=$WT,height=$HT">

                    <script src="https://s0.2mdn.net/ads/studio/cached_libs/createjs_2015.11.26_54e1c3722102182bb133912ad44 42e19_min.js"></script>

                    <script>var clickTag = "https://www.example.com"</script>

                    $CENTER_STYLE

                    $ANIMATE_CC_SCRIPTS

                    $SCRIPT_START

                    var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;

                    function init() {

                    canvas = document.getElementById("$CANVAS_ID");

                    anim_container = document.getElementById("$ANIM_CONTAINER_ID");

                    dom_overlay_container = document.getElementById("dom_overlay_container");

                    $CREATE_LOADER

                    $LOAD_MANIFEST

                    $PRELOAD_ASSETS

                    }

                    $HANDLE_FILE_LOAD_START

                    $HANDLE_FILE_LOAD_BODY

                    $HANDLE_FILE_LOAD_END

                    $HANDLE_COMPLETE_START

                    $CREATE_STAGE

                    $START_ANIMATION

                    $RESP_HIDPI

                    $HANDLE_COMPLETE_END

                    $PLAYSOUND

                    $SCRIPT_END

                    </head>

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

                    <div id="$ANIM_CONTAINER_ID" onclick="window.open(window.clickTag)" style="background-color:$BG; width:$WTpx; height:$HTpx; cursor:pointer;">

                    <canvas id="$CANVAS_ID" width="$WT" height="$HT" style="position: absolute; display: $CANVAS_DISP; background-color:$BG;"></canvas>

                    <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:$WTpx; height:$HTpx; position: absolute; left: 0px; top: 0px; display: $CANVAS_DISP;">

                    </div>

                    </div>

                        $PRELOADER_DIV

                    </body>

                    </html>

                    • 7. Re: Adding Click Tags for DCM in Adobe Animate HTML5 file
                      kryinlion Level 1

                      The need for two distinct click events was the reason for the complication. Most of the code with the exception of that in the "write your code here" section of the template was generated by Animate.

                       

                      I will be the first to admit I am not the greatest developer in the world, I am learning on the fly as problems arise. This one came up late last week and I could find no solutions on line.

                       

                      This line would not work for us because of our need for two click events.  One for the exit, and one to show/hide the disclaimer.

                      <div id="$ANIM_CONTAINER_ID" onclick="window.open(window.clickTag)" style="background-color:$BG; width:$WTpx; height:$HTpx; cursor:pointer;">

                       

                      I do like putting the cursor:pointer there tho, I am going to incorporate that.

                       

                      Can you think of a simple way, similar to the one you did above that will allow for two click events? I have not found a way for the click to target a specific element in the canvas object from the HTML.  I had thought about a getter and setter but that also seemed over complicated.

                       

                      Thank you for your previous reply and taking the time to help me. I am going to spend some time comparing my code to yours and see where i can make improvements.

                      cheers