CODEWITHSUNDEEP
javascriptjquerygoogle-analytics
Kyle Strouse
Kyle Strouse

Reputation: 11

Capture incoming URL parameters & pass into a div's "data-url" attribute

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.

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.

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();

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.

Upvotes: 1

Views: 662

Answers (2)

Orestes
Orestes

Reputation: 11

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

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>

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>

Υ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 script

Upvotes: 1

Sam Battat
Sam Battat

Reputation: 5745

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

OR

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

The reason your code does not work is that == is used to compare equality usually used in if statements. To assign a value you use = but with jQuery you need to use the method to assign the value in this case .attr('attribute name', value) or the .data('name after the data-', value)

Upvotes: 1

Related Questions