Using WriteCapture2 to manage loading of ads on a responsive website...

246 views
Skip to first unread message

Micky Hulse

unread,
Jul 25, 2012, 6:01:56 PM7/25/12
to writecaptu...@googlegroups.com
Continuing the conversation from this thread:

"Write Capture 2"
<https://groups.google.com/d/topic/writecapturejs-users/VGLs2t1s8P0/discussion>

On Wed, Jul 25, 2012 at 6:59 AM, noah <iam...@gmail.com> wrote:
> If you use jQuery, here's a simple plugin:
> https://gist.github.com/3176323
> (I haven't tested this yet, but that's the general idea)

Interesting! Is that using WriteCapture2?

What does Deferred(); and resolve(); do?

The docs I found all seemed to be talking about the 1.X versions... I
assumed it was a complete change in the code base, so I did not bother
looking at those docs in detail. :(

BTW, I'm using WriteCapture2 for this experiment:

"Ads on Demand! Using writeCapture2() and onMediaQuery() to call OpenX
ads based on viewport size!"
<https://github.com/registerguard/ads-on-demand>

At first I thought I cam close to a silver bullet, but the browser
support isn't exactly where I would like it to be. :(

On the other hand, I had not read about Deferred(); and resolve();,
maybe those could help me fix some of the bugs I'm seeing with older
browsers?

Thoughts anyone?

Cheers,
Micky

noah

unread,
Jul 25, 2012, 9:00:37 PM7/25/12
to writecaptu...@googlegroups.com
$.Deferred is a jQuery API:
http://api.jquery.com/category/deferred-object/ that is very handy.

Yes, the code I posted is using WC2.

You definitely need to be careful not to run multiple captures at
once. document.write normally blocks the loading of an HTML document
(which is one or many reasons to hate it). writeCapture lets you load
it asynchronously, but unfortunately the nature of how document.write
works means that trying to load more than one script at a time will
cause all kinds of problems. If you're doing that, I can definitely
see you having issues, especially cross browser.

If you are loading a single script at a time and still have problems,
please raise an issue (with a jsbin or jsfiddle example please). There
are unfortunately many browser bugs and that sort of thing that Ad
servers (stupidly) tend to rely on.

If there is a need for loading multiple scripts at once, I'll look
into building out an official plugin to manage that.

Micky Hulse

unread,
Jul 26, 2012, 3:38:05 PM7/26/12
to writecaptu...@googlegroups.com
Hi Noah! Thanks so much for the quick and informative reply, I really
appreciate it.

On Wed, Jul 25, 2012 at 6:00 PM, noah <iam...@gmail.com> wrote:
> $.Deferred is a jQuery API:
> http://api.jquery.com/category/deferred-object/ that is very handy.

Yikes! I can't believe I hadn't seen that before! Thanks for linkage. :D

> Yes, the code I posted is using WC2.

Awesome. Bookmarking that gist now. Thanks for posting it. :)

> You definitely need to be careful not to run multiple captures at
> once. document.write normally blocks the loading of an HTML document
> (which is one or many reasons to hate it). writeCapture lets you load
> it asynchronously, but unfortunately the nature of how document.write
> works means that trying to load more than one script at a time will
> cause all kinds of problems. If you're doing that, I can definitely
> see you having issues, especially cross browser.

Thanks for the details and clarification.

You know, I never really knew how much document.write sucked until I
needed to get OpenX ads to work in a responsive layout... My first
thought was to take the OpenX ad tag calls and put them in a variable
and use those variables when needed... Um, yah, that didn't work so
well (each OpenX ad call has one, if not more nested,
document.writes).

I had two goals in mind when working with your code (and the
onMediaQuery script):

1. Put ad calls at bottom of page so that the rest of the page loads
before any ad stuff happens.
2. Based on viewport size, call new ad sizes to replace existing ad
sizes (i.e. a Leaderboard ain't going to fit when the viewport is less
than 728px wide).

Note: Both of the above are very counter intuitive to how OpenX ads
are supposed to be setup.

So, I think I've come close to finding a solution (as shown in my
demos) and WriteCapture is spectacular! I think it all boils down to
OpenX needing to change how they serve ads (i.e. nested
document.writes, like, wtf?)

> If you are loading a single script at a time and still have problems,
> please raise an issue (with a jsbin or jsfiddle example please). There
> are unfortunately many browser bugs and that sort of thing that Ad
> servers (stupidly) tend to rely on.

I have a demo here:

<http://registerguard.github.com/ads-on-demand/demo/demo2.html>

All the ad code is at the bottom of the page... When the page first
loads, then line #157 (right before the closing script tag) calls its
first writeCapture(). From there, the callback() calls
MQ.init(queries) (that's the onMediaQuery plugin) which then checks
viewport size and requests the appropriate ad using an additional
writeCapture().

Question: If I call a writeCapture() in the callback method of another
writeCapture(), would you consider that "load(ing) more than one
script at a time"?

Anyway, as you can see on that demo page, I've listed the browsers
that are buggy and/or fail; I think there's bugs for many reasons...
To name a few:

1. I'm using multiples JS plugins to do something that should just be
done, IMHO, on the ad server side.
2. OpenX code base is using oldschool techniques.
3. The buggy/fail browsers are old and suck anyway. ;)

> If there is a need for loading multiple scripts at once, I'll look
> into building out an official plugin to manage that.

