Uncategorized

Community Tip: Adding Properties into the URL

In this Community Tip, we will show you how to utilize URL query string to pass information into People emails or a custom email unsubscribe page. Email, as a platform, does not allow dynamic coding like JavaScript. However, by using Mixpanel’s Notification features we can still pass along incredibly useful information to your project.

What is a Query String?

A URL may contain additional information besides the address of the webpage. One of these additional pieces is called a query string. This is data that fits outside of the actual path of the URI.

Parts of the URL

This query string is composed of a series of name-value pairs although it doesn’t have to be. In each pair, the values are separated by an equals sign (=) by convention. The different pairs of keys and values are separated by an ampersand (&).

Traditionally, a query string is used to pass information to your web server. This can allow a server to calculate some result which might then be relayed back to the website. However, without server or client side code in place to grab this information, nothing happens. In fact, if you add arbitrary query strings to most URLs, the whole query string will be ignored. The query string will simply remain in the URL and not affect the page.

For example, if you go to www.google.com and www.google.com?test=this you will be presented with the same exact website. This is because the Google server does not have a program waiting for a “test” value. However, you can see that the query strings will remain in the URL.

A query string that you might be familiar with is the utm tag (e.g. http://www.example.com?utm_source=google&utm_campaign=ad1), which Mixpanel records as a super property by default in our web library.

Grabbing the Query String

Since the query string exists in the URL of the page, we can use JavaScript to grab it and parse out the names and values. Here is an example of a function that will examine the URL of the current page and grab a designated query parameter.

function getQueryParam(param) {
    param = param.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regexS = "[\\?&]" + param + "=([^&#]*)",
        regex = new RegExp( regexS ),
        results = regex.exec(document.URL);
    if (results === null || (results && typeof(results[1]) !== 'string' && results[1].length)) {
        return '';
    } else {
        return decodeURIComponent(results[1]).replace(/\+/g, ' ');
    }
};

Now by calling getQueryParam(“test”); we will be return with the value of “test=” from the URL.

Utilizing URL Parameters for a Referral program

Referral programs are a very effective method to help get the word out about your company – Referrals are one of the three Rs in AARRR after all. Having the ability to analyze the users that came from a referral campaign is an incredibly important part of the process. Luckily with Mixpanel we can accomplish this easily.

Leveraging Mixpanel’s dynamically populating people properties for notifications, we can create custom links for a referral or invitation program. For example we can create a link to a sign up page that users can share with their friends. In the code for the body of our email we can set the username as a query string parameter for the link.

<a href="www.example.com/signuppage.html?inviter={{$username}}">share this link</a>

In this example message the resulting link for a profile with the username “patdavis” would be www.example.com/signuppage.html?inviter=patdavis.

Now we need to make sure our signup page (www.example.com/signuppage.html) is ready to handle this parameter. First we need to include the getQueryParam function code above into the header tags of the webpage. This means the code should be copied between the head tags.

Next we will need to call this function and grab the value of “inviter” in the URL and set it as a super property. This will automatically make it a property of every event that user does moving forward. Below is an example of the code that would be needed to do this. They should be placed between the body tags of the signup page.

var inviter = getQueryParam("inviter");
mixpanel.register({
    "Inviter": inviter,
});
mixpanel.track("Page Loaded", {"Page Viewed": "Sign Up"});

Now with inviter set as a super property we will be able to view any event, such a registration page view, and see if they came from our referral program!

Segment by Inviter

We could also take this further to build a viral funnel.

Creating a Custom Unsubscribe Page

Using URL parameters opens the door to many possibilities by allowing you to pass information from sites you do not own. Another great use case is creating a custom unsubscribe page for email notifications sent with Mixpanel People.

Currently if a user clicks on the unsubscribe link from your Mixpanel email notification they are directed to a Mixpanel hosted unsubscribe page. This page runs a script that sets a people property called “$unsubscribed” with a value of “True” to their profile. This will prevent the user from receiving any more notifications from that project.

However, maybe you would like to redirect users to your own domain. This could give you the chance to re-engage with those customers one last time or style the page to match your site’s design. By using our URL parameters this is possible! This method does require that you are currently setting the distinct_id of your users a property of their profile or a user id aliased to the distinct. The most common example of this is setting the users email address or username as the distinct_id of the profile.

Once again we will use our dynamically populating values in a notification to create an unsubscribe link:

<a href="www.example.com/unsubscribe.html?id={{$email}}">Unsubscribe</a>

Now on the unsubscribe page (www.example.com/unsubscribe.html) we will use our function to grab the value for “id”. However instead of setting this value as a super property we will use it as the distinct_id of a people set. This will allow us to set the “$unsubscribed=True” property to that specific user’s profile. Here is an example of a script that would accomplish this.

var distinct_id = getQueryParam("id");
mixpanel.people.set({"$unsubscribed":"true"});
mixpanel.identify(distinct_id);
mixpanel.track("Page Loaded", {
    "Page Viewed": "Unsubscribe",
    "User ID": distinct_id,
});

Hopefully this has been helpful! Have any question? Please reach out to support@mixpanel.com to speak to someone smart, quickly.

Get the latest from Mixpanel
This field is required.