Skip to content

Instantly share code, notes, and snippets.

@vperezb

vperezb/redirector.html

Last active March 29, 2020 16:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save vperezb/da3a517b53b36060a8a033211f593325 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save vperezb/da3a517b53b36060a8a033211f593325 to your computer and use it in GitHub Desktop.
Download ZIP
Setup a redirector with stats that allows you to track the amount of people used the url
Raw
redirector.html
<head>
<!-- For any support contact me on https://www.linkedin.com/in/vperezb-/ or https://www.malt.es/profile/victorperezberruezo-->
<meta charset="UTF-8">
<style>
/* Styles to create the simple loader, source https://www.cssscript.com/minimal-fullscreen-content-loader-h5loading-js/ */
html{height:100%;padding:0;margin:0}body{padding:0;margin:0}.H5_loading{z-index:999999;display:none;background-color:rgba(0,0,0,.2);width:100%;height:100%;position:fixed;top:0;left:0;opacity:0;filter:alpha(0);-moz-opacity:0}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@-moz-keyframes fadeIn{from{-moz-opacity:0}to{-moz-opacity:1}}@-ms-keyframes fadeIn{from{filter:alpha(0)}to{filter:alpha(1)}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOut{from{opacity:1}to{opacity:0}}@-moz-keyframes fadeOut{from{-moz-opacity:1}to{-moz-opacity:0}}@-ms-keyframes fadeOut{from{filter:alpha(1)}to{filter:alpha(0)}}.H5_loading .H5_loading_process{width:7rem;height:7rem;position:absolute;top:50%;left:50%;margin-top:-3.5rem;margin-left:-3.5rem;border-radius:50%}.H5_loading .H5_loading_process div{width:1rem;height:1rem;position:absolute;border-radius:50%;transform:scale(0.5);-webkit-transform:scale(0.5)}.H5_loading .H5_loading_process div:nth-child(1){top:0;left:50%;margin-left:-0.5rem;animation:loading_process 1s 0s infinite;-webkit-animation:loading_process 1s 0s infinite}.H5_loading .H5_loading_process div:nth-child(2){top:25%;right:25%;margin-right:-1rem;margin-top:-0.75rem;animation:loading_process 1s .125s infinite;-webkit-animation:loading_process 1s .125s infinite}.H5_loading .H5_loading_process div:nth-child(3){top:50%;right:0;margin-top:-0.5rem;animation:loading_process 1s .25s infinite;-webkit-animation:loading_process 1s .25s infinite}.H5_loading .H5_loading_process div:nth-child(4){bottom:25%;right:25%;margin-right:-1rem;margin-bottom:-0.75rem;animation:loading_process 1s .375s infinite;-webkit-animation:loading_process 1s .375s infinite}.H5_loading .H5_loading_process div:nth-child(5){bottom:0;left:50%;margin-left:-0.5rem;animation:loading_process 1s .5s infinite;-webkit-animation:loading_process 1s .5s infinite}.H5_loading .H5_loading_process div:nth-child(6){bottom:25%;left:25%;margin-left:-1rem;margin-bottom:-0.75rem;animation:loading_process 1s .625s infinite;-webkit-animation:loading_process 1s .625s infinite}.H5_loading .H5_loading_process div:nth-child(7){bottom:50%;left:0;margin-bottom:-0.5rem;animation:loading_process 1s .75s infinite;-webkit-animation:loading_process 1s .75s infinite}.H5_loading .H5_loading_process div:nth-child(8){top:25%;left:25%;margin-left:-1rem;margin-top:-0.75rem;animation:loading_process 1s .875s infinite;-webkit-animation:loading_process 1s .875s infinite}@keyframes loading_process{87.5%{transform:scale(1.1)}93.75%{transform:scale(1.5)}100%{transform:scale(1.1)}}@-webkit-keyframes loading_process{87.5%{-webkit-transform:scale(1.1)}93.75%{-webkit-transform:scale(1.5)}100%{-webkit-transform:scale(1.1)}}
</style>
<script>
// Creates a loader to be shown while calculating and sending the stat.
(function(k,g,a){var b=k.createElement("section");var c={color:"#666",background:"rgba(0,0,0,.2)",timeout:1,scale:1};var h="fadeIn "+c.timeout+"s forwards";var f="fadeOut "+c.timeout+"s forwards";b.style.backgroundColor=c.background;b.setAttribute("class","H5_loading");b.setAttribute("id","H5_loading");var e=k.createElement("div");e.setAttribute("class","H5_loading_process");var j=new Array();for(var d=0;d<8;d++){div=k.createElement("div");j.push(div);div.style.background=c.color;e.appendChild(div)}b.appendChild(e);k.documentElement.appendChild(b);g.H5_loading={show:function(m){b.style.display="block";if(m){if(m.color){for(var l=0;l<j.length;l++){j[l].style.backgroundColor=m.color}}if(m.background){b.style.backgroundColor=m.background}if(m.timeout){h="fadeIn "+m.timeout+"s forwards"}if(m.scale&&(typeof m.scale)=="number"){e.style.transform="scale("+m.scale+","+m.scale+")"}}b.style.animation=h;b.style.webkitAnimation=h;b.style.MozAnimation=h;b.style.msAnimation=h},hide:function(i){if(i){f="fadeOut "+i+"s forwards"}else{i=c.timeout}b.style.animation=f;b.style.webkitAnimation=f;b.style.MozAnimation=f;b.style.msAnimation=f;setTimeout(function(){b.style.display="none"},i*500)}}})(document,window);
// Function to retrieve parameters from the url
function findGetParameter(parameterName) {
var result = null,
tmp = [];
var items = location.search.substr(1).split("&");
for (var index = 0; index < items.length; index++) {
tmp = items[index].split("=");
if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
}
return result;
}
// Showing the Loader
H5_loading.show({color:"#d2312e",background:"#FFFFFF",timeout:0.5,scale:0.5});
// Retrievig parameters from the url
var url_redirect = findGetParameter("u");
var identifier = findGetParameter("i");
var version = findGetParameter("v");
// Creating the event to be sent (a PIXEL can also be used)
stats_event = {
'EventName': 'URL/Redirect',
'DestinationURL': url_redirect,
'Version': version,
'Identifier': identifier
}
// Define the url from the API that will recieve the stat
var stats_url = 'https://my.stats.api/Event'
// Make the request to send the stat
var xhr = new XMLHttpRequest();
xhr.open("POST", stats_url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(stats_event));
// Redirect the user to the final url (with utms and everything)
window.location.href = url_redirect
</script>
</head>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment