Захватить входящие параметры URL и передать в атрибут "data-url" div

Question

В настоящее время мы используем форму, встроенную в наш сайт. Весь трафик, направляемый на наш сайт, приходится на кампании cpc, поэтому точное отслеживание конверсий в GA необходимо, чтобы мы могли точно отслеживать рентабельность инвестиций.

Здесь проблема. При отправке кампаний cpc непосредственно на URL-адрес typeform отслеживание GA было точным. После встраивания формы шрифта в наш сайт отслеживание GA показывает, что рефералом является наш сайт, а не Google или Bing cpc.

Не делая этот пост слишком длинным, мне нужно иметь возможность собирать параметры кампании (utm source, utm medium и т. Д.) В URL и вводить эти данные в атрибут "data-url", расположенный в div.

Прямо сейчас это код, который у меня есть:

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

Answer 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)

Answer 2

Классы и имена изменились в последних версиях Typeform, вот как я заставил его работать.

Вам нужно будет загрузить jQuery, эту или последнюю версию:

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

Затем вы просто берете URL-адрес в JavaScript и разделяете нужную часть, а затем заменяете 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 для скрипта