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, e.g.:
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.

Are you trying to display some sort of customisation in the UI depending on where the user has arrived from? Or do you just need to track the metrics somewhere? — ksav, Mar 02 '20 at 22:09
@ksav Need to track the metrics, but I also need to send them off to several APIs from the front end, so I can't use Google Analytics directly. — VSO, Mar 02 '20 at 22:26
@VSO did you ever find a solution for this? I think I'm having the same problems - marketing team is saying they're only getting direct traffic. I'm stumped! — cYberSport91, Nov 03 '20 at 18:32
@beamercola Hey, yea, I will try to post a reply later today. — VSO, Nov 03 '20 at 21:06

score 1 · Answer 1 · answered Mar 02 '20 at 22:39

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.

answered Mar 02 '20 at 22:39

ksav

20,015
6
46
66

I am using the method here to pull url params. Works well: https://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-get-parameters Basically, I am checking for the `window.location.href` in our Layout component which wraps the whole site, and making it available via an AppProvider. I just thought there might be a cleaner way to do it. – VSO Mar 02 '20 at 22:46
1

I guess `If it ain't broke, don't fix it` – ksav Mar 03 '20 at 03:32

VSO · Answer 2 · 2020-11-03T22:03:37.007

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. E.g., 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, e.g. 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.

Gatsby/React - Get Referring Url

2 Answers2