Oh, I'd say, not for me... I don't know if there are many other people
out there trying to do this (i.e. load ads on demand based on viewport
size). Thanks for the offer though, that's very kind of you. :)

Thanks again for your help! I really appreciate it.

Have a nice day,

Cheers,
Micky

noah

unread,
Jul 26, 2012, 10:24:55 PM7/26/12
to writecaptu...@googlegroups.com
On Thu, Jul 26, 2012 at 2:38 PM, Micky Hulse <rgm...@gmail.com> wrote:
>
> Question: If I call a writeCapture() in the callback method of another
> writeCapture(), would you consider that "load(ing) more than one
> script at a time"?

No, that's exactly what the callback is for.

>
> Anyway, as you can see on that demo page, I've listed the browsers
> that are buggy and/or fail;

I've seen the callback failure in <IE9 but haven't had a chance to dig
into it. If anyone can produce a JSbin/fiddle that fails consistently
in IE8, I can probably figure it out.

I have no idea what the problem could be in Firefox 3.6. Same thing, a
JSbin would go a long way.

Micky Hulse

unread,
Jul 26, 2012, 10:49:31 PM7/26/12
to writecaptu...@googlegroups.com
Hello Noah,

On Thu, Jul 26, 2012 at 7:24 PM, noah <iam...@gmail.com> wrote:
> No, that's exactly what the callback is for.

That's good news. Thank you for the clarification. :)

> I've seen the callback failure in <IE9 but haven't had a chance to dig
> into it. If anyone can produce a JSbin/fiddle that fails consistently
> in IE8, I can probably figure it out.

I'll try to slap something together first thing tomorrow. I'll be sure
to ditch all other JS code and work directly with your plugin. I'm
game to help out as much as possible, so let me know what else I can
do to help.

> I have no idea what the problem could be in Firefox 3.6. Same thing, a
> JSbin would go a long way.

Will do. If I can reproduce the bug in a page that just uses your
plugin, I'll post jsbin links tomorrow. :)

Thanks a ton, I greatly appreciate all of your willingness to help.

Have a great night.

Cheers,
Micky

noah

unread,
Jul 26, 2012, 11:15:34 PM7/26/12
to writecaptu...@googlegroups.com
On Thu, Jul 26, 2012 at 9:49 PM, Micky Hulse <rgm...@gmail.com> wrote:
>> I've seen the callback failure in <IE9 but haven't had a chance to dig
>> into it. If anyone can produce a JSbin/fiddle that fails consistently
>> in IE8, I can probably figure it out.
>
> I'll try to slap something together first thing tomorrow. I'll be sure
> to ditch all other JS code and work directly with your plugin. I'm
> game to help out as much as possible, so let me know what else I can
> do to help.

I figured out the problem. Typo in the script callback. The latest
code on github should resolve the issue.

>
>> I have no idea what the problem could be in Firefox 3.6. Same thing, a
>> JSbin would go a long way.
>

I will have to find FF 3.6 some other day and take a look.

Micky Hulse

unread,
Jul 26, 2012, 11:18:21 PM7/26/12
to writecaptu...@googlegroups.com
On Thu, Jul 26, 2012 at 8:15 PM, noah <iam...@gmail.com> wrote:
> I figured out the problem. Typo in the script callback. The latest
> code on github should resolve the issue.

Whoa!! Cool! I can't wait to test things!!! I'll update my copy and
post back my results. :)

>>> I have no idea what the problem could be in Firefox 3.6. Same thing, a
>>> JSbin would go a long way.
> I will have to find FF 3.6 some other day and take a look.

Yah, you know, Firefox 3.6 could be a lost cause (or it could be my code).

Heck, who knows, maybe your fix also fixed 3.6? I'll be sure to
re-test everything tomorrow. :)

Thanks again Noah, you da man!!!!

I'll be back.

Cheers,
Micky

Micky Hulse

unread,
Jul 27, 2012, 7:09:51 PM7/27/12
to writecaptu...@googlegroups.com
Ok! I'm back!!!

Noah, that fix you made really helped! Firefox 3.1.x is passing now! (Stoked!)

-----

For those curious, I have all my changes int he develop branch here:

<https://github.com/registerguard/ads-on-demand/tree/develop>

I don't have any officially hosted GitHub demo pages (of my develop
branch) at this moment, but I uploaded all the latest code here (each
of them has a slightly different OpenX implementation):

1. <http://assets.registerguard.com/demos/demand/demo1.html>
2. <http://assets.registerguard.com/demos/demand/demo2.html>
3. <http://assets.registerguard.com/demos/demand/demo3.html>

For those curious, I've also added a default OpenX implementation page
(so you can see how the ad calls work out of the box):

<http://assets.registerguard.com/demos/demand/default.html>

Note: As soon as I push my develop branch to my master branch, all of
the above pages will be "officially" hosted on GitHub with GitHub
URIs.

-----

So, I ran into one small issue with element.write, a Flash ad and IE < 9.

Demo page here:

<http://jsbin.com/utubim/2>

If that does not work, there's also a demo here:

<http://assets.registerguard.com/demos/demand/test1.html>

I'm not sure if the problem is with the ad itself, or maybe there's
something going on with the element.write plugin... I have a feeling
that the ad is just a POS. :D

Noah, I'm sure your busy, so if you have a chance to take a peek in
the next couple weeks, that would be awesome!!!!

Let me know if I can provide more samples and/or help with anything
code related.

Thanks!
Micky
Reply all
Reply to author
Forward
0 new messages