Develop Reference

Cookiebot Cookie Consent Script

I am adding ZohosalesIQ to the CookieBot Prior Consent widget on w WP install.
This script given by zoho is
<script type="text/javascript" data-cookieconsent="statistics">
var $zoho = [];
var $zoho = $zoho || {};
$zoho.salesiq = $zoho.salesiq || {
widgetcode: "1c636a8a8d8e3410b7e579760898b7768f3cb213adb21970788a3891735df801800b6e4a1385c37b0f792b9ee54ce",
values: {},
ready: function() {}
};
var d = document;
s = d.createElement("script");
s.type = "text/javascript";
s.id = "zsiqscript";
s.defer = true;
s.src = "https://salesiq.zoho.eu/widget";
t = d.getElementsByTagName("script")[0];
t.parentNode.insertBefore(s, t);
d.write("<div id='zsiqwidget'></div>");
</script>
I am supposed to be adding <script type="text/plain" data-cookieconsent="statistics">
to the script tag to enable prior consent on cookies created by this script however, when I add this it breaks and fails to load.
Console is empty but the page renders as a white page after pre-load. When I add the code with the jaavscript type tag, it works fine.
I've tried popping itto a call back function but no joy :(
Any pointers would be great.

If the script tag is using the deprecated JavaScript function “document.write” it might cause the problem you have described above because using this function the script is loaded synchronously and it will then clear the window content (generates blank page).
To prevent this issue please make sure that the script is loaded asynchronously since the Cookiebot triggers all scripts asynchronously (i.e. to wait for the visitor’s consent) in order to work properly.
You need rewrite it to use a different approach e.g. “document.write = function(node) {document.body.insertAdjacentHTML(‘beforeend’, node);}”

Loading External JS Files After Mouse Move or 5 Seconds Later for Better Page Speed Optimization

I am using smartsupp live chat script for my website. It is good however it dramatically increases my page loading time.
According to gtmetrix.com, my normal page load details:
Fully Loaded Time
2.6s
Total Page Size
751KB
Requests
42
But when I add this script:
Fully Loaded Time
20.6s
Total Page Size
2.00MB
Requests
66
So, I want to use this script but I don't want to load it firstly. I want to load it when visitors mouse move or 3-5 seconds later.
Do you have any solution for this? Thank you.
Default smartsupp codes like this:
<!-- Smartsupp Live Chat script -->
<script type="text/javascript">
var _smartsupp = _smartsupp || {};
_smartsupp.key = 'mykeynumber';
window.smartsupp||(function(d) {
var s,c,o=smartsupp=function(){ o._.push(arguments)};o._=[];
s=d.getElementsByTagName('script')[0];c=d.createElement('script');
c.type='text/javascript';c.charset='utf-8';c.async=true;c.defer=true;
c.src='//www.smartsuppchat.com/loader.js?';s.parentNode.insertBefore(c,s);
})(document);
</script>
EDIT:
I think this is not related with my question but I think this is another side of this problem too. According to gtmetrix.com I have "Leverage browser caching" problem beacuse of this script too. They said:
Leverage browser caching for the following cacheable resources:
https://s2.smartlook.com/rec/check (expiration not specified)
https://s2.smartlook.com/rec/init (expiration not specified)
https://s2.smartlook.com/rec/tag (expiration not specified)
https://static.smartsupp.co/chats/112939/avatar-gasqccul5z.png (expiration not specified)
https://rec-src.smartlook.com/recorder.js (5 minutes)
https://www.google-analytics.com/analytics.js (2 hours)
Maybe you can find a good solution for all of these problems. Thank you very much again.

Unfortunately other solutions are not fit for my problem. So I found a code like this:
<script>
window.onload = function(){
setTimeout(loadAfterTime, 5000)
};
function loadAfterTime() {
// your code here
}
</script>
And used it like:
<script>
var _smartsupp = _smartsupp || {};
_smartsupp.key = 'mykeynumber';
window.onload = function(){
setTimeout(loadAfterTime, 5000)
};
function loadAfterTime() {
window.smartsupp||(function(d) {
var s,c,o=smartsupp=function(){ o._.push(arguments)};o._=[];
s=d.getElementsByTagName('script')[0];c=d.createElement('script');
c.type='text/javascript';c.charset='utf-8';c.async=true;
c.src='//www.smartsuppchat.com/loader.js?';s.parentNode.insertBefore(c,s);
})(document);
}
</script>
After that, gtmetrix.com results:
Fully Loaded Time
2.7s
Total Page Size
650KB
Requests
34
So, it works! I recommend this solutions for all webmasters.

You can use javascript onload native method or document.ready from jquery library.
It is hard to accept that those loading time will be same or more or less same all the time, since it depends on internet speed and server capability.Instead of depending on setTimeout you can rely on window.onload
window.onload fires when the resource has loaded.
window.onload = function() {
// script for Smartsupp Live Chat
};

Its easy to do achieve this with jQuery. You just need to get the external js file after the document is ready and apply a set timeout function for your external script.
<script>
$(document).ready(function() {
setTimeout(function() {
var _smartsupp = _smartsupp || {};
_smartsupp.key = 'mykeynumber';
window.smartsupp || (function(d) {
var s, c, o = smartsupp = function() {
o._.push(arguments)
};
o._ = [];
s = d.getElementsByTagName('script')[0];
c = d.createElement('script');
c.type = 'text/javascript';
c.charset = 'utf-8';
c.async = true;
c.defer = true;
c.src = '//www.smartsuppchat.com/loader.js?';
s.parentNode.insertBefore(c, s);
})(document);
console.log("External js file loaded");
}, 5 * 1000) //calls the external chat after 5 seconds
});
</script>
Edit #1
Leverage browser caching doesn't works on external resources :)

