Loading CCC the asynchronous way

[FredCaillau]

Hi Gerasimos,

it has been a while. CCC has worked ok for long.

But now we want to optimize the load time of our page and were thinking to run all the .js asynchronously, especially the jQuery .js which is heavy. Everything would work, except CCC...:

 

- If I want to load the jQuery .js asynchronously, I also need to load the CCC "call" script asynchronously... and moreover after the jQuery, since CCC needs it.

- NOTE: this forces to make the whole "call" script static into a [ccc-call.js] file. For this, I use functions into onAccept and onCookiesAllowed to load the third-parties scripts, instead of writing these URL-dependent scripts directly in the CCC call code (server-side, with php). 

Could work... Unfortunately, CCC "plugin" (cookie_control.js) script uses "document.write", and I get a warning from Chrome saying:

"It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened"

The fact is that the "plugin" part is still loaded synchronously. Only the "call" part is loaded asynchronously, and I did not except this fail.

Can you see a way out?

Fred

 

[Gerasimos Tzoganis]

Hi Fred,

The latest version of Cookie Control should not use document.write, unless you put in the head of the document. In your case, it should fallback to using 

document.getElementsByTagName('body')[0].appendChild

So this should work in your case. Can you try downloading the latest version and tell me if you still have problems?

Kind regards,
Gerasimos

[FredCaillau]

Hola Gerasimos,

thanks for your fast answer, as usual.

I saw the change in the code, but unfortunately, the developer tool answer is still the same...

The cookie control script is loaded in the HEAD in our case.

Should I load the script in another place?

Fred

[Gerasimos Tzoganis]

Hi Fred,

I had a look in your code, which helped me better understand your problem. Because jQuery is asynchronously loaded simply moving Cookie Control at the end of the body won't help I think.

Could you try replacing the following line in the minified script you have:

document.write('<script type="text/javascript" src="//apikeys.civiccomputing.com/c/v?d='+encodeURIComponent(document.location.hostname)+"&p="+encodeURIComponent(b.product)+"&v="+CookieControl.VERSION+"&k="+encodeURIComponent(b.apiKey)+'"><\/script>')

with 

loadScript("//apikeys.civiccomputing.com/c/v?d="+encodeURIComponent(document.location.hostname)+"&p="+encodeURIComponent(b.product)+"&v="+CookieControl.VERSION+"&k="+encodeURIComponent(b.apiKey)+'")

This will use your own loadScript function to load that script instead of document.write. Having removed the document.write, you will then be able to load Cookie Control asynchronously like the rest of your scripts.

We are planning to remove document.write in the next version of Cookie Control, but since you already use a similar function, can you try the above and let me know?

Gerasimos

[FredCaillau]

Hi Gerasimos,

Preliminar note: please do not fully rely on what you see in the production site, since it is some steps back compared to the pre-production site where i make the tests.

However, the minified CCC .js is the same, and GOOD NEWS! It seems to work since I get the CCC alert message on the ApiKey (logical, not in production) and I have no error in the developper tool. So thanks a lot in any case!

I have put everything asynchronous now (pre-prod), and I am just testing before going to production, and see if it actually works and correctly loads the third-parties scripts. If it eventually works, I guess this could be a global solution for the next version of CCC plugin, and your customers who want to work asynchronously.

Best regards,

Fred

[FredCaillau]

Hi again,

unfortunately, one of the third-parties script does not execute:

As recommended in "Tweaking your scripts", this function is called from onAccept and onCookiesAllowed in the asynchronously-loaded call script:

function ccAddThirdparty1(){

  $.getScript( "//......js", function() {

  [instruction 1]; 

  [instruction 2];

  [instruction ...];

  });

};

Problem is: the instructions are written dynamically, so I cannot put this function in an asynchronously-loaded script (which must be "static" .js, as far as I know)

Unfortunately, it depends on jQuery ($) which is loaded asynchronously...

I thought about doing the (getScript) in an asynchronous js (maybe using loadScript), and leave only the instructions part in the synchronous-defined function. But I guess I would still get errors, since the objects expected in the instructions would probably not be present...

Do you see a way to sort this?

  

[Gerasimos Tzoganis]

Hi Fred,

I think you could achieve what you are after the other way around. When those instructions are available and you want them executed, check if Cookie Control is ready and if cookies are allowed:

if (CookieControl && CookieControl.consented()) {

  [instruction 1];
  [instruction 2];
  [instruction ...];

}

You can put the above in an interval function, to check periodically if cookies are allowed, after the instructions are ready.

I hope this helps.

Gerasimos