Jump to content
Search Community

Google DoubleClick and AdWords host GSAP on their CDN

GreenSock test
Moderator Tag

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

Hmmm...mine codepen...is gone??

Don't know codepen good enough, when i want to save something do i have to fork or save?

 

 

I think i can build an animation,

but now try to test it with google

so i have to set my images to the local link..and link the tweenmax files in my code.

 

 

i've linked the tweenmax with this line in the settings

https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js

 

but i also have sizzle... ( http://s.cdpn.io/16327/sizzle.min.js )

 

i don't exactly know what it is, and i don't see it in the google preference list...

https://support.google.com/richmedia/answer/6307288

 

 

can i put it in the code or maybe i can delete it from the code??

 

See the Pen rxWwej?editors=010 by cartamundi (@cartamundi) on CodePen

(with image-links to a local folder)

 

 

this i a version with the image-links to my dropbox

See the Pen KVgPbd?editors=110 by cartamundi (@cartamundi) on CodePen

 

 

i hope someone can help...so that i can test my next animations in google..

Link to comment
Share on other sites

Hi Cartamundi,

 

I am not sure I understand what you are asking here. I can see you banner and the animations but I fail to grasp what is it that you want help with.

 

One thing I would say, though, is: it would be more beneficial for you if you opened a new thread for critique on you banner if that is what you are after. That way, it makes it easier for people to find stuff in the forums.

 

Regarding "how to make better" I am assuming you mean best practices. Well, I have some personal opinions that I put in writing in codePen, maybe you might agree with me on a thing or two. The link is: http://codepen.io/dipscom/posts/

Link to comment
Share on other sites

Yup, I agree with Dipscom, a new thread would be best.

 

Regarding Sizzle, it is just a lightweight selector engine that can be helpful if you want to select items using css selectors like "h2" or "h2.subhead".. but with all major browsers supporting querySelectorAll() it really isn't necessary. Since you are only using IDs your code will work just fine like

 

var  $panellogo =  document.getElementById("panellogo"),
  $panelShadow =  document.getElementById("panelShadow"),
  $panelhead =  document.getElementById("panelhead"),
  $panelBostonVan =  document.getElementById("panelBostonVan"),
  $panelBostonVoor =  document.getElementById("panelBostonVoor")
 ...

 

or:

var  $panellogo =  document.querySelectorAll("#panellogo"),
  $panelShadow =  document.querySelectorAll("#panelShadow"),
  $panelhead =  document.querySelectorAll("#panelhead"),
  $panelBostonVan =  document.querySelectorAll("#panelBostonVan"),

http://codepen.io/GreenSock/pen/rxWzyr?editors=001

 

You don't need sizzle for your banner. If you have more questions please start a new thread. 

 

Thanks!

Link to comment
Share on other sites

  • 2 months later...
  • 2 weeks later...
Guest howeller

Got an answer. [EDIT:] scroll down and see the good news - AdWords now officially supports GSAP and exempts it from file size calculations using the same CDN URLs as DoubleClick. :)

Is there an official statement somewhere regarding this? I am getting push back from using this CDN because their HTML validator flags the use of external libraries. Even their own. I wanted to send our team something that to show that they do in fact accept these.

Thanks!

Link to comment
Share on other sites

Is there an official statement somewhere regarding this? I am getting push back from using this CDN because their HTML validator flags the use of external libraries. Even their own. I wanted to send our team something that to show that they do in fact accept these.

Thanks!

They officially support it:  https://support.google.com/adwordspolicy/answer/176108?hl=en

 

All other HTML5 ads

Upload requirements

 

All code and assets must be referenced using a relative path to resources included in the .ZIP file. No external references are allowed except references to:

  • Like 1
Link to comment
Share on other sites

 

They officially support it:  https://support.google.com/adwordspolicy/answer/176108?hl=en

 

All other HTML5 ads

Upload requirements

 

All code and assets must be referenced using a relative path to resources included in the .ZIP file. No external references are allowed except references to:

 

 

I've found that this is only true in the US and the UK, and some parts of Europe. I don't believe this was a full rollout across all regions, as I've been provided with similar looking docs pages that doesn't have the GSAP or CreateJS links.

 

It will probably take some time before all regions are updated with the new validation code.

Link to comment
Share on other sites

Im following this thread with great interest. So many options, but i really need the most basic one and that is support for the cheapest option namely the Adwords Display Network. So no DoubleClick or other more advanced tools with more CDN options

 

Im trying to use the new Adobe Animate CC 2015 as my main production tool, for it allows me to easily convert to canvas, and as an old school flash user its just feels at ease especially with Going Greensock of course. From this page i found them; https://support.google.com/richmedia/answer/6307288?hl=en

 

