DEV Community 👩‍💻👨‍💻

Glenn Stovall
Glenn Stovall

Posted on • Updated on

Personalize Your Page Based on Params

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:

Personalization Demo

Now Learn How It Works:

First, Parse The Query String:

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

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) {
      var kv = pair.split("=")
      var key = kv[0]
      var value = kv[1]
      map[key] = value
      return map
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

And then a switch statement to call said function.

switch(profile.src) {
  case "agency":
  case "freelancer":
  case "startup":
Enter fullscreen mode Exit fullscreen mode

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)

Top comments (3)

airmind profile image
Alex Ágreda

What does this line does?

var pairs = str.split("&amp;amp;")

I do understand the str.split part, but not the parameter

gsto profile image
Glenn Stovall Author

Hey Alex!

There was a bug when I was importing my code samples, here's what the line should look like:

var pairs = str.split("&")

I've updated the article above to address the bug :).

And what it's doing is splitting up the params from the query string, so it turns something like this:


into an array of strings like so:


airmind profile image
Alex Ágreda

Thanks for your answer!

DEV runs on 100% open source code known as Forem.

Contribute to the codebase or host your own.
Check these out! 👇