Referral Tracking

Say you've got a partnership, where you want to be able to reward referral partners for bringing you new clients.

How do you track that?

Typically, referral tracking program involves these parts;

• A special URL that identifies the partner who sent you the link.
• A means of storing that reference in a way you can later retrieve, when the customer completes a conversion.
• > The ability, ideally, to have that tracking mechanism persist for a period of time e.g. 30 days.
• A legal document which outlines the specifics of how your referral program works, how your referrers will be rewarded, and how you'll track their referrals.

Can this be built in Webflow?

In fact, mostly, it can, as long as the user has both scripts, and cookies enabled.

Here’s the easiest way I can think of.

Build your destination pages

Where do you want that customer to go?

Build out your product catalogs, video, library, or whatever content it is you want those customers to be referred to. It could even just be your homepage.

Wherever it is, make that decision first, and build those pages first.

Define your tracking URLs

Now, we want to define the URLs that we want to use for tracking purposes. Here, you can usually* extend your existing page or product catalog URLs.

Let's say your referral link is of the form;

_{https://.../products/totoro-mug?ref=92834719}

You have a partner who is referring people to your awesome Totoro mug, and that partner's referral ID is _92834719.

* I've added a note here because usually, Webflow does not use querystrings in its URLs. Therefore, you can use the whole querystring freely for referral tracking purposes. The exception might be if you are using pagination on a page.

Build your referral tracking page

Here's where [ most of ] the magic happens.

This page is a static page, at a fixed location, e.g. _/ref

It's entire purpose is to;

• Receive tracking data
• Store it in a cookie or in browser localdata
• Redirect that user to the intended page

Boom, they are now "tracked."

Generally, this will work fine- but there is always the possibility that your visitor has disabled scripts or cookies.

This will cost you the ability to track, but you don't want it to cost you the sale, so let's get them where they were trying to go.

To do this, include a <meta> redirect, which triggers in about 3 seconds. That redirect should never be hit, if your scripts are running. If they're not, it will take over, and send the user to your _/products page or somewhere near their original goal.

Note;

Add a META to make sure Google doesn't index your tracking redirector;

_{<meta name="robots" content="noindex">}

Note;

If you're referrer-tracking multiple things, you may want to separate them for this reason. e.g. create a folder called _/ref, and then inside it, put your individual tracking pages.

e.g. _{/ref/products?...}

e.g. _{/ref/services?...}

The more specific you get, the more accurately you can redirect them if scripts fail.

Setup 301 redirects

In your hosted site settings, setup a 301 redirect wildcard pattern that redirects your referral links to a tracking page.

In our example, you'd add...

_{/products/(*.)%?ref%=(*.)} -> _{/ref?ref=%2&page=/products/%1}

Double-check that escaping _% syntax, I’m not reading the docs atm.

Now, capture your conversion

Here's where things get fun

At the point of conversion, you need to retrieve that cookie, and pass it through with the conversion data so that you know who the referrer was.

e.g.;

• The customer filled out a form
• The customer purchased a product
• The customer signed up for a mailing list
• The customer clicked a button
• The customer enrolled in a course

To do that, you need a second script that retrieves that data, and appends it to a URL, or places it in a hidden form field, so that your receiving system gets it.

Need help building this?

I love building stuff like this. Give me a shout.

3rd Party Systems

Thanks to Chris Drit for suggesting some 3rd party referral tracking systems as well that can include payouts capability.

https://theovogg.medium.com/how-to-build-a-no-code-viral-referral-system-using-webflow-airtable-1ade57adc9e9

https://firstpromoter.com/

https://www.rewardful.com/

https://www.jetboost.io/affiliates

https://linkmink.com/

https://refmonkey.com/

‍