Personalize Your Page Based on Params

#javascript #marketing #webdev #tutorial

If you're a frequent user of Netflix or Amazon, then you're familiar with how they use what they know about you to tailor their platform to your tastes. Personalization is an effective marketing technique. It makes you a more engaged customer, and more likely to get out your wallet.

But you don't have a team of data scientists or expensive enterprise level marketing tech. How can you apply personalization to your business?

Good news! None of that is required. You don't even need any JavaScript libraries or frameworks! Here's an example you can get started with: Changing the page based on query parameters.

The Project: Changing Headlines and Hiding Forms

We're going to create a simple landing page, then make some optimizations:

If we know the person is a subscriber, we won't show them the opt-in email form.
We'll change the headline to make it more specific.
Perfect project for a marketing developer. The more specific your copy is, the more it will resonate with the user. Imagine if the title of this article was "Hey Matt, here's how to optimize your landing page for your premium icon set!" For all you Matts out there, wasn't that nice?

The Result

Here's the final product. Below I'll explain exactly how it works.

Watch it in Action:

Now Learn How It Works:

First, Parse The Query String:

Fetch the query string (everything after the "?" in the URL.) It's referenced here:

windows.location.search

Then, parse that string into an object so that you can access specific variables. Here's a function that handles that:

/* Converts a query string into an object. 
 * example input:  ?src=agency
 * results: { src: "agency" }
 */
function parseQuery(str) {
  //Remove '?' from beginning.
  str = str.substring(1) 
  //split the string into key value pairs
  var pairs = str.split("&")
  //convert them into an object
  return pairs.reduce(function(map, pair) {
      console.log(pair)
      var kv = pair.split("=")
      var key = kv[0]
      var value = kv[1]
      map[key] = value
      return map
  },{})
}

It's worth noting that every value is a String. If you want to interpret a value as an integer or float, you'll need to use ParseInt and ParseFloat. For booleans you can use value == 'true'

Then, Show and Hide Elements

Now that we have a usable object, we can start manipulating the page. In these examples, we'll be using the native document.querySelector and document.querySelectorAll methods. Using native methods keeps your code portable. You can use this code anywhere from a single page application to Google Tag Manager.

Here's the function that hides our email opt-in. If we already have the visitors email address, we don't need to keep pestering them.

if(profile.subscriber) {
  document.querySelector(".course-opt-in").style.display = "none"
}

Finally, Update Text on The Page

Similarly, we can update text. Here's an example that looks for every instance of a specific class, and changes the text within that element. First, the helper function that makes the updates:

function updatePlurals(text) {
  var targets = document.querySelectorAll(".target-plural");
  for(var i = 0; i < targets.length; i++) {
    targets[i].innerText = text;
  }
}

And then a switch statement to call said function.

switch(profile.src) {
  case "agency":
    updatePlurals("agencies")
    break
  case "freelancer":
    updatePlurals("freelancers")
    break
  case "startup":
  default:
    updatePlurals("startups")
    break
}

Exercise: How Can You Apply This To Your Site?

What are some ways you could make your pages resonate with your visitors more? The more resonant your content, the more helpful and persuasive you'll be to your audience. Here are some ideas for places to start:

Headlines. Where could you update headlines to make them more specific?
Opt-ins. Where could you remove opt-ins to make the experience more pleasant for your users? Could you show different opt-ins based on what you know about them? (for example, instead of asking someone to opt-in to a newsletter, you could ask them to sign up for a free trial).
Calls to Action. Besides headlines, calls to actions are the most important text on your page. How could you make them more persuasive?

(article originally posted here: How to Update Content Based on URL params; No Libraries Required)