I whipped up some JavaScript to serve a particular need where we wanted to insert multiple affiliate links on webpages throughout a website. The website is not using a content management system (CMS) but instead using Jekyll where I develop the pages locally, then build the static HTML and push it to the web server. It’s a very smooth workflow and building sites with Jekyll is a breeze and the end result is a blazing fast website.
One might ask what benefit would using JavaScript have? Since I am in control of the data I could easily add my links, rebuild the site, then redeploy, but I think this JavaScript approach is a better alternative solution for my need. For starters, I have a single place where all of my links can be managed and dynamically substituted. I could do a search and replace in my code editor and then push out the changes, but this means I have to do this multiple times for all of my links and limit how many times I want the link to appear, because spamming my affiliate links multiple times on a single page is not good.
Benefits
Here are some of the benefits I find in using this approach.
Single source of truth.
I have a single place where I can see everything. I can view all of my links in a single file and change them in one place.
Better than search and replace.
Instead of blindly doing a search and replace all, I have more control over how many times I want my links to appear and where they should appear.
Lightweight
This doesn’t require any extra libraries or dependencies like jQuery. It’s all pure JavaScript.
Simple to Use
Use CSS selectors to tell it where you want to look for text. Then specify the text to find. Then tell it the link you want that text to go to. Done.
Example Code
Here’s example code where I replace the last instance of the word Amazon with a link to Amazon’s website.
First, you need to load the js-affiliate.js file on your site. It’s best to place it right before the closing </body> tag because, this will make sure all of the content is likely to be ready. If this code loads before the text exists on the page then, it will not work.
<html>
<head></head>
<body>
<!--
this code should go at the very end, right before the closing body
-->
<script type="text/javascript" src="js-affiliate.js"></script>
<script type="application/javascript">
JsAffiliate([
{
url: "*",
selector: "article p",
findText: "Amazon",
linkTo: "https://www.amazon.com",
position: 'end',
occurrences: 1
}
]);
</script>
</body>
</html>
The JsAffiliate is a global object created that accepts an array of configs. It accepts an array because, it can support more than one.
url is the page you want the code to execute on.
selector is a CSS selector to the Element that has your text.
findText is the text to search in the matching selector.
linkTo is the link findText should point to.
position accepts either start or end and tells to search from the start or end of the selector.
occurrences is how many times we should do the substitution.
As you can see, there isn’t much to it and the end result should save you time and keep you a little more organized.
View JavaScript Affiliate code on Github.