Feather Attribution

Brought to you by ScrapingBee and Freddy Feedback

A free and tiny javascript library to track the most used referral data.

Track UTM tags, ref and referrer data client side and store it in your own database.

Feather Attribution - A tiny library to track the most used referral data. | Product Hunt

What

A little javascript snippet that stores the most used referral parameters like UTM tags in local storage.

How

It then fills that data in fields on your user registration page so you can store them in your own database when a user registers.

Why

Now you know which ad money was spent well and where your users came from, without spending money on marketing software or installing multiple tracking pixels 🙌.

Features

Built to be simple, lightweight and customizable.

Local storage, not cookies

Doesn't send data with every HTTP request. Same-origin policy. No cookie notice needed.

Keep your data

Not yet another app to integrate but everything in your own app, in your own database.

Set expiration

Set an expiration date in number of days. No browser imposed limits (like with cookies).

First/last attribution

Define the attribution type for each of the categories of parameters separately.

Light like a feather

127 lines of pure Javascript.

So easy

Not even a sixth feature to mention 🙀. But we need it for symmetry.

Parameters

It will keep track of these 6 parameters. You can set first or last attribution for the UTM parameters together, the ref parameter and the referrer.

utm_source
URL parameter

Common URL tracking parameter

Use for ads

utm_medium
URL parameter

Common URL tracking parameter

Use for ads

utm_campaign
URL parameter

Common URL tracking parameter

Use for ads

utm_content
URL parameter

Common URL tracking parameter

Use for ads

ref
URL parameter

Common URL tracking parameter

Product Hunt, BetaList, etc

referrer
document.referrer

The URL the user came from

Installation

You'll be up and running in no time.

Step 1

Get the library

Copy the Gist and paste it in your app where you want it (eg in your app.js). There are some options you can set in the last few lines of the script.

🚨 Side project alert 🚨

This was a fast, tiny side project of 2 people that already have too much to do. We use it and it works, but there was no extensive browser testing, clean code standards etc.

Open Gist
Step 2

Add the input fields

Add these fields to your user signup page. Make sure you keep the IDs as shown below, the script needs these to fill the fields.

<input type="hidden" name="utm_source" id="utm_source">
<input type="hidden" name="utm_medium" id="utm_medium">
<input type="hidden" name="utm_campaign" id="utm_campaign">
<input type="hidden" name="utm_content" id="utm_content">
<input type="hidden" name="ref" id="ref">
<input type="hidden" name="referrer" id="referrer">

Step 3

Add these fields to your database

The script will truncate the values if they're longer than 256 characters so you can use VARCHAR(255)

utm_source
utm_medium
utm_campaign
utm_content
ref
referrer
Step 4

Let the script fill the fields

Put this snippet on the page where the input fields are located and Feather Attribution will fill them for you.

window.addEventListener('load', function() {
  featherAttribution.fillFieldsWithValues();
});

Don't forget the logic to store the values in your back-end 😉

Brought to you by

In an internet far far away...

Pierre from ScrapingBee built a simple but effective attribution script. Then Joost from Freddy Feedback started using it and proposed some fixes. There was a bit of back and forth on Twitter discussing improvements and then they joined forces to add some major features and make it free and open to the world.