Gatsby/React - 获取引荐网址答案

【问题标题】：Gatsby/React - Get Referring UrlGatsby/React - 获取引荐网址
【发布时间】：2020-03-02 16:21:42
【问题描述】：

建立工作委员会。需要知道用户是否点击了来自 monster.com、jobs.com、foobar.com 等的链接。这需要在代码中进行，因为我需要将其发送到 API。

最好的方法是什么？

我试过四处搜索，但只能找到内部路由的文章，例如：
How to get previous url in react gatsby

如果我需要在纯 Javascript 中执行此操作（不可用“开箱即用”），请也向我指出正确的方向。除了“UTM 参数”之外，甚至不确定要搜索什么。我们正在使用 Google Analytics，营销团队正在链接中包含 utm 参数，如果有帮助的话。

【问题讨论】：

您是否尝试根据用户的来源在 UI 中显示某种自定义？还是您只需要在某处跟踪指标？
@ksav 需要跟踪指标，但我还需要将它们从前端发送到几个 API，所以我不能直接使用 Google Analytics。
@VSO 你有没有找到解决方案？我想我也有同样的问题——营销团队说他们只是获得直接流量。我被难住了！
@beamercola 嘿，是的，我会在今天晚些时候尝试回复。
@VSO 你能分享一下你的解决方案吗？

标签： javascript reactjs gatsby

【解决方案1】：

在 gatsby 中，每个页面组件都有一个 location 属性，其中包含一些有用的信息。所以你可以这样做：

import React from "react"

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

export default IndexPage

所以访问https://myapp.com/?campaign=foo&id=bar 将记录["campaign=foo", "id=bar"]。有了这些信息，您就可以决定如何以及何时与您的 API 通信以记录相关信息。

【讨论】：

我这里用的方法是拉url参数。运行良好：stackoverflow.com/questions/979975/… 基本上，我在我们的 Layout 组件中检查 window.location.href，它包装了整个站点，并通过 AppProvider 使其可用。我只是认为可能有一种更清洁的方法。
我猜If it ain't broke, don't fix it

【解决方案2】：

这个问题很模糊，因为我发帖的时候不明白我在问什么。这里有两个场景可以帮助您入门。如果您有具体问题，请跟进 - 我会尽力提供帮助。

场景 1（很可能不起作用，但为了完整起见）：您正在从与您完全不相关的网站获得推荐。例如，您运行mycoolsite.com 和someforum.com 与您关联的某人。如果someforum.com 发送了一个名为Referer Request Header 的东西，那么您将能够在没有任何额外内容的情况下知道这一点的唯一方法。许多受欢迎的网站都没有。

场景 2：您的营销团队花钱请人链接到您以进行特定促销。例如，您的营销团队告诉someforum.com 链接mycoolsite.com 以获得金钱或帮助。在这种情况下，他们可以要求遵循场景 1，或者，更有可能的是，他们可以包含称为 utm 参数的内容，例如当他们发送链接时，它不是mycoolsite.com?utm_campaign=monster&utm_source=monsterjobs

当请求进入您的网站时，您可以提取这些 utm 参数，以确定哪个广告系列有效。

代码如下所示：

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;
}

请注意，您可能需要查找 utm param 标准名称，如果您的公司使用它们，Google Analytics 开箱即用地支持它们，但您可以在没有 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;

请注意，也有一些黑客可以做到这一点，但它们并不可靠，并且会被视为滥用用户隐私，因此它们不是可行的商业解决方案，我不建议在它们上浪费时间。

【讨论】：