NoipFraud

How to Inject your SUBID in a Static HTML Page

#subid

This guide provides an example of how you can insert your SUBID value from the querystring into a HTML link.

Assume you have this simple landing page:

  1. It receives the subid in the URL querystring as subid - for example: https://domain.com/page/?subid=12
  2. You just want to append the subid as its received, eg https://outgoinglink.com/page/?subid=12 or insert it in a link quertystring where it specifies the placeholder {{subid}}

These are the steps to go through in summary:

  1. Open your html page in your preferred editor
  2. Insert the JS code
  3. Tag your links with the token & if needed insert the placeholder
  4. Test

See the detailed steps below.

1. Open your page in an editor

This is a simple html page we will use in this example. It includes 3 example links.

Here is the starting code for the landing page. Of course yours will be different!

<!DOCTYPE html>
<html>
<head>
    <title>Subid Example</title>
</head>
<body>
		<h1>This is my subid test landing pahe</h1>
		
		<!-- EXAMPLE 1: Link to append subid to -->
    <a href="https://outgoinglink.com/page/?example=1">Link 1: Append subid</a>

		<!-- EXAMPLE 2: Link to insert subid into -->
    <a href="https://outgoinglink.com/page/?example=2&s5=&keyword=jobs">Link 2: Insert subid for s5 param</a>

		<!-- EXAMPLE 3: Dont add it to this link -->
    <a href="https://outgoinglink.com/page/?example=3">Link 3: Insert subid for s5 param</a>

</body>
</html>

2. Insert the JS code

Copy the javascript below (incl the <script></script> tags) and insert it into your html just before the </body> tag.

<script>
	// Constants for the token placeholder and query parameter name
	const TOKEN = 'subid';
	
	// Function to insert the query parameter value into links
	function parseTokens() {
			//get the querystring and look for the param degined by TOKEN
			const queryString = window.location.search;
			const urlParams = new URLSearchParams(queryString);
	    const queryValue = urlParams.get(TOKEN);

			//exit it TOKEN not present in query string
	    if (!queryValue) return; 
	
			//get all the <a href> links in the html that have a class equal to TOKEN
	    const links = document.querySelectorAll(`a.${TOKEN}[href]`);

			//add the query string value to each link
			const placeholder="{{"+TOKEN+"}}"
	    for (const link of links) {				
	        if (link.href.includes(placeholder)) {
							//if the link contains the {{TOKEN}} placeholder, replace it with the value
	            link.href = link.href.replace(placeholder, queryValue);
	        } else {
							//if it does not contain the placeholder, append it as TOKEN=VALUE, eg ?subid=12
	            link.href += (link.href.includes('?') ? '&' : '?') + TOKEN + '=' + queryValue;
	        }
	    }
	}
	
	// Call the function on page load
	window.onload = parseTokens;
</script>

The JS you added will only insert or add the subid to links that:

Append the subid to the outgoing HREF URL

Add the subid class to relevant links, for example: class="subid"

In our example HTML we want top append the subid to Link 1 - so we make the following change:

<!-- Before -->
<a href="https://outgoinglink.com/page/?example=1">Link 1: Append subid</a>

<!-- After -->
<a href="https://outgoinglink.com/page/?example=1" class="subid">Link 1: Append subid</a>

The link may already have a class, in which case you just add it with a space before: class="button" becomes class="button subid"

Add the subid class to the link like the previous example, and insert the {{subid}} placeholder in the URL.

In the example below we want the subid value to be added to the s5 querystring param, so s5= becomes s5={{subid}}

<!-- Before -->
<a href="https://outgoinglink.com/page/?example=2&s5=&keyword=jobs">Link 2: Insert subid for s5 param</a>

<!-- After -->
<a href="https://outgoinglink.com/page/?example=2&s5={{subid}}&keyword=jobs" class="subid">Link 2: Insert subid for s5 param</a>

Just open your Landing page URL in your browser and append the querystring subid param with a value.

So if your URL is: https://domain.com/page/ open it as https://domain.com/page/?subid=12

Then hover over the links you expect to include the subid and make sure they include the value.

FAQ

What if I want to use product_id for receiving the subid?

No problem.

So if your incoming URL is https://domain.com/page/?product_id=12

All you need to change is this line in our script:

// before
const TOKEN = 'subid';

// after
const TOKEN = 'product_id';

Then use the class name product_id and the placeholder {{product_id}} to insert the received value.

← Back to Support