Playing with Your Browser Urls

Photo by Erol Ahmed on Unsplash

In the last blog we were discussing about setting and getting cookies for your web application. In this one, we are going to talk about the basics of urls and how can we manipulate it.

So the first object to know about (highly likely you’ve already learnt about it) is the window.location object. The location object contains information about the current URL. It has following properties:

• hash: sets or returns the anchor part (#) of a URL
• host: Sets or returns the hostname and port number of a URL
• hostname: Sets or returns the hostname of a URL
• href: Sets or returns the entire URL
• origin: Returns the protocol, hostname and port number of a URL
• pathname: Sets or returns the path name of a URL
• port: Sets or returns the port number of a URL
• protocol: Sets or returns the protocol of a URL
• search: Sets or returns the querystring part of a URL

As well as the following three methods:

• assign(): Loads a new document;
• reload(): Reloads the current document;
• replace(): Replaces the current document with a new one

We are also looking at some url encoding protocols:

Well why we need url encoding?

URLs are designed to accept only certain characters in the standard 128-character ASCII character set. Reserved or unsafe ASCII characters which are not being used for their intended purpose, as well as characters not in this set, have to be encoded. URL encoding serves the purpose of replacing these non-conforming characters with a % symbol followed by two hexadecimal digits that represent the ASCII code of the character.

Characters must be encoded if:

1. They have no corresponding character within the standard ASCII character set.
2. The use of the character is unsafe because it may be misinterpreted, or even possibly modified by some systems. For example % is unsafe because it can be used for encoding other characters. Other unsafe characters include spaces, quotation marks, the # character, < and >, { and }, [ and ], and ~, among others.
3. The character is reserved for special use within the URL scheme. Some characters are reserved for a special meaning; their presence in a URL serve a specific purpose. Characters such as /, ?, :, @, and & are all reserved and must be encoded. For example & is reserved for use as a query string delimiter. : is also reserved to delimit host/port components and user/password.

Apart from that, we also have BASE64 encoding. So Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. By consisting only in ASCII characters, base64 strings are generally url-safe.

Although Base64 is designed to send binary data, in JavaScript or in web development in general we use it to send strings and data structures too, especially for passing data in URLs when that data includes non-url friendly characters.

For example in order to send JSON data structures in URL’s, we normally Base64 encode them.

In JavaScript, we can do this easily through WindowOrWorkerGlobalScope.btoa() and .atob() method. The WindowOrWorkerGlobalScope.btoa() method creates a Base64-encoded ASCII string from a binary string (i.e., a String object in which each character in the string is treated as a byte of binary data), and vice versa for atob() .

• btoa(): creates a base-64 encoded ASCII string from a "string" of binary data ("btoa" should be read as "binary to ASCII").
• atob(): decodes a base64 encoded string("atob" should be read as "ASCII to binary").

In the end, I’d like to mention about utm parameters as they are so important in nowadays marketing.

Urchin Tracking Module (UTM) parameters are five variants of URL parameters used by marketers to track the effectiveness of online marketing campaigns across traffic sources and publishing media. They were introduced by Google Analytics’ predecessor Urchin and, consequently, are supported out-of-the-box by Google Analytics.

The UTM parameters in a URL identify the campaign that refers traffic to a specific website, and attributes the browser’s website session and the sessions after that until the campaign attribution window expires to it. The parameters can be parsed by analytics tools and used to populate reports.

Example URL, UTM parameters highlighted, after the question mark (?):

https://www.example.com/page?utm_content=buffercf3b2&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer

There are 5 parameters you can add to your URLs:

• utm_source: Identify the advertiser, site, publication, etc. that is sending traffic to your property, for example: google, newsletter4, billboard.
• utm_medium: The advertising or marketing medium, for example: cpc, banner, email newsletter.
• utm_campaign: The individual campaign name, slogan, promo code, etc. for a product.
• utm_term: Identify paid search keywords. If you're manually tagging paid keyword campaigns, you should also use utm_term to specify the keyword.
• utm_content: Used to differentiate similar content, or links within the same ad. For example, if you have two call-to-action links within the same email message, you can use utm_content and set different values for each so you can tell which version is more effective.

And how all of this link together?

Use case 1. Get any object into Base64

const base64Encode = (str: string) => {
  return typeof btoa !== "undefined" 
 //in case window.btoa not available
    ? btoa(str)
    : new Buffer(str).toString("base64");
};

const encodeApplication = (applicationAsObject: object) => {
  const applicationAsJsonString = JSON.stringify(applicationAsObject);
  const applicationAsBase64 = 
base64Encode(applicationAsJsonString);
  return applicationAsBase64;
};

Use Case 2. Set the query parameter for the redirect url based on any passed in string

const setQueryParameter = (param: string) => () => {
  const qs = querystring.parse(window.location.search.replace(/\?/, ""));
  if (!qs[param]) {
    const newQs = {
      ...qs,
      param
    };
    const redirectTo = `${window.location.origin}${
      window.location.pathname
    }?${querystring.encode(newQs)} `;
    window.location.href = redirectTo;
  }
};

Use Case 3. encode cookie value (objects) into Base64 url

const targetHandler = (targetUrl: string) => {
  if (typeof window !== "undefined") {
    // determine whether url is to apply signup
    // if so encode cookie[products] and pass as a param
    if (targetUrl.indexOf("/checkout") >= 0 && Cookie.get("products")) {
      const products: string = Cookie.get("products")!;
      const productsAsBase64: string = window.btoa(products);
      return `${targetUrl}?products=${productsAsBase64}`;
    }
    return targetUrl;
  }
  return targetUrl;
};

That’s pretty much of it! Happy Reading!