-
1. Re: How to make an ad for AdWords in Animate CC
2 people found this helpfulAdobe Animate HTML5 banner ad for Google AdWords
1. Uncheck Combine into spritesheets in Publish Settings because JSON file which will be created is not allowed.
2. Uncheck Hosted Libraries in Publish Settings in Advance tab because CreateJS library must be included in ZIP (Zipped in ZIP is only 48 KB).
If you need more space you can reference two libs and include other two libs3. Include banner ad format size meta tag within the <head></head> tag in your index.html file.
For example: <meta name="ad.size" content="width=300,height=250">
4. HTML5 banner ad for Google AdWords is, by default, clickable on the entire area of the banner ad.
You do not need to include any clickTag code.
5. ZIP file (Adobe Animate HTML5 banner ad) must be 150 KB or smaller.
6. Check Adobe Animate HTML5 banner ad (ZIP file) for Google AdWords: https://h5validator.appspot.com/adwords
-
2. Re: How to make an ad for AdWords in Animate CC
1 person found this helpfulUPDATE !!!
Adobe Animate HTML5 banner ad for Google AdWords
1. Uncheck Combine into spritesheets in Publish Settings because JSON file which will be created for spritesheets is not allowed.
2. In the <head> tag of your published index.html file replace default CreateJS library
https://code.createjs.com/createjs-2015.11.26.min.js with Google hosted CreateJS library
3. Include banner ad format size meta tag within the <head> tag in your index.html file.
For example: <meta name="ad.size" content="width=300,height=250">
4. clickTag code:
Option 1:
HTML5 ads are, by default, clickable on the entire area of the ad.
Option 2:
If you wish to limit the clickable area to specific elements, you will need to include the exitapi.js script.
To use exitapi.js, include the following script in your HTML <head> tag:
<script src="https://tpc.googlesyndication.com/pagead/gadgets/html5/api/exitapi.js"></script>
In Animate create transparent button and give the name of instance e.g. cta
Then, open Actions and place code:
this.cta.on("click", function() {
ExitApi.exit();
});
5. ZIP file (Adobe Animate HTML5 banner ad) must be 150 KB or smaller.
6. Check Adobe Animate HTML5 banner ad (ZIP file) in Google AdWords validator: AdWords | HTML5 Validator
https://h5validator.appspot.com/adwords
DOWNLOAD GOOGLE ADWORDS BANNER AD ADOBE ANIMATE TEMPLATES (without exit and with exit):
DOWNLOAD GOOGLE DOUBLECLICK BANNER AD ADOBE ANIMATE TEMPLATE:
-
3. Re: How to make an ad for AdWords in Animate CC
Can you or someone please explain what this means?
2. In the <head> tag of your published index.html file replace default CreateJS library
https://code.createjs.com/createjs-2015.11.26.min.js with Google hosted CreateJS library
I can't figure out what I need to replace with what. Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="$VERSION">
<title>$TITLE</title>
<meta name="ad.size" content="width=300,height=250">
$CENTER_STYLE
$CREATEJS_LIBRARY_SCRIPTS
$ANIMATE_CC_SCRIPTS
$SCRIPT_START
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("$CANVAS_ID");
$CREATE_LOADER
$LOAD_MANIFEST
}
$HANDLE_FILE_LOAD_START
$HANDLE_FILE_LOAD_BODY
$HANDLE_FILE_LOAD_END
$HANDLE_COMPLETE_START
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
$CREATE_STAGE
//Registers the "tick" event listener.
$START_ANIMATION
//Code to support hidpi screens and responsive scaling.
$RESP_HIDPI
$HANDLE_COMPLETE_END
$PLAYSOUND
$SCRIPT_END
<!-- write your code here -->
</head>
<body onload="init();" style="margin:0px;">
<canvas id="$CANVAS_ID" width="$WT" height="$HT" style="display: $CANVAS_DISP; background-color:$BG"></canvas>
$PRELOADER_DIV
</body>
</html>
Thanks in advance!
-
4. Re: How to make an ad for AdWords in Animate CC
1 person found this helpfulIt's great that you're utilizing templates. Simply replace
$CREATEJS_LIBRARY_SCRIPTS
with
<script src="https://s0.2mdn.net/ads/studio/cached_libs/createjs_2015.11.26_54e1c3722102182bb133912ad44 42e19_min.js"></script>
-
5. Re: How to make an ad for AdWords in Animate CC
Thank you just.emma! One more question - my image files are too big once published. I end up with a zip file of 184KB. Do you have any suggestions on how to reduce this?
-
6. Re: How to make an ad for AdWords in Animate CC
1 person found this helpfulPersonally, I like to use TinyPNG to optimize my images.
You can swap out your published images with optimized versions; just be sure that the file name and dimensions are the same as your original files.
Also, be sure to go to Publish Settings and uncheck "Export Image Assets" so as not to overwrite your optimized images if you go back and make changes in Animate.
-
7. Re: How to make an ad for AdWords in Animate CC
Thank you so much, I really appreciate it! Spent the whole day making one ad haha so hopefully the next ones will be faster
-
-
10. Re: How to make an ad for AdWords in Animate CC
Great resource! These templates will be helpful for a lot of people.
-
11. Re: How to make an ad for AdWords in Animate CC
upload error --
Your HTML5 ad is trying to reference an asset that we can not find in your .ZIP file: temp.js?1467846319330. Make sure you have included all of your assets in the .ZIP file and that all file references do not have any typos. Once you have made the changes, try again.
add code....
<meta name="ad.size" content="width=300,height=250"> & uncheck Hosted Libraries
-
12. Re: How to make an ad for AdWords in Animate CC
I dont know which templates are you using? There are templates for two different version 2015.1 and 2015.2. That screenshot is from older 2015.1. version.
-
13. Re: How to make an ad for AdWords in Animate CC
can you send me simple video tutorial demo link. for publish setting & replace code
-
14. Re: How to make an ad for AdWords in Animate CC
Post from Jun 4, 2016 2:24 AM is for that 2015.1 version. Open, create, publish.
-
15. Re: How to make an ad for AdWords in Animate CC
It looks like you are having issues due to the cache-busting variable that's generated when you preview a HTML5 Canvas document from Animate (by pressing Command + Enter on a Mac, or Control + Enter on a PC).
If you actually publish your banner, the question mark and those numbers will not appear in your HTML file.
To publish from Animate, just go to File > Publish.
-
16. Re: How to make an ad for AdWords in Animate CC
Done thanx...install 15.2... publish files & edit the code <meta name="ad.size" content="width=300,height=250">
but how to add clicktag adword / double click publisher ....
-
17. Re: How to make an ad for AdWords in Animate CC
Open and publish my templates and you will see what is changed in html.
-
18. Re: How to make an ad for AdWords in Animate CC
Adobe Animate 15.2 HTML5 banner ad for Google AdWords
1. Include banner ad format size meta tag within the <head> tag in your index.html file.
For example: <meta name="ad.size" content="width=300,height=250">
2. In the <head> tag of your published index.html file replace default CreateJS library
https://code.createjs.com/createjs-2015.11.26.min.js with Google hosted CreateJS library
3. clickTag code:
Option 1:
HTML5 ads are, by default, clickable on the entire area of the ad - you dont need to do anything.
Option 2:
If you wish to limit the clickable area to specific elements, you will need to include the exitapi.js script.
To use exitapi.js, include the following script in your HTML <head> tag:
<script src="https://tpc.googlesyndication.com/pagead/gadgets/html5/api/exitapi.js"></script>
In Animate create transparent button and give the name of instance e.g. cta
Then, open Actions and place code:
this.cta.on("click", function() {
ExitApi.exit();
});
4. ZIP all files without FLA file (HTML, JS, JPG, PNG)
5. ZIP file (Adobe Animate HTML5 banner ad) must be 150 KB or smaller.
6. Check Adobe Animate HTML5 banner ad (ZIP file) in Google AdWords validator: https://h5validator.appspot.com/adwords
-
19. Re: How to make an ad for AdWords in Animate CC
thanx but i upload your Adobe Animate CC Google AdWords Exit Banner Ad Template files i got error
-
20. Re: How to make an ad for AdWords in Animate CC
Dont publish with that name, that name it is only for long description purpose, it is not allowed space in filename of html. Open FLA and save with custom name with html standard e.g. banner_1
-
-
22. Re: How to make an ad for AdWords in Animate CC
1 person found this helpfulHTML standard dont allow space in filename !!! banner_test or banner-test or bannertest not banner test !!!
-
24. Re: How to make an ad for AdWords in Animate CC
2. In the resulting folder, make sure that each file uses only supported caracters: letters and numbers. If some file names contain unsopported characters (dashes, punctuation, and spaces), rename them. If you have subfolders in your .ZIP file, make sure to open and inspect those files, too.)
-
25. Re: How to make an ad for AdWords in Animate CC
You can download updated templates from the same link. They have update for bug of Animate 15.2 which dont allow preview in IE9 and IE10. if ("onpropertychange" in document && !!window.matchMedia) { window.devicePixelRatio = window.devicePixelRatio || 1; } if ("onpropertychange" in document && !!window.innerWidth) { window.devicePixelRatio = window.devicePixelRatio || 1; }
-
26. Re: How to make an ad for AdWords in Animate CC
Hi frist of all thank you for your template it's really helpful , but my equation here is how can meta tag come automation in html code cuz
when i make publish from your template and open the html i found it comes automation so i don't need to add it again but when i create a new file in adobe animate as html and puplish i should to open the html every time and add the meta tag .
-
27. Re: How to make an ad for AdWords in Animate CC
In Publish Settings, you can export HTML templates and import them into new files. Once you import a custom template, it will keep your HTML customizations (including the meta tags) whenever you publish that file.
Take a look at this blog post for a comprehensive overview: Using Animate CC HTML5 Canvas Templates with Multiple Publish Profiles | Adobe Animate Team Blog
-
28. Re: How to make an ad for AdWords in Animate CC
Hi, I'm almost there so I can export to adwords.
But I get this error. When I test it, the add functions and I can click on the creative and get a succesfull clickthrough.
I checked the URL reference and it is the same. Can anyone help me?
-
29. Re: How to make an ad for AdWords in Animate CC
You need to publish your files from Animate CC instead of just previewing them. Publishing will remove the cache-busting variable appended to the JS file name.
Publish it, and then re-zip it.
-
30. Re: How to make an ad for AdWords in Animate CC
Hi, but unfortunately doesn´t work in Mozilla Firefox, any suggestions? Shows white screen and errors in console:
TypeError: cjs.Bitmap is not a constructor
TypeError: createjs.LoadQueue is not a constructor
-
-
32. Re: How to make an ad for AdWords in Animate CC
Follwed instructions added meta tag and .js http reference
AdWords | HTML5 Validator validator all fine.
But when i press the Preview button on this page no preview appears, but when I click where it should be previewed I get
"Your click was successful and should track correctly"Is there a reason why the preview is not appearing but still 'there' ?
Save
-
33. Re: How to make an ad for AdWords in Animate CC
Are you using an ad blocker?
If that's not the issue, please share your file so we can help troubleshoot.
-
34. Re: How to make an ad for AdWords in Animate CC
Hello,
No ad blocker
I'll send you my zip file before and after I add the code in a message. I need to send these of thismorning AUS time. So it would be a great help if you can have a look. Many thanks
-
35. Re: How to make an ad for AdWords in Animate CC
Hi, I looked at your files and the issue is that you're only linking to the DoubleClick CDN for TweenJS, when you actually need to include the entire CreateJS suite for your banner to work.
-
36. Re: How to make an ad for AdWords in Animate CC
That worked great! thank you.
I have watched many tutorials and most don't mention the difference and copy and paste the first one from the list on: Image ads - Advertising Policies Help
unless you read the file type name you notice it's different.
Thanks again
-
37. Re: How to make an ad for AdWords in Animate CC
Hi I am having the same problem, yet, I added the CreateJS min link to my html file and it is still not working. I have the spritesheet option in publish settings turned off and still see a white screen after publishing. Any ideas?
-
38. Re: How to make an ad for AdWords in Animate CC
It's impossible to troubleshoot without seeing your actual files.
-
39. Re: How to make an ad for AdWords in Animate CC
1 person found this helpfulThanks for sending your files in a private message. The issue is that you were using an old/outdated publishing template with the newest version of Animate CC 2017.
If you replace the template with this updated version that I just set up, that should fix things.
To import the new template, simply go to Publish Settings > Advanced > Import New.
