Use URL Query Strings to Add Properties

You can use URL query strings to pass information into email notifications, unsubscribe pages, to make custom links for referral programs, and other applications such as cross-domain tracking.

The following page covers query strings, how to grab them, and how to use them.

Query String Overview

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.

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 (&).

Query_String_Param.png

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 a 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 return with the value of test= from the URL.

Use URL Parameters for a Referral Program

Referral programs are one example of an effective method to advertise your company.

You can leverage Mixpanel’s dynamically populating people properties for messages to create custom links for a referral or invitation program. For example, you can create a link to a sign up page where users can share with their friends. In the code for the body of the email, you 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.

Make sure the signup page (www.example.com/signuppage.html) can handle this parameter. Include the getQueryParam function code above in the header tags of the webpage.

Next call this function and grab the “inviter” value in the URL and set it as a super property to automatically make it a property of every event the user triggers.

Below is an example of the code to place between the body>code</bodytags in 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, you’ll be able to view any event, such as registration page view, and see if it came from a referral program.

Creating a Custom Unsubscribe Page

Using URL parameters allows you to pass information from sites you don’t own, such as creating a custom unsubscribe page for email messages sent with Mixpanel People.

Currently if a user clicks the unsubscribe link from your Mixpanel email message, they land on a Mixpanel hosted unsubscribe page. This page runs a script that sets an “$unsubscribed” people property with a “True” value to prevent the user from receiving any more messages from that project.

You can use URL parameters to redirect users to your own domain so you can re-engage with customers one last time or style the page to match your site’s design.

To do so, set your users’ distinct_id as a property of their profile or a user id aliased to the distinct_id. For example, you could set the user email address or username as the distinct_id of the profile.

Use dynamically populating values in a message to create an unsubscribe link:

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

On the unsubscribe page (www.example.com/unsubscribe.html) use the function to grab the “id” value. However, instead of setting this value as a super property, use it as the distinct_id of a people set to set the “$unsubscribed=True” property to that specific user’s profile. Here is an example:

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

Now with “inviter” set as a super property, you’ll be able to view any event, such as registration page view, and see if it came from a referral program.

Is this article helpful?
2 out of 2 found this helpful

Comments

0 comments

Please sign in to leave a comment.