捕获传入的URL参数&传递给div的"data-url"属性 [英] Capture incoming URL parameters & pass into a div's "data-url" attribute

问题描述

我们当前正在使用嵌入在我们网站中的 typeform .驱动到我们网站的所有流量都来自每次点击费用广告系列，因此必须在Google Analytics(分析)中进行准确的转化​​跟踪，这样我们才能准确地跟踪投资回报率.

We are currently using a typeform that is embedded in our site. All of the traffic driven to our site is from cpc campaigns so accurate conversion tracking in GA is a must so we can accurately track our ROI.

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

Here's the problem. When sending cpc campaigns to the directly to the typeform URL the GA tracking was accurate. After embedding the typeform into our site the GA tracking shows that the referrer is our site, and not Google or Bing cpc.

无需过多地发布帖子，我需要能够捕获URL&中的广告系列参数(utm源，utm介质等).将数据输入到位于div中的"data-url"属性中.

Without making this too long of a post, I need to be able to capture the campaign parameters (utm source, utm medium, etc) in the URL & input that data into a "data-url" attribute located in a div.

现在这是我拥有的代码:

Right now this is the code i have:

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"属性.

I appears that the correct parameters are being captured when I see the data in the console, however I cannot for the life of me figure out how to pass the data to the "data-url" attribute.

推荐答案

在最新版本的Typeform中，类和名称已更改，这就是我如何使其工作的方式.

Classes and names have changed in the latest versions of Typeform this is how I got it to work.

您将需要加载此版本或最新版本的jQuery:

You will need to load jQuery, this one or latest version:

<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>之前添加此脚本:

Then you basically just take the URL in JavaScript and split the part you want and then replace the URL that loads the embebed form to pass the UTM tag of the initial website , then add this script before </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等，等等；

Υou can add more fields but you need first to get them (check above) and then adjust the new url line, it would be typeformWidget.attr('data-url')+'?source='+utm_source+'?medium='+utm_medium etc. etc.;

Github for the脚本

这篇关于捕获传入的URL参数&传递给div的"data-url"属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！