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 https://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 :)

adf.ly acquired by Linkvertise - Recreating missing feature

Comments

More from this blog

How I made a lightweight JavaScript Framework and then used it to build my Website - jasna.js

Making a Python wrapper for IPFS

Step 1 - Analyzing JavaScript

1.1 - Unminifying the Full-Page Script

1.2 - Understanding, how their links work

Step 2 - Writing own Script

2.1 - Link transformer

2.2 - Replacing links in HTML DOM

Full Code

JavaScript

Example Usage in HTML

Live Demo

Command Palette

Comments

More from this blog

Step 1 - Analyzing JavaScript

1.1 - Unminifying the Full-Page Script

1.2 - Understanding, how their links work

Step 2 - Writing own Script

2.1 - Link transformer

2.2 - Replacing links in HTML DOM

Full Code

JavaScript

Example Usage in HTML

Live Demo