Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to run JavaScript code before Meta refresh

All the while, we are using this realiable website redirection HTML/JavaScript code

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="refresh" content="1;url=https://www.nosuchwebsite.com">
        <script type="text/javascript">
            window.location.href = "https://www.nosuchwebsite.com"
        </script>
        <title>Page Redirection</title>
    </head>
    <body>
        <!-- Note: don't tell people to `click` the link, just tell them that it is a link. -->
        If you are not redirected automatically, follow the <a href='https://www.nosuchwebsite.com'>nosuchwebsite</a>
    </body>
</html>

Now, we would like to have Google Analytics tracking code executed, before redirection.

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

I realize, meta "refresh" may execute earlier than JavaScript tracking code. I was wondering, whether is there any way to make Google Analytics tracking code, to run before meta "refresh"

like image 718
Cheok Yan Cheng Avatar asked Oct 17 '25 15:10

Cheok Yan Cheng


2 Answers

Solution for long scripts

We don't want to specify seconds if script is going to take quite a while and we ain't sure how long.

So the idea is to get the URL to redirect to from the meta like and redirect to it,

  1. Stop refresh,
window.stop();
  1. Do you script stuff

  2. Finally get URL from meta and redirect to it.

window.location = document.querySelector( '[http-equiv="refresh"]' ).content.split( 'url=' )[1];

Here's an example

// STEP 1: Stop currect redirection
window.stop();

// STEP 2: Do your script stuff
// promise? async/await? Do wtf you want.
const msgEl = document.getElementById( 'messages' );
const addMsg = msg => msgEl.innerHTML += msg + '<br>';
setTimeout( () => addMsg( 'Let me at least do my nails.' ), 1000 );
setTimeout( () => addMsg( 'Aah, I\'m having a bad hair day :(' ), 2000 );
setTimeout( () => addMsg( 'Almost done...' ), 3000 );
setTimeout( () => addMsg( 'Ok, just a (three) second(s)...' ), 4000 );
setTimeout( () => {
  addMsg( 'Redirecting...' );
  // STEP 3: Redirect, Finally done with every we wanted to do.
  window.location = document.querySelector( '[http-equiv="refresh"]' ).content.split( 'url=' )[1];
}, 7000 );
/* Arbitrary CSS for presentation purposes only */

p, h3, small {
  font-family: sans-serif;
  font-weight: 300;
  line-height: 2
}

p {
  font-size: 14px;
}

code {
  font-family: monospace;
}
<!-- Resides somewhere inside <head> tag. -->
<meta http-equiv="refresh" content="0;url=https:///google.com/">

<!-- Arbitrary html for illustration -->
<h3>
Please wait while you are redirected with the mighty <code>meta refresh</code>.
</h3>

<p id='messages'></p>

<small><b>Spoiler:</b> Redirection will be stopped even though <code>meta[http-equiv="refresh"]</code> refreshes in 0 seconds.</small>
like image 81
shramee Avatar answered Oct 20 '25 05:10

shramee


What about if you add the redirection inside Google Analytics script like below via HTML JavaScript DOM?

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

document.getElementById("metaTag").innerHTML='<meta http-equiv="refresh" content="1;url=https://www.nosuchwebsite.com">'
})();
<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <meta id="metaTag">
        <title>Page Redirection</title>
    </head>
    <body>
        <!-- Note: don't tell people to `click` the link, just tell them that it is a link. -->
        If you are not redirected automatically, follow the <a href='https://www.nosuchwebsite.com'>nosuchwebsite</a>
    </body>
</html>

Thanks and best regards!

like image 33
Vishal Kalansooriya Avatar answered Oct 20 '25 06:10

Vishal Kalansooriya