Skip to main content
Participating Frequently
November 5, 2024
Answered

HTML5 Google ads Clicktag not clicking through.

  • November 5, 2024
  • 3 replies
  • 2245 views

I'm creating HTML5 ads for google and although the validator is approving that the Clicktag has been correctly implemented the media buyers feedback is that it doesn't click through. I'm fairly new to creating these ads and at a loss at what the issue is. I've made the ads through Adobe Animate, added a clickable button as a layer and edited the html file to the sbecs as far as i understand. I've attached the html zips. Thank you for any help! 

    Correct answer kglad

    Thank you so much! 

     

    <!DOCTYPE html>
    <!--
    NOTES:
    1. All tokens are represented by '$' sign in the template.
    2. You can write your code only wherever mentioned.
    3. All occurrences of existing tokens will be replaced by their appropriate values.
    4. Blank lines will be removed automatically.
    5. Remove unnecessary comments before creating your template.
    -->
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="authoring-tool" content="Adobe_Animate_CC">
    <title>970x250</title>
    <!-- write your code here -->
    <meta name="ad.size" content="width=970,height=250">
    <script src="970x250.js"></script>
    <script>
    var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
    function init() {
    canvas = document.getElementById("canvas");
    anim_container = document.getElementById("animation_container");
    dom_overlay_container = document.getElementById("dom_overlay_container");
    var comp=AdobeAn.getComposition("EE80705F0A4242A38E80F25510AEC537");
    var lib=comp.getLibrary();
    var loader = new createjs.LoadQueue(false);
    loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
    loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
    var lib=comp.getLibrary();
    loader.loadManifest(lib.properties.manifest);
    }
    function handleFileLoad(evt, comp) {
    var images=comp.getImages();
    if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }
    }
    function handleComplete(evt,comp) {
    //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
    var lib=comp.getLibrary();
    var ss=comp.getSpriteSheet();
    var queue = evt.target;
    var ssMetadata = lib.ssMetadata;
    for(i=0; i<ssMetadata.length; i++) {
    ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
    }
    exportRoot = new lib._970x250();
    stage = new lib.Stage(canvas);
    //Registers the "tick" event listener.
    fnStartAnimation = function() {
    stage.addChild(exportRoot);
    createjs.Ticker.framerate = lib.properties.fps;
    createjs.Ticker.addEventListener("tick", stage);
    }     
    //Code to support hidpi screens and responsive scaling.
    AdobeAn.makeResponsive(false,'both',false,1,[canvas,anim_container,dom_overlay_container]);
    AdobeAn.compositionLoaded(lib.properties.id);
    fnStartAnimation();
    }
    </script>
    <!-- write your code here -->
    </head>
    <script>var clickTag = "http://www.google.com";</script>
    <body onload="init();" style="margin:0px; cursor:pointer;">
    <div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:970px; height:250px">
    <canvas id="canvas" width="970" height="250" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
    <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:970px; height:250px; position: absolute; left: 0px; top: 0px; display: block;">
    </div>
    </div>
    </body>
    </html>

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

     

    should be

     

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

     

    and should be within the head tags.

     

    and you need your clicktag link after the close head and start body tags

     

    ;

    <a href "javascript&colon;void(window.open(clickTag))"></a>

     

    also, are the ad.size dimensions correct?

    3 replies

    New Participant
    February 13, 2025

    I'm facing an issue with an HTML5 creative while uploading it to DV360. I’m getting the error message:

    "Must include click tags in the HTML asset only."

    However, the clickTag is already included in the file.


    Can anyone help me resolve this issue?

    Please reply as soon as possible 

     
    kglad
    Community Expert
    February 13, 2025

    what's your code?

    New Participant
    February 13, 2025
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="authoring-tool" content="Adobe_Animate_CC">
    <!-- change ad size -->
    <title>MOOMBA 2025</title>
        <script type="text/javascript">var clickTag = "https://moomba.melbourne.vic.gov.au/";</script>
    <script src="CoM_1998-Moomba2025-300x250.js"></script>
    <script>
    var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
    function init() {
    canvas = document.getElementById("canvas");
    anim_container = document.getElementById("animation_container");
    dom_overlay_container = document.getElementById("dom_overlay_container");
    var comp=AdobeAn.getComposition("763C1A0199444FCF9E39871909529B7D");
    var lib=comp.getLibrary();
    var loader = new createjs.LoadQueue(false);
    loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
    loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
    var lib=comp.getLibrary();
    loader.loadManifest(lib.properties.manifest);
    }
    function handleFileLoad(evt, comp) {
    var images=comp.getImages();
    if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }
    }
    function handleComplete(evt,comp) {
    //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
    var lib=comp.getLibrary();
    var ss=comp.getSpriteSheet();
    var queue = evt.target;
    var ssMetadata = lib.ssMetadata;
    for(i=0; i<ssMetadata.length; i++) {
    ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
    }
    exportRoot = new lib.CoM_1998Moomba2025300x250();
    stage = new lib.Stage(canvas);
    //Registers the "tick" event listener.
    fnStartAnimation = function() {
    stage.addChild(exportRoot);
    createjs.Ticker.framerate = lib.properties.fps;
    createjs.Ticker.addEventListener("tick", stage);
    }     
    //Code to support hidpi screens and responsive scaling.
    AdobeAn.makeResponsive(false,'both',false,1,[canvas,anim_container,dom_overlay_container]);
    AdobeAn.compositionLoaded(lib.properties.id);
    fnStartAnimation();
    }
    </script>
    <!-- write your code here -->
    </head>
    <body onload="init();" style="margin:0px;">
    <div id="animation_container" style="background-color:rgba(199, 234, 253, 1.00); width:300px; height:250px">
            <a href="javascript&colon;window.open(window.clickTag)"><canvas id="canvas" width="300" height="250" style="position: absolute; display: block; background-color:rgba(199, 234, 253, 1.00);"></canvas></a>
    <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:300px; height:250px; position: absolute; left: 0px; top: 0px; display: block;">
    </div>
    </div>
    </body>
    </html>
    kglad
    Community Expert
    November 5, 2024

    what do you see when you click your link?

    Participating Frequently
    November 5, 2024

    On the link i can view the ad and see that the validator says they are ok. But the actual ads are 'unclickable'  

    kglad
    Community Expert
    November 5, 2024

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

     

    should be

     

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

     

    and should be within the head tags.

     

    and you need your clicktag link after the close head and start body tags

     

    ;

    <a href "javascript&colon;void(window.open(clickTag))"></a>

     

    also, are the ad.size dimensions correct?


    p.s. &colon;  should be a colon   :

    Participating Frequently
    November 5, 2024