# adf.ly acquired by Linkvertise - Recreating missing feature

The link shortener [*adf.ly*](https://adf.ly/) is shutting down soon, all accounts will have to migrate to [*Linkvertise*](https://publisher.linkvertise.com/). 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](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/](https://unminify.com/).

## 1.2 - Understanding, how their links work

From lines 34 to 38, I found this:

```javascript
 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:

```javascript
"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.

```javascript
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:

```javascript
let elements = document.getElementsByTagName("a");
```

Now I will loop through every <a> tag with this for-loop:

```javascript
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":

```javascript
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:

```javascript
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 &lt;body&gt; 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 &lt;script&gt; tag. But I recommend you just use my CDN, which would be the easiest and cleanest way in my oppinion.

## JavaScript

Copy + Paste

```javascript
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

```xml
<script src="https://cdn.remboldt.eu/linkvertise_single_url.js">
</script>
```

## Example Usage in HTML

```xml
<!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](https://cdn.remboldt.eu/linkvertise_single_url)

  
Thanks for reading :)