Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kuba sanitrak_10501

html5 ads using GSAP rejected by Google AdWords

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello Everyone,

Please help me with advice / best practice for html5 ad development. I have been trying to find some "summ-up post" showing "what goes where", but could not find any, I appologize.

My trouble:

I convinced the client to move from swf to html5 banners, followed Chris Gannon's example and developed html5 ads for Google AdWords.

When uploading the ads data, client got the error: "Uploaded ad includes html5 code we can not approve: script. Please …"

The error call is not very helpful for me, I don't see clearly where to fix this. 

I am using svg file, hosted image, GSAP TweenMax,

I followed google image ads guidelines, wrapped svg in html file, then put svg, minified TweenMax.js and html file in *.zip

 

Here is code I use for html wrapper:

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="ad.size" content="width=300,height=250">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">

		<title>IDSYS</title>
		
		<style>
			.banner {position: relative}
			.banner300x250{width: 300px; height: 250px}
			.banner120x600 {width: 120px; height: 600px}
			.banner160x600 {width: 160px; height: 600px}
			.banner728x90 {width: 728px; height: 90px}
		</style>
	</head>
	<body>
		<object type="image/svg+xml" data="IDSYS_a300x250.svg" class="banner banner300x250">
			<!-- <param  id="clickTag" value="www.idsys.cz" /> -->
		</object>
	</body>
</html> 

sample zip with SVG, html and js files attached to this post:

IDSYS_a300x250.zip

 

If anyone could find some time, please help.

Best wishes, 

 

kuba

Link to comment
Share on other sites

From what I've been reading on this forum AdWords is one of the stricter platforms that Google is using. It might be a number of things within the SVG file that they don't like. But you're better of asking AdWords for support on this, or pasting the full error message. What you currently have is a little vague.

Link to comment
Share on other sites

Hi,

 

I have just done a bit of bug hunting for you. The error actually tells you exactly what it does not like: the <script> tag inside your SVG. Once I removed all the <script> tags in there, the ad does upload.

 

I have read Chris Gannon's post but have not taken the time to test it out to see which platforms like it and the ones who don't. Clearly, AdWords is a no-no.

 

So, here is my suggestion:

Get your SVG and have it inline in the HTML, rather than as an <object>.

Put your JavaScript in a separate .js file and reference it from the html <header> normally as well as TweenMax.

 

The attached is your file with the setup I just mentioned. It uploads to AdWords without errors.

 

But the JavaScript is broken - I am sorry but you will have to go over your code and adjust the code to reflect the new setup.

IDSYS_a300x250.zip

  • Like 1
Link to comment
Share on other sites

Excellent, thank you Dipscom. That's good news. Kind of what I was hoping for, means extra work for me but not entirely.

I managed to fix the script and even upload new zip to Google AdWords with no errors.

Waiting for approaval, so far so good.

Thank you very much.

kuba

 

Hi,

 

I have just done a bit of bug hunting for you. The error actually tells you exactly what it does not like: the <script> tag inside your SVG. Once I removed all the <script> tags in there, the ad does upload.

 

I have read Chris Gannon's post but have not taken the time to test it out to see which platforms like it and the ones who don't. Clearly, AdWords is a no-no.

 

So, here is my suggestion:

Get your SVG and have it inline in the HTML, rather than as an <object>.

Put your JavaScript in a separate .js file and reference it from the html <header> normally as well as TweenMax.

 

The attached is your file with the setup I just mentioned. It uploads to AdWords without errors.

 

But the JavaScript is broken - I am sorry but you will have to go over your code and adjust the code to reflect the new setup.

  • Like 1
Link to comment
Share on other sites

I would also be surprised if you don't get dinged for not having a contrasting border. I did not get dinged by DCM for black BG ad that did not have a contrasting border, but AdWords did reject it, because some placements are black BG sites.

 

The other thing that could get you rejected is looping. 15 seconds or 3 times.

  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...

I have found if you have commented out html code it gets rejected, I just had to remove commented out code on one of our banner projects to fix the issue.

  • Like 1
Link to comment
Share on other sites

You should look into setting up a gulp/Grunt task workflow for your files, so you can have something lint all the comments out of your code on a production build while keeping the comments for your own benefit in your source files.

Link to comment
Share on other sites

  • 7 months later...

Hi i have come across this error as well the only solution i found was creating a illustrator file with the exact same size as my ad/banners creating all the frames and the export them in a jpg file with the measurement being exact the file quality is quite decent i also wanted to use a svg to make the quality unbelivibly good Adwords doesn't support a entity inside the svg code and one extra line of code in the svg i tried removing the code but that just caused more errors more that i started with the only solution was making the whole thing jpg and another thing i picked up on is Adwords doesn't support monotype fonts even if you embed it i used hype3 to create my html5 ads if you want to use it as well just make sure after creating the files go in the index file (html file) and just add the meta tag ad.size <meta name="ad.size" content="width=320,height=100"> (in side the head)and just make the height and width to the size of your banner if you ae copying pasting just re enter the " copy pasting is not supported in most html5 editors to prevent paganism

 

hope this helped was struggling for more than a month regards 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×