Im trying to use two following CDN sources;

1. https://s0.2mdn.net/ads/studio/cached_libs/createjs_2015.11.26_54e1c3722102182bb133912ad4442e19_min.js

 
Such a pity 1. does NOT work, so no use of Animate CC 2015 as a tool. I can include easeJS.js, however its library alone is 191Kb too much for the 150kB Adwords limit.
 
However now the good news, the Greensock CDN IS supported, i have an animation running!!!
 
Hope this helps others who build specifically for the Google Adwords Display Network.
 
If anyone else did get it working to include the easeJS.js library from a CDN i would love to hear.
Hope any one can make a successful CDN link to easeJS.js in Google Adwords Display Network
(Not double-click or other advanced tools)
 
Regards Hans
  • Like 1
Link to comment
Share on other sites

 

Im following this thread with great interest. So many options, but i really need the most basic one and that is support for the cheapest option namely the Adwords Display Network. So no DoubleClick or other more advanced tools with more CDN options

 

Im trying to use the new Adobe Animate CC 2015 as my main production tool, for it allows me to easily convert to canvas, and as an old school flash user its just feels at ease especially with Going Greensock of course. From this page i found them; https://support.google.com/richmedia/answer/6307288?hl=en

 

Im trying to use two following CDN sources;

1. https://s0.2mdn.net/ads/studio/cached_libs/createjs_2015.11.26_54e1c3722102182bb133912ad4442e19_min.js

 
Such a pity 1. does NOT work, so no use of Animate CC 2015 as a tool. I can include easeJS.js, however its library alone is 191Kb too much for the 150kB Adwords limit.
 
However now the good news, the Greensock CDN IS supported, i have an animation running!!!
 
Hope this helps others who build specifically for the Google Adwords Display Network.
 
If anyone else did get it working to include the easeJS.js library from a CDN i would love to hear.
Hope any one can make a successful CDN link to easeJS.js in Google Adwords Display Network
(Not double-click or other advanced tools)
 
Regards Hans

 

The 150k limit is for the zipped file size; the entire minified CreateJS library is 50k zipped, so even without the CDN it is still useable if the rest of your zipped assets are under 100k.

  • Like 1
Link to comment
Share on other sites

I've found that this is only true in the US and the UK, and some parts of Europe. I don't believe this was a full rollout across all regions, as I've been provided with similar looking docs pages that doesn't have the GSAP or CreateJS links.

 

It will probably take some time before all regions are updated with the new validation code.

 

Informations on english language are official for whole world. All other pages on other languages are not updated always on time.

Link to comment
Share on other sites

Not true, it does work, but you must include other two libraries, 15kb zipped

Link to comment
Share on other sites

Just to give an update on my specific Google Adwords Display network tries in finding a nice and easy production tool

1. Google Web Designer uses its own JS: several JS files but in total together when zipped barely 18Kb, the lowest and winner

2. Adobe Edge includes its own JS: edge.6.0.0.min.zip is 34 KB

3. Adobe Animate CC 2015 uses CreateJS: createjs-2015.11.26.min.zip is 49KB

 

All three of the above are able to work together with the CDN version of GreenSock GSAP. GWD gives the most headroom for the includes of your graphics. I used it successfully and quite easy. There is support for actions and loops, labels in timeline with added bonus to have TappAreas that are supported by Adwords Display Network. As always my remark only amount to Google Adwords and not more advances networks as DoubleClick etc. I did not get that 15KB that Web Dizajner could achieve.

  • Like 1
Link to comment
Share on other sites

Wanted to ask a technical question of where is the best place to link to GSAP in your HTML?

 

I downloaded the starter HTML5 file for a 300x250 animated banner to do some experimentation on.

 

I guess it makes the most sense to put it here?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta data-template-name="Template_H5T_inpage-300x250-image">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
  
</head>
<body>
    <div id="main-container">
      <div id="exit"></div>
      <div class="feature" id="feature">
      <div id="main-img-0"></div>
      </div>
    </div>

  <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/timelinelite_1.18.0_dbe88c20554c170a56f44600f31a97d9_min.js"></script>
  <script src="logic.js"></script>
</body>
</html>
Link to comment
Share on other sites

 

Wanted to ask a technical question of where is the best place to link to GSAP in your HTML?

 

I downloaded the starter HTML5 file for a 300x250 animated banner to do some experimentation on.

 

I guess it makes the most sense to put it here?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta data-template-name="Template_H5T_inpage-300x250-image">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
  