How to extract the loaded javascript files from Dev Tools extension

I'm working on a chrome extension that wants to load javascript files from the current page, modify them (prettify), then update the Dev Tools Sources panel.
As a fall-back option - I don't override the usual Sources panel - But rather put them in a custom panel. (With this option, all I'd need is a list of the network resources loaded -results in the Network panel)
Ideally I'd like to override the source's pages though, in the hopes of using the debugging tools available to the dev tools.

I don't know it's possible to replace the script on the fly.
But you can inject some code from devtools-panel into the currently inspected web page as follows:
chrome.devtools.panels.create(
'your-extension-name',
'icon.png',
'panel.html',
function (pPanel) {
pPanel.onShown.addListener(function () {
var scriptToInject = function () {
document.addEventListener('DOMContentLoaded', function () {
var script = document.getElementsByTagName('script')[0];
var parent = script.parentElement;
parent.removeChild(script);
var newScript = document.createElement('script');
newScript.textContent = 'xxx'; // Doesn't work?
parent.appendChild(newScript);
}, false);
};
// Reloads the page.
chrome.devtools.inspectedWindow.reload({
injectedScript: '(' + scriptToInject.toString() + '())'
});
});
});

Javascript Cross domain not consistent

I am trying to make a plugging using JS.
I have the following code :
var fileref = document.createElement('script');
fileref.src = "js/index.js";
document.documentElement.appendChild(fileref);
I can verify that the code loads across domain however it doesn't always execute. Even if I set it before </head>
Sometimes it does but sometimes it just doesn't. Any ideas on what I could be doing wrong?

The JavaScript is sometimes running before the document.documentElement exists. So when it goes to append the new script element, it fails. The inconsistency ("sometimes it does but sometimes it just doesn't") is due to the page rendering at ever-so-slightly different speeds.
Update:
Put this in your <head>:
<script type="text/javascript">
(function () {
var scrpt = document.createElement('script');
scrpt.type = 'text/javascript';
scrpt.async = true;
scrpt.src = 'js/index.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(scrpt, s);
})();
</script>

Adding Google Analytics to Adobe Air HTML/Javascript App

I am attempting to add google analytics tracking to an Adobe Air app created with HTML and javascript.
I have tried adding the ga.js file and using it like I would in a webpage:
<script type="text/javascript" src="lib/js/ga.js"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-********-1");
pageTracker._initData();
pageTracker._trackPageview('/test');
</script>
But this doesn't seem to register anything on the analytics dashboard.
Have also tried using the GA for flash actionscript library but I can't seem to create an instance of the GATracker as it needs a DisplayObject?
EDIT
using the information from grapefrukt I tried the following:
air.Sprite = window.runtime.flash.display.Sprite;
air.GATracker = window.runtime.com.google.analytics.GATracker;
var tracker = new air.GATracker( new air.Sprite(), "UA-XXXXXXX-X", "AS3", false );
but I get the following error:
TypeError: Error #1009: Cannot access a property or method of a null object reference

NOTE: I originally misread your question to be about how to use gaforflash, but I'll post this anyway since I've already typed it up and it might be of some use.
You can the constructor whatever DisplayObject you like, normally you'd use your document class, but anything will work. As far as I can understand it's only really used for displaying debug info.
var tracker:AnalyticsTracker = new GATracker( new Sprite, "UA-XXXXXXX-X", TrackerMode.AS3, false );
Setting the TrackerMode to AS3 let's the flash communicate directly with the tracking servers, so you don't need the javascript from google's servers.
I can't help you with the communication between js/as3, but that should be fairly easy.

Probably not useful to the OP, but just spent the whole day working around this so hopefully my solution will save someone else that time.
So the reason the ga.js code can't be used directly from an AIR app written in javascript is that AIR won't set the cookie for pages that are stored within the application itself. To work around this, I downloaded ga.js to the application and modified it so that it doesn't rely on the document.cookie function.
In the application, I have:
<script type="text/javascript">
var cookies = {};
document.__defineSetter__('_cookie', function(c) {
var epos = c.indexOf('=');
var spos = c.indexOf(';', Math.max(0, epos));
if (epos == -1 || spos == -1) { return; }
var name = c.substring(0, epos);
var value = c.substring(epos + 1, spos);
cookies[name] = value;
});
document.__defineGetter__('_cookie', function() {
var a = [];
for (var name in cookies) {
a.push(name + '=' + cookies[name]);
}
return a.join('; ');
});
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXX-1']);
_gaq.push(['_trackPageview', path])
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
// custom GA code which uses document._cookie instead of
// document.cookie
ga.src = 'js/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
Ideally, we'd be able to override the cookie method, but unfortunately, it doesn't seem possible in webkit as implemented for AIR. So in ga.js, I replaced all instances of J.cookie with J._cookie. Once that's done, ga.js should believe that it's writing cookies and function normally.
In the interest of full disclosure, I actually access the above analytics code through an iframe, but since ga.js is being served locally, I suspect it's no longer necessary and didn't want to complicate the solution by adding the bridge logic.