捕获传入的 URL 参数并传递给 div “data-url”属性答案

【问题标题】：Capture incoming URL parameters & pass into a div's "data-url" attribute捕获传入的 URL 参数并传递给 div “data-url”属性
【发布时间】：2020-05-18 01:34:19
【问题描述】：

我们目前正在使用嵌入在我们网站中的typeform。我们网站的所有流量都来自每次点击费用广告系列，因此必须在 GA 中进行准确的转化跟踪，这样我们才能准确跟踪投资回报率。

这就是问题所在。将每次点击费用广告系列直接发送到 typeform URL 时，GA 跟踪是准确的。将 typeform 嵌入我们的网站后，GA 跟踪显示引荐来源是我们的网站，而不是 Google 或 Bing cpc。

不要让这篇文章太长，我需要能够在 URL 中捕获活动参数（utm 源、utm 媒体等）并将该数据输入到位于 div 中的“data-url”属性中.

现在这是我的代码：

function main () {
var loc = window.location.toString(),
params = loc.split('&')[1],
params2 = loc.split('&')[2],
params3 = loc.split('&')[3],
params4 = loc.split('&')[4],
params5 = loc.split('&')[5],
typeformWidget = jQuery("#typeformWidget");
typeformWidget.attr('data-url') == typeformWidget.attr('data-url') + '?' + 
params + '&' + params2 + '&' + params3 + '&' + params4+ '&' + params5;
console.log(params);
};
main();

当我在控制台中看到数据时，我似乎正在捕获正确的参数，但是我终生无法弄清楚如何将数据传递给“data-url”属性。

【问题讨论】：

标签： javascript jquery google-analytics

【解决方案1】：

typeformWidget.attr('data-url', typeformWidget.attr('data-url') + '?' + 
params + '&' + params2 + '&' + params3 + '&' + params4+ '&' + params5);

或

typeformWidget.data('url', typeformWidget.data('url') + '?' + 
    params + '&' + params2 + '&' + params3 + '&' + params4+ '&' + params5);

您的代码不起作用的原因是== 用于比较通常在if 语句中使用的相等性。要分配一个值，您可以使用=，但使用 jQuery，您需要使用该方法来分配值，在这种情况下是 .attr('attribute name', value) 或 .data('name after the data-', value)

【讨论】：

谢谢。这似乎让我更进一步，但是当我在开发工具中检查源代码时，data-url 属性没有改变。
这是包含在我们网站上的 HTML，它调用了 Typeform：
forto.typeform.com/to/ESL67K"><iframewidth="100%" height="100%" frameborder="0" src="forto.typeform.com/to/ESL67K?typeform-embed=embed- widget" style="">
获取正确的GA中的attribution需要将utm参数添加到“data-url”属性中。

【解决方案2】：

最新版本的 Typeform 中的类和名称已更改，这就是我让它工作的方式。

您需要加载 jQuery，这是一个或最新版本：

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

然后你基本上只是在JavaScript中获取URL并分割你想要的部分然后替换加载嵌入表单的URL以传递初始网站的UTM标签，然后在</body>之前添加这个脚本：

<script>
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);

    //this where your utm tags should be going given your URL looks like: https://www.whatever.com?utm_source=Facebook  you can 
    //build your URLs here: https://ga-dev-tools.appspot.com/campaign-url-builder/

    const utm_source = urlParams.get('utm_source')

    typeformWidget = $("[data-url]");

    //the hidden field's name you created at typeform must go here, for this example the field is named: 'source', 

    newurl=typeformWidget.attr('data-url')+'?source='+utm_source;

    //you need to load jquery for this
    $("[data-url]").attr("data-url", newurl);
</script>

您可以添加更多字段，但您需要先获取它们（检查上面），然后调整新的 url 行，它将是 typeformWidget.attr('data-url')+'?source='+utm_source+'? medium='+utm_medium 等等等等；

Github for the script

【讨论】：