当用户单击链接时，在 URL 中保留 UTM 源跟踪

Question

我经营一个新闻/出版网站，其中 95% 的流量来自 Facebook 和不同的 Facebook 粉丝专页。

我已经通过 Google Analytics 设置了 UTM 跟踪，以跟踪来自不同粉丝专页的所有链接，以计算每个页面发送的访问者数量。这仅在用户被发送到网站时跟踪会话，但当用户单击网站中的链接（例如另一篇文章）时，跟踪就会丢失。

发送到该网站的所有用户的 URL 都有 UTM 跟踪代码，但当用户单击网站上的其他链接或文章时，UTM 跟踪将从 URL 中删除，因此该用户的跟踪会丢失。

我想跟踪发送到该网站的所有用户和会话的所有综合浏览量。

我希望当用户点击网站上的任何链接时，网站能够自动在 URL 中进行 UTM 跟踪。

例如，这是用户访问网站时的链接：

http://99soccer.com/man-united-worried-as-rivals-man-city-are-poised-to-sign-their-transfer-target/?utm_source=slign-11&utm_medium=slign&utm_campaign=slign-11

如果用户点击网站上的文章，则此 UTM 跟踪将从 URL 中消失，因此不会跟踪综合浏览量。

/?utm_source=slign-11&utm_medium=slign&utm_campaign=slign-11

每个将被发送到该网站的用户都将通过推荐发送，并且将有一个 utm 源来跟踪他们，但是一旦您在网站上单击链接，跟踪 URL（utm 源）就会消失。我希望当您单击网站中的另一个链接时跟踪保留在那里。

Answer 1

var links = document.getElementsByTagName('a');
var utm = /(utm_source=.*)&(utm_medium=.*)&(utm_campaign=.*)/gi.exec(window.location.href);

for(var i=0;i<links.length;i++){
  console.log(links[i].href = links[i].href + "?" + utm[0]);
}

这应该可以解决问题。

Answer 2

我遇到了同样的问题，在我搜索的所有地方，解决方案都会建议在页面加载时查询

<a>

中的所有

document

标签，循环遍历它们，并应用 UTM 参数。这对我来说似乎不完整......如果页面加载后 DOM 用新链接更新怎么办？似乎使用

click

事件处理程序是更好的路线。

我想出了这个，它似乎对我有用。我不知道它是否万无一失，所以我愿意接受改进。

if (window.location.search.includes('utm_')) {

    document.addEventListener('click', function(event){

        // get the nearest anchor tag to where the user clicked (in case they clicked on something inside the anchor tag like an <img> or <span>
        let aTag = event.target.closest('a');

        if (aTag !== null) {

            let urlParams = new URLSearchParams(window.location.search);
            let aParams = new URLSearchParams(aTag.search);

            // update the <a> tag's params with UTM params
            for (let [key, value] of urlParams.entries()) {

                // skip duplicates and only add new params that belong to UTM
                if (! aParams.has(key) && key.includes('utm_')) {
                    aParams.append(key, value);
                }
            }

            // reset the anchor's URL with all the query params added
            aTag.href = aTag.href.split('?')[0] + '?' + aParams.toString();
        }

    });

}

Answer 3

您可以在主页上手动设置会话参数。

sessionStorage.setItem('utm_source', params.utm_source); sessionStorage.setItem('utm_medium', params.utm_medium); sessionStorage.setItem('utm_campaign', params.utm_campaign);

然后在联系页面上检索它们，可能会分配给表单字段。

sessionStorage.getItem('itemName');

Answer 4

Ryan 代码可以工作，但如果我需要它来捕获与 UTM 无关的其他参数怎么办？

Answer 5

有更好的方法可以在 GA 中获取这些数据。您可以根据网站的初始推荐源对用户进行细分，并跟踪与他们相关的数据。我想这会实现你想要的。

如果出于某种原因，我真的认为您不需要这样做，如果用户加载带有 UTM 标签的页面，您可以主动更改页面上的所有链接以包含 UTM 标签。

其大致结构： 1.获取Document.url属性 2.逻辑检查是否包含UTM标签 3. 如果是，则为页面上的所有链接添加相同的UTM标签 4. 添加额外的检查以根据需要删除 UTM 标签或这些链接可能具有的其他参数。特别是使用 & 和 ?需要解决 url 中的问题。