problem js start script before loading page - javascript

I am trying to read and pass cookies using Javascript (fbclid, gclid, utm_source, etc.) from our website's visitors onto a typeform (directly embedded in our website's pages) once the form is filled.
Our website is built on wordpress, and the JS script is contained within a HTML container.
The process I am trying to implement:
A visitor lands on a page
The script reads the visitor's cookies
If/When the form is loaded, the visitor's cookies are passed alongside the form's information (basic contact information) that we then retrieve using Zapier. A specific "zap" is then triggered, containing the form's information as well as the cookies' information.
The problem is that the script that reads and passes the cookies to the typeform/zapier loads before actually getting the cookies.
I tried to put an "if" statement that checks when the page is loaded (the same one used for reading visitors' cookies) but the page then turns blank.
Google also tells me that there is a conflict between document.write and window.load()
Here is the script:
<script>
(function() {
window.onload = function() {
if(!window.location.hash) {
window.location = window.location + '#loaded';
window.location.reload();
var src = "//embed.typeform.com/next/embed.js";
document.write('<script src=' + src + '><\/script>');
}
}
})();
</script>
Any help here would be greatly appreciated!

Related

inject GA4 script in the html of a static site with javascript

I have the following situation:
a static site, only html pages
a cookie notice system, with my own cookies, accept and refuse system of cookies setup
Now I need to inject the GA4 script into the head of pages when cookies are accepted, but...
I have already made made that, by appending the script to the head and it is visible on browser, on page reload with inspect elements...and it's working perfect.
When users click on accept cookies, the cookies accept is saved on client's side, and the script is APPENDED to page.
But I need the GA4 script to be somehow INJECTED, to be visible on the source page. Like when I preview the source page in browser to have it there. I don't need it to be injected into the html file itself, but only into the browser.
I did my own research about these days, and now it's killing me, as all I could find was the append way, but that is not injecting it into the source page on browser.
Any advice or guidance would be greatly appreciated.
Note (as I have been asking all the time. I don't want to offend anyone, but that's the best way I can explain where I want to do and what):
the source page I'm talking about is when right click on browser and view source page (there is where I need the GA4 code to be inserted)
and the way I got it to work is when right click > inspect > elements tab - (there i have it now working)
Thank you!
First question would be, why do you want it to be in the actual source code? A common way of inserting these scripts is through a tag-management-solution, which basically follows similar logic as appending scripts to the page (i.e. similar to what you meant by the inspect elements route).
To answer your question;
There is an option to get it into the sourcecode, and that is by checking on the server delivering the HTML whether a user has accepted the cookies, if that is the case deliver the HTML file (or adjust the HTML) to contain the GA4 script, if the user didn't accept: deliver the page without the GA4 script.
Since you mention these are static HTML files, I assume there is no server in place where this kind of logic can be inserted. So the best option is to insert the script afterwards.
Another way would be to insert the tag by default, but disable tracking (haven't tested the below part, also, verify yourself whether in your situation this actually blocks tracking when cookies aren't accepted):
window['ga-disable-GA_MEASUREMENT_ID'] = true;
https://developers.google.com/analytics/devguides/collection/gtagjs/user-opt-out
You could try to add this in your HTML before loading the GA4 tag, similar to something like:
<script>
const gaMeasurementId = 'G-12345678'; //replace with your own MeasurementID
let cookiesDeclined = true; //default to declined cookies
document.cookie.split(';').forEach( (cookie) =>{ //loop through all cookies
const cookie_arr = cookie.split('='); //get key/value pairs for cookies
let name = cookie_arr[0]; //cookiename
let val = cookie_arr[1]; //cookieval
if(name === 'cookieConsent' && val === 'accepted' ){
cookiesDeclined = false; //set the declined status to false when user has accepted the cookies
}
})
window['ga-disable-'+gaMeasurementId] = cookiesDeclined;
//->insert ga4 tag here
</script>

I want to redirect to a website and then click on a button on it

I want to redirect my browser to another website and then click on a action button on that website. I think i should add some time delay in between these two tasks. The code i have written do only one event at a time.
window.location.href = "http://www.google.com";
var delayInMilliseconds = 2000;
setTimeout(function() {
document.getElementById('action-button').dispatchEvent(new MouseEvent("click"));
}, delayInMilliseconds);
It's forbidden to do this for security reasons.
In computing, the same-origin policy is an important concept in the
web application security model. Under the policy, a web browser
permits scripts contained in a first web page to access data in a
second web page, but only if both web pages have the same origin. An
origin is defined as a combination of URI scheme, host name, and port
number. This policy prevents a malicious script on one page from
obtaining access to sensitive data on another web page through that
page's Document Object Model.
Source
It is not possible in this manner.
First you change the url of the page which will stop the rest of your JS code from executing. So your timeout will never reach the google page.
Instead implement an <iframe> with the src set to http://www.google.com. Then select the iframe and look for your element in there.
This post will explain how to select the element from an iframe.
Get element from within an iFrame
At the moment you redirect the user with window.location.href any other script won't be executed.
Sort of hack to do what you want is implant script on the second website that will trigger if the user came from a specific URL. Something like that:
var URL = "OLDWEBSITEURL";
var x = window.history.back();
if (x === URL) {
document.getElementById('action-button').dispatchEvent(new MouseEvent("click"));
/* or any other code */
}
Note that if the user open the link on different window/tab or/and disable js it won't work.

check login and redirect before page load

Is it possible using javascript to stop a page from loading and redirect if a cookie is not set. lets say the page index.html requires you to be logged in, and the only way to log in is via a cookie given by the page login.html how can i stop index.html loading and then redirect the user to login.html.
Thanks in advance, i know how to do this in PHP but im having issues in javascript as it executes after the page loads and by then the user could just view-source:index.html to view the source code.
So it is possible to load javascript before the page loads using the example below
<script type="text/javascript">
var thecookie = readCookie('doRedirect');
if(!thecookie) {
createCookie('doRedirect','true','1');
window.location = '/coming-soon.html';
};
function createCookie(name,value,days){
// do work
}
function readCookie(name){
// do work
}
</script>
But the page still displays, therefore the use of server side authentication is preferred using something like PHP.

handling redirect while loading JS through Script Tag in Head of HTML document

There are 2 cases:
1) I am loading JS file from facebook site by using script tag.If this site is blocked by network access manager (websense) we are getting 302 response and autmatically redirected to some page. How to handle this condition ?
2) if point #1 passes then it internally creates an IFrame and try to access another facebook site now if this is blocked then same thing will happen but this time some text will appear on page along with other Page content visible to user. How to handle this ?
Please help me out here.
Regards,
PV
The easiest way to handle the first case is to check for a variable or namespace loaded by the javascript from Facebook.
// lets assume the facebook js file contains a "fb" namespace
if(fb || window.fb){
// do some action since we have facebook loaded
var fbFrame = document.getElementsByTagName('iframe')[0];
fbFrame.onerror = function(){
// facebook failed to load :( do redirect
window.location.href = "someOtherPage.html";
};
}else{
// facebook failed to load :( do redirect
window.location.href = "someOtherPage.html";
}
For the second part, you can add an onerror event listener to the iframe. When an error occurs loading the iframe, the onerror handler will be invoked.
Here's a good question that covers it: How can I handle errors in loading an iframe?

