Creating a clickTag in Adobe Animate

[Zach Prichard]

Hey everyone. This seems to be a monumentally PIA that has been asked a bunch over the years, but I can't seem to get a straight answer. 

How do I add a clickTag to a single button in Adobe Animate? This button/layer is a graphic from an imported Adobe Illustrator stage.

I've seen the option to go in and edit the HTML manually after the fact but that seems to wrap the entire creative in a clickTag. I just want the button to accurately have a clickTag on it. 

[Mario_CR]

Instead of a graphic, make it a button and add the clicktag with the Actions wizard

(you may need to edit this in the HTML later if you want to make it Google compliant). 

https://www.youtube.com/watch?v=pjajID8WvbI

[Zach Prichard]

Yeah unfortunately that's not a "clickTag" setting as defined by Google. clickTags let you edit the variable after the fact via Google Ad Manager 360 - this method does not do that. 

It might just not be possible in Animate natively as it's just an HTML file encapsulating a JS file. So manually editing it (or at least making a publishing template) might be the only way.

[Mario_CR]

Yes, you need to manually edit the html and add a clicktag variable after the fact per Google's HTML5 guidelines:

https://support.google.com/admanager/answer/7046799?hl=en#clicktag

But the point is that with this method (and by adding the clicktag variable), the click area of the creative is limited to the button's dimensions.

[Zach Prichard]

It's not though. Because using the manually edit method does *not* allow you to define the clickTag to just the button when exporting from Animate.

You may say "yes, it does - look at Google's example. The 'a href' points to the button as the clickTag source!"

But, alas, no! Because the HTML file coming from Animate only points to the .JS file, you can not actually point the "a href" to an individual element *within* that JavaScript file. The best you can do  is wrap the whole creative in the clickTag. Which, technically works... it's just not ideal execution.

[joejoe_jack]

No wonder, this has been troubling you. Why would you be creating an anchor tag that links to a button on the canvas?
Create the button and use the code snippet, the one that says "Click to go to Web Page", and put "clickTag" in there.
And make sure to declare the clickTag variable in the head like the Google example or better yet declare it in Global Scripts.

[Zach Prichard]

Oh that part hasn't really been troubling me. In the sense that modifying the HTML after publishing was only a recent "solution" that I stumbled upon (and that Mario mentioned) and I was just pointing out *why* that doesn't work. I actually haven't been really trying that.

But I think you're leading me on the right path. My first effort from googling hade me do this.

First make the button a button (of course) and name it clickBtn.

Then add the code below to Global Scripts:

var clickTag = "https://www.curi.com"; // Destination URL

clickBtn.addEventListener("click", function() {
    window.open(window.clickTag, "_blank");
});

"clickBtn" on the button refrenced in the code above.

This lets the published ad pass the HTML5 validity check but the button isn't actually doing anything. 

That's where your solution comes in. I had *not* been using the "Click to go to web page" code snippet on the button. I'll do that. However when you say to "put 'clickTag' in there." What does that mean exactly? I can edit code, but not a coder so not sure where that goes exactly.

[Zach Prichard]

Unreal, can you not edit posts? I need to edit out that URL, but there does not appear to be a way to edit or delete posts. 

[joejoe_jack · Accepted solution]

You seem to have it correct there except you may need to move that line, the "clickBtn.addEventListener" one, into the frame where the button exists rather than in the Global Scripts.
Keep the "var clickTag" line in the Global Scripts though.

[Zach Prichard]

Awesome, I'll try that thanks!

[Zach Prichard]

Woo, ok I think this is going to work! Thanks! I have to pass it to the media buyer to actually upload and test to make double sure the URL is injectable va Ad Manager 360, but the code all looks correct now and seems to work. 

Thanks a ton!

[Tom Novella]

Hi Zach, would be great to know if you were successful with this!

[Zach Prichard]

Hey Tom, yup we got it to work. I'm phone posting but in the morning I'll make sure to post exactly what we did.

[Zach Prichard]

Ok so to give a bit more clarity to the final answer:

• In the Actions window - on the "Global>Script" pane you want to define the clickTag variable by putting this code:

var clickTag = "https://www.example.com"; // Destination URL​

• Then:
  • Go to frame 1
  • select the button
    • name the button clickBtn (or it can be whatever, just needs to be reflected in the code below)
    • select "Button" category from the dropdown menu in properties>object (see screenshot below)
  • paste the following code on the button - once you select the button and paste the code in the actions window, it'll automaticallyh add a "Scene 1>button" field in the Actions panel (see screenshot below)

this.clickBtn.addEventListener("click", function() {
window.open(window.clickTag, "_blank");
});

And that should be it! Example images attached