Transfer UTM to a page button

Community resources General
1

Hello,

How do I get a button to include the UTM parameters when a client lands on the page from an ad?

For example, I have people directed to our landing page from a Facebook add.

When a client lands on the page, their browser gets a URL like so:

bsns . com/landing-page?utm=fromFB

On the landing page, there’s a button. I would like the link that clicking the button loads to also include the query parameters from the landing page, e.g.

bsns . com/ button-load-page?utm=fromFB

Is this even possible?

I’ve been able to capture UTM query parameters into hidden form fields, but I don’t see how I can add custom code to generate the button’s “Link URL”

Thank you!

2

Hi Patrick, <button> elements do not support a src, but if you’re referring to an <a> link element that is styled as a button, then Sygnal’s Attributes supports that;

3

Thanks, but I don’t think that addresses my situation.

4

It does exactly what you asked for above, which is to transport your UTM querystring parameters thorough into link URLs.

Much easier than writing your own custom code.

5

from: https://attr.sygnal.com/webflow-url/url-query-params-passthrough

For all links on your page, WFU will modify the link’s href , depending on what you request.

@memetican

I do not want “all links” on my page affected. Just the one button.

Furthermore, I do not understand how it works, nor how to implement it given the reference links, so no thank you - I don’t implement solutions which I do not understand.

6

This did the trick. Turns out there are a couple copies of the button on the page, so I used a for-loop to update the href attributes on them all:

<script>
  let buttonLinkAll = document.querySelectorAll('a.button-name');
  for (let i = 0; i < buttonLinkAll.length; i++) {
    buttonLinkAll[i].setAttribute('href', 'button-load-page' + window.location.search)
  }
</script>

:confetti_ball::tada:

I used the browser dev tools to locate and inspect the button’s to find out their tag attributes and such, i.e. how I got the 'a.button-name' string.

The 'button-load-page' would gets added after the base domain, e.g.
bsns . com/ button-load-page?utm=fromFB

2 Likes