How javascript gets someother website data?

Well i am a bit confused..
I saw a service known as Zopim.. What they do is they provide you with a small piece of code:
such as
<!-- Start of Zopim Live Chat Script -->
<script type="text/javascript">
document.write(unescape("%3Cscript src=\'" + document.location.protocol +
"//zopim.com/?zopim\' type=\'text/javascript\'%3E%3C/script%3E"));
</script>
<!-- End of Zopim Live Chat Script -->
you just need to place it in the footer and ur done..
Can any body let me know how this works and from where i can learn this..
+
how can they even set the CSS with this and also the looks?
Awaiting for your replies...
Thanks
That code is creating a reference to a Javascript script hosted on their server. That reference on your page allows that script to access all the elements on your page (including their styles) through the DOM (Document Object Model) and to change them. All of this takes place in the user's browser.
Edit: Here's an example. Say I have a script on my site at http://www.mysite.com/myscript.js that does this:
document.body.style.backgroundColor = "#00FFFF"
Then you put this on your page:
<script type="text/Javascript">
document.write("<script src='" + document.location.protocol + "://www.mysite.com/myscript.js'></script>");
</script>
Then when a user loads your page, and the user's browser gets to that code, it will write out a script tag that references my script. It will then process that script tag, which basically downloads my script (to the user's browser) and runs it on your page (which is already on the user's browser). My script, in turn, changes the background color of the document (your page, running on the user's browser), because it acts like it was part of your page all along.
By the way, the reason you're using document.write instead of just linking directly to my script is so that if your page uses SSL, so will the link, so the user won't get any annoying messages that my script isn't secure.
This code creates a <script> tag that loads a script from http(s)://zopim.com/?zopim.
The generated <script> tag is a regular Javascript script that can do whatever it wants to.

Categories