Jump to content
Search Community

DoubleClick GSAP and Polite Loaders

retropunk test

By retropunk
in GSAP

Moderator Tag
 Share
Go to solution Solved by retropunk,

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

retropunk test

retropunk

Posted
Posted

Hey guys, so I am trying to understand how to politely load the TweenMax library

 

If I load the library in the top of the header, TweenMax works.

If I try to polite load, it breaks.

 

Here is what I am trying but it's failing:

<head>
<script src="http://s0.2mdn.net/ads/studio/Enabler.js" type="text/javascript"></script>	
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<style type="text/css">#container_dc{visibility:hidden;z-index:20}</style>

<script language="javascript">
if (Enabler.isInitialized()) 
{
init();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, init);
}
function init()
{
if(Enabler.isPageLoaded()){
	politeInit();
}else{
	Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit);
} 
}

function politeInit(e)
{		
var gsapJavascript = document.createElement('script');
gsapJavascript.setAttribute('type', 'text/javascript');
gsapJavascript.setAttribute('src', Enabler.getUrl('TweenMax.min.js'));
document.getElementsByTagName('head')[0].appendChild(gsapJavascript);

var extJavascript = document.createElement('script');
extJavascript.setAttribute('type', 'text/javascript');
extJavascript.setAttribute('src', Enabler.getUrl('EVERYDAY_RM_HTML_768x1024.js'));
document.getElementsByTagName('head')[0].appendChild(extJavascript);

var extCSS = document.createElement('link');
extCSS.setAttribute("rel", "stylesheet");
extCSS.setAttribute("type", "text/css");
extCSS.setAttribute("href", Enabler.getUrl("EVERYDAY_RM_HTML_768x1024.css")); 
document.getElementsByTagName("head")[0].appendChild(extCSS);
}
</script>
	    
</head>
Link to comment
Share on other sites
retropunk test

retropunk

Posted
  • Author
Posted

sorry for the messy code, but I wanted to give some context.

 

Just to be clear:

If I comment out lines 24-27 and add GSAP using a normal script tag at the top of the header like the Enabler on Line 2, then any TweenMax calls I make in any JS on the page work great.

 

I don't have much experience with the DoubleClick apis yet, I'm going to email their tech also.

But I was hoping someone here has been using GSAP with their ads too.

 

Thanks for any help

- Patrick

Link to comment
Share on other sites
Jonathan test

Jonathan

Posted
Posted

Hello Patrick.. I am not familiar with Polite Loaders ..

 

But when your testing, if you use Developer Tools in the browser, in Chrome or Firefox. You will be able to see when the page loads, what scripts are loading, and the order they are loading in.

 

I suggest you look and see the order the scripts are loading in, and see if scripts are not being loaded correctly. Then you can narrow down what might be going on when the page loads.

 

If using Firefox:

Firebug addon

How to use Firebug

 

if using Chrome:

How to use Chrome Dev Tools

 

Also a codepen example would help to see the behavior you describe. Hope this helps.. :)

Link to comment
Share on other sites
retropunk test

retropunk

Posted
  • Author
Posted

thanks but it's not that. The script is loading. It's not getting defined in a way that i can get to it normally. 

 

I notice that if I avoid the Enabler and use a simple injection script, then GSAP is defined.

But it seems to not be defined if I use the Enabler.

var loader = document.createElement('script');
loader.src = 'TweenMax.min.js';
document.getElementsByTagName('head')[0].appendChild(loader);

I'll see what Google tech has to say. I don't see too many DoubleClick/Greensock posts here.

I'll post back my solution when I figure it out.

 

Thanks anyways

- Patrick

Link to comment
Share on other sites
retropunk test

retropunk

Posted
  • Author
Posted

yeah I tried that too. No go.

 

Something is weird about the Enabler. The DoubleClick HTML5SDK Docs are very outdated so I am forced to email them when I need something. DoubleClick forums are a ghost town too.

 

I appreciate the effort. I'm gonna take a break and hopefully hear back from DoubleClick sometime soon.

 

I'll report back with my findings.

For now I can avoid loading GSAP with the Enabler. I just stick it at the top and it's fine during development.

 

Thanks again

- Patrick

Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Hey Patrick,

 

Have you double-checked the URL this code is returning?:

gsapJavascript.setAttribute('src', Enabler.getUrl('TweenMax.min.js'));

If you say that GSAP is not defined then is two options. Either the returning URL is wrong or there's a issue with DoubleClick's loading queue. I'm assuming that this loads your code:

var extJavascript = document.createElement('script');
extJavascript.setAttribute('type', 'text/javascript');
extJavascript.setAttribute('src', Enabler.getUrl('EVERYDAY_RM_HTML_768x1024.js'));
document.getElementsByTagName('head')[0].appendChild(extJavascript);

Is there any way to create dependencies in DoubleClick?, like you can do in WordPress or Drupal for example. To be sure that GSAP is completely loaded before your code is.

 

Another option is look if DoubleClick has a synchronous loading feature or a callback in order to tap the code loading after GSAP has been loaded.

 

Rodrigo.

Link to comment
Share on other sites
  • 4 months later...
  • Solution
retropunk test

retropunk

Posted
  • Author
  • Solution
Posted

Hey everyone, I wanted to share the method we landed on concerning the DoubleClick Polite Load.

At the time of writing this, this method works great. DC API's update often so... ;)

 

Once you minify all of your CSS and JS files down to 1 for each you can set up your Polite Load like this

if (Enabler.isInitialized()) 
    {
      init();
    } else {
      Enabler.addEventListener(studio.events.StudioEvent.INIT, init);
    }

    function init()
    {
      if(Enabler.isPageLoaded())
      {
        politeInit();
      }else{
        Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit);
      } 
    }

    function politeInit(e)
    {
      var extCSS = document.createElement('link');
      extCSS.setAttribute("rel", "stylesheet");
      extCSS.setAttribute("type", "text/css");
      extCSS.setAttribute("href", Enabler.getUrl("styles.min.css")); 
      document.getElementsByTagName("head")[0].appendChild(extCSS);

      var extJavascript = document.createElement('script');
      extJavascript.setAttribute('src', Enabler.getUrl('script.min.js'));
      document.getElementsByTagName('head')[0].appendChild(extJavascript);
    }

DoubleClick doesn't explicitly tell you to do it this way. But for us during these last campaigns it has optimized things quite a bit.

I hope this helps someone else

 

Thanks

- Patrick

 

 

  • Like 3
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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...