​

👋,

In August, we launched a novel approach to a marketing site with ask.edgarallan.com. Since then, we've been focused on determining whether we built a winner or a loser by refining our data analytics capabilities. So far, the results look promising: check out this update.

Alongside ask.ea, we’re also enhancing our data analytics for Slater.app. What does that mean? Over the next several months, we’ll be rolling out updates based on your feedback and user data. Stay tuned—we’ll share our discoveries in future newsletters!

--

​

JS 101: Marketing Javascript

This week we had a client who wanted to hide or show content based on where the user was coming from. This is a common ask from marketers.

So, how can we do this? With URL parameters and cookies. Let's dig into the code we wrote:

```
// Function to get a query parameter by name from a URL
function getParam(name, url = window.location.href) {
try {
const urlObj = new URL(url);
return urlObj.searchParams.get(name);
} catch (error) {
console.error("Invalid URL", error);
return null;
}
}

// Function to set a cookie
function setCookie(name, value, days) {
const date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
document.cookie = `${name}=${encodeURIComponent(value)}; expires=${date.toUTCString()}; path=/`;
}

// Function to get a cookie value by name
function getCookie(name) {
return document.cookie
.split('; ')
.find(row => row.startsWith(name + '='))
?.split('=')[1]
? decodeURIComponent(row.split('=')[1])
: null;
}

// Main logic to check query parameters and manage cookies
const value = getParam('linkedin');
console.log("Query parameter 'linkedin':", value);

if (value === '1' || getCookie("linkedin") === '1') {
document.querySelector(".container")?.remove();
setCookie("linkedin", '1', 100); // Set cookie for 100 days
}
```

That code block may be a little overwhelming so let's break it down:

​

1. Retrieving Query Parameters

We can write a getParam function that uses the URL interface to extract query parameters safely. This avoids potential issues with manual string parsing.

```
const urlObj = new URL(url);
return urlObj.searchParams.get(name);
```

The URL Constructor creates a URL object to access its searchParams property.

searchParams.get: Retrieves the value of a parameter by its name.

​

2. Setting Cookies

The setCookie function creates a cookie with an optional expiration time.

```
document.cookie = ${name}=${encodeURIComponent(value)}; expires=${date.toUTCString()}; path=/;
```

The encodeURIComponent encodes the cookie value to ensure it’s URL-safe.

​

3. Getting Cookies

The getCookie function retrieves the value of a specific cookie by its name.

```
document.cookie .split(‘; ‘) .find(row => row.startsWith(name + ‘=’)) ?.split(‘=’)[1];
```

split(‘; ‘) splits all cookies into an array of key-value pairs.

find finds the cookie that starts with the specified name.

The Optional Chaining (?.) safely handles cases where the cookie is not found.

​

4. Code Logic

The main block checks if the `linkedin` query parameter or cookie is set to 1. If true, it removes the first .container element and sets a cookie.

```
if (value === ‘1’ || getCookie(“linkedin”) === ‘1’) { document.querySelector(“.container”)?.remove(); setCookie(“linkedin”, ‘1’, 100); // Set cookie for 100 days }
```

The querySelector selects the first matching .container element.

​

This code showcases best practices for:

• Safely handling URLs and query parameters.
• Managing cookies efficiently.
• Using modern JavaScript features like URL, optional chaining, and template literals.

You now have a robust solution for managing query parameters and cookies in your JavaScript projects. Let us know if it is useful!

​

Happy coding!

🤙 the Slater Team

​

If Slater helps you create better websites, please support the team behind it.