</head>
<body>
    <div id="main-container">
      <div id="exit"></div>
      <div class="feature" id="feature">
      <div id="main-img-0"></div>
      </div>
    </div>

  <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/timelinelite_1.18.0_dbe88c20554c170a56f44600f31a97d9_min.js"></script>
  <script src="logic.js"></script>
</body>
</html>

Yeah but if you're using TimelineLite you're also going to want to include these:

    <script src="https://s0.2mdn.net/ads/studio/cached_libs/cssplugin_1.18.0_71489205621d46cbe88348eeb8fe493f_min.js"></script>
    <script src="https://s0.2mdn.net/ads/studio/cached_libs/easepack_1.18.0_ed5816e732515f56d96a67f6a2a15ccb_min.js"></script>
    <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenlite_1.18.0_56fa823cfbbef1c2f4d4346f0f0e6c3c_min.js"></script>
    <script src="https://s0.2mdn.net/ads/studio/cached_libs/timelinelite_1.18.0_dbe88c20554c170a56f44600f31a97d9_min.js"></script>

But since the file size of CDN-hosted libraries isn't counted against your banner, it might make more sense just to use TweenMax which has everything in one.

<script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js></script>

https://greensock.com/tweenmax

  • Like 1
Link to comment
Share on other sites

  • 3 months later...

Few newb questions here I need help ironing out.

 

 

I am currently using the following links to reference greensock and js:

 

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>

 
 
I am currently preparing my banners Doubleclick, so as I understand it I need to replace these links with the Hosts URLS found here: https://support.google.com/richmedia/answer/6307288
 
I can replace the TweenMax successfully but there doesn't seem to be a Jquery URL that works? What would I do in this situation to replace:
 

 

Or will it just work like that, and do I even need to change the links from the original 'cdnjs.cloudfare.com...' links?

Link to comment
Share on other sites

Few newb questions here I need help ironing out.

 

 

I am currently using the following links to reference greensock and js:

 

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>

 
 
I am currently preparing my banners Doubleclick, so as I understand it I need to replace these links with the Hosts URLS found here: https://support.google.com/richmedia/answer/6307288
 
I can replace the TweenMax successfully but there doesn't seem to be a Jquery URL that works? What would I do in this situation to replace:
 

 

Or will it just work like that, and do I even need to change the links from the original 'cdnjs.cloudfare.com...' links?

 

I would think you could use the Google-hosted Jquery

3.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
2.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
1.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

I've never used JQuery in a banner, so I can't be 100% sure.  You can always use this validator to check your files though: https://h5validator.appspot.com/dcm

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

Pretty sure DC advise against using jQuery in banners: https://support.google.com/richmedia/answer/6098183?hl=en-GB

 

 

 

  • jQuery is not recommended for HTML5 ads because of the unnecessary file weight: the majority of the library's functionality isn't required. As an alternative, you can use zepto.js

 

https://support.google.com/richmedia/answer/6261897?hl=en#js

 

 

Don’t use jQuery

jQuery adds unnecessary file size (~75k) even though the majority of the jQuery library is not used. Instead,convert from jQuery to pure JavaScript, use a minimalist library like Zepto.js, or consider GreenSock's TweenLite.

 

 

The validators aren't a 100% and it will always depend on which network on DC your banners are doing to AdWords/GDN/DCM/YouTube all have different rules.

  • Like 2
Link to comment
Share on other sites

Pretty sure DC advise against using jQuery in banners: https://support.google.com/richmedia/answer/6098183?hl=en-GB

 

 

https://support.google.com/richmedia/answer/6261897?hl=en#js

 

 

 

The validators aren't a 100% and it will always depend on which network on DC your banners are doing to AdWords/GDN/DCM/YouTube all have different rules.

 

 

That's interesting.  For Adwords, they list (Google-hosted) Jquery as one of the few external references that's allowed: https://support.google.com/adwordspolicy/answer/176108#otherhtml5

  • Like 1
Link to comment
Share on other sites

Since all ID is present in the DOM as global reference, the elements are easily accessible. If You are using GSAP to animate these elements, there is no reason to use JQuery in a banner ad, in my opinion. It is more suitable for a responsive website or a GUI. Despite that fact JQuery is hosted on google CDN, the loading millisecs and the request time is wasted.

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

I am trying to use the google hosted version of TweenMax, but I get a "ReferenceError: TimelineLite is not defined"

 

<script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.5_23b0de6da0ee295131e32a500470610c_min.js"></script>

 

Same thing with just loading the cached TimelineLite.

 

What am I doing wrong?

 

 

You need to wait for GSAP to be download and loaded by the browser.

 

Something like:

document.addEventListener("DOMContentLoaded", function(event) { 
  //Now run your animation.
});
  • Like 2
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.
×
×
  • Create New...