Gatsby/React - Get Referring Url

Question

Building a jobs board. Need to know if the user clicked on our link from monster.com, jobs.com, foobar.com, etc. This needs to happen in the code, as I need to send it to an API.

What is the best way to accomplish this?

I tried searching around, but can only find articles on internal routing, eg:
How to get previous url in react gatsby

If I need to do this in plain Javascript (not available "out-of-the-box"), please point me in the right direction there too. Not even sure what to google for this other than "UTM parameters". We are using Google Analytics and the marketing team is including utm params in the links, if that helps.

Answer 1

In gatsby each page component has a location prop with some useful info. So you could do something like:

import React from "react"

const IndexPage = ({ location }) => {
  console.log(location.search.split("?")[1].split("&"))
  return (
    <div>
      My homepage
    </div>
  )
}

export default IndexPage

So visiting https://myapp.com/?campaign=foo&id=bar would log ["campaign=foo", "id=bar"] . With that info, you could decide how and when to communicate with your APIs to log the relevant info.

Answer 2

This question was very vague, because I did not understand what I was asking when I posted it. There is two scenarios here that should help you get started. If you have specific questions, follow up - I will try to help.

Scenario 1 (will most likely NOT work, but here for completeness): You are getting referrals from websites you are not at all associated with. For example, you run mycoolsite.com and someone at someforum.com linked to you. The ONLY way you are going to be able to know this without anything additional is if someforum.com sends something called a Referer Request Header . Many popular sites do not.

Scenario 2: Your marketing team pays someone to link to you for a specific promotion. Eg, your marketing team tells someforum.com to link mycoolsite.com for money or as a favor. In this case, they can request that scenario 1 be followed OR, more likely, they can include something called utm params, eg when they send the link it's not mycoolsite.com?utm_campaign=monster&utm_source=monsterjobs

When the request comes in to your site, you can then pull these utm params out, to identify which campaign is working.

The code for that looks something like this:

function buildUtmInfoString(currentUrlString) {

  const url = new URL(currentUrlString);

  let referrerString = '';

  utmParamNames.forEach(paramName => {
    const paramValue = url.searchParams.get(paramName.standard);
    if(!paramValue) {
      return;
    }
    const paramString = `${paramName.colloquial}: ${paramValue}, `;
    referrerString += paramString;
  });

  referrerString = referrerString.substring(0, referrerString.length-2);

  return referrerString;
}

Note that you might need to look up utm param standard names, they are supported by Google Analytics out of the box, if your company uses that, but you can use them without GA.

const standardUtmParamNames = {
  SOURCE: 'utm_source',
  MEDIUM: 'utm_medium',
  CAMPAIGN: 'utm_campaign',
  TERM: 'utm_term',
  CONTENT: 'utm_content'
};

const utmParamNames = [
  {
    standard: standardUtmParamNames.SOURCE,
    colloquial: 'Source'
  },
  {
    standard: standardUtmParamNames.MEDIUM,
    colloquial: 'Medium'
  },
  {
    standard: standardUtmParamNames.CAMPAIGN,
    colloquial: 'Campaign'
  },
  {
    standard: standardUtmParamNames.TERM,
    colloquial: 'Term'
  },
  {
    standard: standardUtmParamNames.CONTENT,
    colloquial: 'Content'
  }
];

export default utmParamNames;

Note that there are also hacks to accomplish this, but they are not reliable and can be seen as abuse of your user's privacy, so they aren't viable business solutions and I don't recommend wasting time on them.