Jump to content
GreenSock

loughrank

GDN + GSAP, HTML5

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

Hi Community,

 

1st question:

I was wondering if GSAP was "allowed" to be used, via CDN, with Google Ads.  The specs for these ads can be found here:

https://support.google.com/adwordspolicy/answer/176108?

 

These specs state that no external files may be used at all, however, other ad specs say the same thing and do allow GSAP to be loaded via CDN (because it's totally worth it).  

 

2nd question:

If it's not acceptable to load these via CDN, I would explore loading them locally.  However, the file size from the "Download" links vary drastically between CDN and .zip.  For example, the file "TweenLite.min.js" is 27kb when I download the .zip, but when I use the "Customize" option (CDN), the site claims that this file is only 9kb.  

 

I've been using some form of TweenMax/TweenLite for about 10 years - hoping I can continue to use it for 10 more :)

Link to comment
Share on other sites

Hi loughrank,

 

Welcome to the GreenSock forums, and thanks for posting your question.

 

I have heard directly from folks at Google / DoubleClick that the best way to use GSAP in AdWords / GDN ads is to reference it locally. At this time it is my understanding that they will not allow files being loaded from third-party CDNs.

 

Regarding the filesize TweenLite.min.js is 9kb when it is gzipped. This means that your browser downloads 9kb from the CDN and then extracts it to 26kb once it has been downloaded. Please view the network panel in Chrome to verify this:

 

b1IxhUC.png

 

If you upload TweenLite.min.js with your ad I suspect you will get similar results.

 

FWIW You can get all of TweenMax for 34kb uncompressed, so even in a worst case scenario, it should still be workable inside the 150kb limit.

As a side note, we are confident things on the AdWords side will get better pretty soon.

  • Like 1
Link to comment
Share on other sites

It is the general concensus that GSAP in many of Google's ad platforms are allowed. Google itself even recommend using GSAP as pointed out somewhere in this forums.

 

I have ads served via AdWords that make use of GSAP via CDN, there should be no reason why you should not. Let me go back on that, just went and checked the files I was thinking of and it is not linking to GreenSock via CDN. So, Carl's right and I was horribly wrong by saying thinkgs without checking their veracity first.

 

The crux of the question is the difference between external files  and files hosted in CDN. Meaning, there seems to be a disticntion between them and certain libraries in certain CDNs are whitelisted.

 

/* Carl, trigger happy on the keyboard as always  - I shall learn to touch type because of you */

Edited by Dipscom
  • Like 1
Link to comment
Share on other sites

In the DC Hangout last week, one advantage of Goggle Web Designer, AKA GWD, is it shows you your compressed weight, while you are developing your ad. They definitely said it is the zipped weight that counts.

 

I wish they had transcripts. What do the hearing impaired do?

 

Edited to add, 22 of my 55 ads were linked to the Adobe Edge CDN as https, have not heard anything from AdOps, so I don't think it will be an issue, at least not as far as SSL compliance.

Link to comment
Share on other sites

Hey Dipscom,

 

Thanks for your input and correction. Don't worry at all about the mistake.

It's all very helpful. 

 

I've been recently assured that AdWords policies linked above are correct and that if anyone has any problems getting GSAP to work while referencing it locally they should certainly use the contact form here: https://support.google.com/adwords/contact/approvals?amp;utm_source=policyhc&utm_medium=contact_approvals&utm_campaign=176108&vid=1-635778396727994664-2165703149

 

There is a real person that reads those things and they are very interested in making sure things are working properly and that your issues are addressed.

  • Like 1
Link to comment
Share on other sites

Thanks everyone for the replies!  I've gone ahead with a local implementation of TweenLite.min.js, EasePack.min.js and CSSPlugin.min.js.  It's about 71kb all together, but if it's truly the .zip that counts in the end, then it's totally worth it.  

Link to comment
Share on other sites

They specifically state you cannot use minified JS files. How would this work then? I've been using greensock from the CDN and haven't had any issues with the DCM. What am I missing here?

 

 

Hi loughrank,

 

Welcome to the GreenSock forums, and thanks for posting your question.

 

I have heard directly from folks at Google / DoubleClick that the best way to use GSAP in AdWords / GDN ads is to reference it locally. At this time it is my understanding that they will not allow files being loaded from third-party CDNs.

 

Regarding the filesize TweenLite.min.js is 9kb when it is gzipped. This means that your browser downloads 9kb from the CDN and then extracts it to 26kb once it has been downloaded. Please view the network panel in Chrome to verify this:

 

b1IxhUC.png

 

If you upload TweenLite.min.js with your ad I suspect you will get similar results.

 

FWIW You can get all of TweenMax for 34kb uncompressed, so even in a worst case scenario, it should still be workable inside the 150kb limit.

As a side note, we are confident things on the AdWords side will get better pretty soon.

Link to comment
Share on other sites

Hi S4ct,

 

I suspect there is a discrepancy between what is stated about what you can do and what you can get away with.

Can you provide a link to the claim about no minified files? It might help to have some context.

 

I haven't heard anything about TweenMax being rejected because it was minified.

 

I can see how it makes sense that custom code that you (the developer writes) should be human readable so that they can easily spot any malicious stuff. 

Link to comment
Share on other sites

https://support.google.com/richmedia/answer/2672512?hl=en

 

  • JavaScript file
    • JavaScript files require a .js extension, not .min.js. If you minify JavaScript files, you can't add tracking easily. If the client requests minifying, add tracking first and minify the .js file later.
    • jQuery is not recommended for HTML5 ads for these reasons:
      • Degraded performance on mobile devices because of reliance on time-based animations.
      • Unnecessary file weight: the majority of the library's functionality isn't required.
      As an alternative, you can use zepto.js.
Link to comment
Share on other sites

Thanks, Ohem.

 

Seems they are saying the javascript files where tracking code and clickTags goes should not be minified. Makes sense as people need to read that code. 

 

I believe they are recommending zepto as it is a decent alternative to jQuery for a selector engine, DOM manipulation and other conveniences. 

 

I totally agree that it would help if they clarified these things and documented exactly how GSAP / TweenMax should be used. 

 

If anyone has been denied usage of TweenMax.min.js with their ads, please let us know, we'll do what we can to help get it sorted out. We've hadnothing short of of excellent assistance from DoubleClick.

  • Like 1
Link to comment
Share on other sites

Also, keep in mind that Adwords has different policies than DoubleClick Rich Media.

 

The original poster asked about adwords and Ohem's link was to DoubleClick.

 

 

It gets very confusing;)

  • Like 1
Link to comment
Share on other sites

I think I had issues when I was uploading to DCM, so I switched to a CDN and it was ok. 

 

Thanks, Ohem.

 

Seems they are saying the javascript files where tracking code and clickTags goes should not be minified. Makes sense as people need to read that code. 

 

I believe they are recommending zepto as it is a decent alternative to jQuery for a selector engine, DOM manipulation and other conveniences. 

 

I totally agree that it would help if they clarified these things and documented exactly how GSAP / TweenMax should be used. 

 

If anyone has been denied usage of TweenMax.min.js with their ads, please let us know, we'll do what we can to help get it sorted out. We've hadnothing short of of excellent assistance from DoubleClick.

Link to comment
Share on other sites

 

https://support.google.com/richmedia/answer/2672512?hl=en

 

  • JavaScript file
    • JavaScript files require a .js extension, not .min.js. If you minify JavaScript files, you can't add tracking easily. If the client requests minifying, add tracking first and minify the .js file later.
    • jQuery is not recommended for HTML5 ads for these reasons:
      • Degraded performance on mobile devices because of reliance on time-based animations.
      • Unnecessary file weight: the majority of the library's functionality isn't required.
      As an alternative, you can use zepto.js.

 

 

 

The thing about not minifying is actually just a really bad explanation of what is allowed. Obviously if you are using a library, like GSAP or Zepto, you'd go for the minified version to keep weight down. The issue is, their validation system which checks what files are being uploaded simply doesn't like .min.js files and needs a .js file. 

 

So you could just rename TweenMax.min.js to TweenMax.js as a work-around.

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

Thanks everyone for the replies!  I've gone ahead with a local implementation of TweenLite.min.js, EasePack.min.js and CSSPlugin.min.js.  It's about 71kb all together, but if it's truly the .zip that counts in the end, then it's totally worth it.  

I was just wondering if you could post your working files using codepen. I've run into a problem with file size using TweenMax, but for some reason when I try switching to TweenLite, my ads don't play properly. I haven't been able to find a good reference as to what the problem is. Thanks!

Link to comment
Share on other sites

TweenMax contains CSSPlugin which is a necessary component. If you remove TweenMax, you must load CSSPlugin separately.

 

In most cases you will get the best help if you share your files (zipped and attached) and  whoever is available can look at them. 

 

You should also open the javascript console and see if there are any errors. 

Link to comment
Share on other sites

So you could just rename TweenMax.min.js to TweenMax.js as a work-around.

I agree. Who even invent that .min before .js. Minified JS is JS without spaces.

Link to comment
Share on other sites

FYI - I dislike using adword.

 

Tech issues I came across for Google Adwords

1) ALL assets need to be local – no external CDN network calls
2) Data URIs can't be used in css, meaning no base64 encoded assets. Google adwords does not support this. Not sure why. (see example below);

#someElement {
background:
url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
}

3) Adwords does not support masking as implemented in Firefox. See link below but adwords could not find the class #localstyle below on a svg object. (both embedded or in the root directory). Masking for webkit browsers seems to work however.

<style>.stylename { mask: url(#localstyle); }</style>

https://developer.mozilla.org/en-US/docs/Applying_SVG_effects_to_HTML_content
 

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.
×