adf.ly acquired by Linkvertise - Recreating missing feature
The link shortener adf.ly is shutting down soon, all accounts will have to migrate to Linkvertise. Sadly, Linkvertise lacks one feature I loved on adf.ly:
Creating single URLs without having to interact with a graphical user interface. They only provide a "full-page script", which replaces all links on the site with Linkvertise Ads. This was an absolute overkill for my use case. So I created my own little script, after analyzing how their full-page script works.
Step 1 - Analyzing JavaScript
1.1 - Unminifying the Full-Page Script
The full-page script is hosted on https://publisher.linkvertise.com/cdn/linkvertise.js. But they recently minified their script, after I criticized their method of generating links with junk data in them to make them look more complex.
So, when I started working on my script, I had to first unminify the code with https://unminify.com/.
1.2 - Understanding, how their links work
From lines 34 to 38, I found this:
debug("Converting '" + base_href + "'");
var base_url = "https://link-to.net/" + user_id + "/" + Math.random() * 1000 + "/dynamic/";
var href = base_url + "?r=" + btoa(encodeURI(base_href));
link.href = href;
link.setAttribute("_target", "blank");
The base URL is link-to.net, after that we have the user id, then a random number to make it look more confusing, then /dynamic/?r=, and finally we encode the URL into an ASCII Format with encodeURI(url). The URI is then encoded in base64 with the btoa() function. In the end, we get this URL-Format:
"https://link-to.net/${user_id}/${random_number}/dynamic/?r=${base64}"
Step 2 - Writing own Script
2.1 - Link transformer
The first step was really simple. I took the URL format, we saw in Part 1, and have put it into a separate function, so developers can use it in their JavaScript code.
function linkvertise_url(user_id, base_href) {
return "https://link-to.net/" + user_id + "/" + Math.random() * 1000 + "/dynamic/?r=" + btoa(encodeURI(base_href));
}
2.2 - Replacing links in HTML DOM
First I had to find an easy way, someone could select individual links in their HTML code, and "linkvertise" them.
My solution was to first select every <a> tag and store it in a variable:
let elements = document.getElementsByTagName("a");
Now I will loop through every <a> tag with this for-loop:
for (let i = 0; i < elements.length; i++) {
// Code goes here
}
In this for-loop, I will check for every element, if the class attribute contains "linkvertise":
for (let i = 0; i < elements.length; i++) {
if (elements[i].classList[0] == "linkvertise") {
// Rest here
}
}
Lastly, I will read out the href attribute's content and pass it to linkvertise_url(); to replace the current href with the newly generated Linkvertise link:
for (let i = 0; i < elements.length; i++) {
if (elements[i].classList[0] == "linkvertise") {
// Reading out current href
let base_href = elements[i].attributes['href'].textContent;
// Generating Linkvertise URL
let url = linkvertise_url(user_id, base_href);
// Set new href attribute
elements[i].setAttribute("href", url);
// Always in new tab
elements[i].setAttribute("target", "_blank");
}
}
I will have to put the for-loop into a function (linkvertise) and only call it, once the <body> has loaded. The easiest way, if the developer simply includes onload="linkvertise()".
Full Code
You can either host the script for yourself or include it in your <script> tag. But I recommend you just use my CDN, which would be the easiest and cleanest way in my oppinion.
JavaScript
Copy + Paste
function linkvertise_url(user_id, base_href) {
return "https://link-to.net/" + user_id + "/" + Math.random() * 1000 + "/dynamic/?r=" + btoa(encodeURI(base_href));
}
function linkvertise(user_id) {
// Get every <a> tag
let elements = document.getElementsByTagName("a");
// Loop through every <a> tag
for (let i = 0; i < elements.length; i++) {
// If class of <a> tag contains "linkverse"
if (elements[i].classList[0] == "linkvertise") {
// Extract the url from href attribute
let base_href = elements[i].attributes['href'].textContent;
// Pass the user_id and url to linkvertise_url();
url = linkvertise_url(user_id, base_href);
// Replace current url with new one, and link in new tab
elements[i].setAttribute("href", url);
elements[i].setAttribute("target", "_blank");
}
}
}
CDN
<script src="https://cdn.remboldt.eu/linkvertise_single_url.js">
</script>
Example Usage in HTML
<!DOCTYPE html>
<html>
<head>
<title>linkvertise single url example</title>
<meta charset="UTF-8">
</head>
<body onload="linkvertise('644202');">
<!-- Replace 644202 with your user id -->
<a href="https://blog.remboldt.eu/" class="linkvertise">My Blog</a>
<!-- add class="linkvertise" to a-tag -->
<script src="https://cdn.remboldt.eu/linkvertise_single_url.js"></script>
<!-- include script at the bottom -->
<script>
let url = linkvertise_url('644202', 'https://blog.remboldt.eu/');
// Use this function to convert URLs in JavaScript
console.log("Generatrd in JavaScript: " + url);
</script>
</body>
</html>
Live Demo
Thanks for reading :)