Pass URL Parameters to Button

John_Mooney · August 20, 2020, 10:33pm

Hi Everyone,

New to the forum here. Trying to figure out how I can bring down URL parameters and pass them through to a button that re-directs to another site. I’ll be running marketing campaigns and want to capture the source of traffic in a non-Webflow form submission.

Example: An ad I run on Facebook sends people to www.example.com/home?utm_source=facebook&utm_medium=social

I’d like my Webflow page to store a source variable of ‘facebook’ and a medium variable of ‘social’, then if a user clicks a button a button on the Webflow page, it would append those values as parameters on a redirect URL, such as www.typeform.com/12345?source=facebook&medium=social

If someone came to my site via twitter, they might land on www.example.com/home?utm_source=twitter&utm_medium=social, and clicking the button would take them to www.typeform.com/12345?source=twitter&medium=social

I’ve seen a lot out there about passing URL parameter data into hidden fields on a Webflow form, but I’m using a different form tool that I want to pass that data into.

Any help is greatly appreciated!
-John

VinM · August 23, 2020, 2:46pm

@John_Mooney, you could try running a script when the page loads. This script would:

Unpack the parameters from the URL
Here’s a link that has a few lines on this. You could likely try this to get the values of the utm_source and utm_medium parameters.
How to Get URL Parameters with JavaScript - SitePoint

Edit the button link by appending parameters to the end
I believe something like this would work:

 // get the link element        
 var myLink = document.getElementById("id-of-the-button-link");

 // edit its href property by appending the parameters
 myLink.href += "?source=" + sourceParameter + "&medium=" + mediumParameter;

 //check
 console.log(myLink.href);

This assumes that:

Your button is actually a link (and not an HTML form field button)
Your URL parameters and values are generally free of punctuation – if they might have spaces or other punctuation, you may need to add some code to ensure that’s handled correctly

Hope this is helpful.

John_Mooney · August 24, 2020, 6:08pm

Thanks so much @VinM!

John_Mooney · August 24, 2020, 7:25pm

@VinM thanks again for your help. I was able to get it working using your recommendation. For anyone else out there looking to do something similar, here was my approach:

From page settings, I input the following custom code before the body tag

<script>

        // create urlParams variable (constant) from URLSearchParams class using current window
           const urlParams = new URLSearchParams(window.location.search);
          
        // set UTM medium, source and campaign variables (constants) based on results of URSearchParams
           const utm_medium = urlParams.get('utm_medium')
           const utm_source = urlParams.get('utm_source')
           const utm_campaign = urlParams.get('utm_campaign')

        // get the RSVP button element
           var rsvpLink = document.getElementById("rsvp");

        // edit RSVP button element property by appending the URL parameters
           rsvpLink.href += "&medium=" + utm_medium + "&source=" + utm_source+ "&campaign=" + utm_campaign;

        // log final RSVP button link to console
           console.log(rsvpLink.href);

</script>

From the button settings, I had to give it an ID of ‘rsvp’ which is called in the document.getElementById. I also had to properly set my parameter keys to fit with the structure of how my form tool allows pre-filled data.

VinM · August 24, 2020, 7:37pm

Hi @John_Mooney, I’m glad you were successful!

CrunchCreative · October 15, 2020, 5:14pm

Thanks @VinM and @John_Mooney for this! You folks are great

I’ve placed the script on the site I’m working on, tweaked it accordingly and set the button IDs… but it breaks the link on the live site I’m sure I’ve left out some tiny detail, but I’m hoping one of you might be able to assist by taking a look. If so, I’d be very grateful! I’ll DM you both with a link.

Thanks so much!!! Love this Webflow forum community, it’s the source of much of my Webflow knowledge and provides the solutions to many of my Webflow challenges!

Soul_Bird · July 6, 2021, 3:08pm

Were you able to solve the issue with the live site? if so, how?

John_Mooney · July 6, 2021, 6:16pm

@Soul_Bird I was able to get it working on my end using the code in my previous comment. Let me know if there’s anything I can do to help you get it working.

Soul_Bird · July 7, 2021, 11:49am

Hi! Thanks for your speedy reply.
I’ve tried the method suggested above.
But when calling the “console.log” I’m getting ‘undefined’ instead of the new my_button.href
Not sure what I’m doing wrong here

document.getElementById("my_button_id").href and page_my_button.herf have different values.

Before tag

<script type="text/javascript">

const page_urlParams = new URLSearchParams(window.location.search);

const page_session_token = page_urlParams.get('tkn');

var page_my_button = document.getElementById("my_button_id");
page_my_button.herf += "?tkn=" + page_session_token;

console.log(page_my_button.href);
</script>

Console:

console.log(page_my_button.href)
'undefined'

Gail_Ranger · July 7, 2021, 2:20pm

Error might be possible because of a typo…

Andrea_Montagnani · April 14, 2022, 3:18pm

I used your code and it worked like a charm! Thank you very much!
I have the same CTA on several buttons on my landing page, but this works only on the first CTA (because it looks for the ID). Is there a solution to include this in every CTA? I tried switching to the function getElementByClassName but it didn’t work

ChristopherGulliksen · May 14, 2022, 12:25pm

Hi Andrea.

I am looking for the same solution.
I have a lot of linkblocks on my site and I would them all to pass the UTM.

Can’t get it to work with the same ID and can’t get it to work with getElementByClassName

Shaolin69 · June 11, 2022, 1:14pm

Hi Chris, did you ever find a solution? I have the exact same problem, I need multiple buttons to get URL parameters and would like to use getElementByClassName, not getElementById…

Zhihao_Huang · July 15, 2022, 11:26am

Checking to see if you ever found a solution to this

Struggling with the same issue now, getelementby id works but now w class

letiesperon · July 28, 2022, 11:59am

I have another reusable solution if anyone is interested. The mechanism is the same, just a bit cleaner. It appends ALL search params, not just some.

In the example I’m attaching all search params to two buttons: one with id sign-in-btn and another with id sign-up-bnt.

<script type="text/javascript">
  window.onload = function () {
    const signInBtn = document.getElementById("sign-in-btn");
    appendUtmsToButton(signInBtn);

    const signUpBtn = document.getElementById("sign-up-btn");
    appendUtmsToButton(signUpBtn);
  };

  function appendUtmsToButton(button) {
    // Read utm params from url:
    const pageSearch = window.location.search;
    const urlParams = new URLSearchParams(pageSearch);

    // Build new params for the button combining the button' params with the utm:
    const buttonUrl = new URL(button.href);
    let newButtonParams = new URLSearchParams(buttonUrl.search);

    urlParams.forEach(function(value, key) {
      newButtonParams.append(key, value);
    });

    // Build new url for the button attaching the params:
	buttonUrl.search = "";
    const newSearchString = newButtonParams.toString();
    buttonUrl.search = newSearchString;
    const newHref = buttonUrl.toString();

    // Replace the button's url:
    button.href = newHref;

    // For debugging log final button link to console:
    // console.log(button.href);
  };
</script>

Charlotte_Cuddihy · August 8, 2022, 10:28am

Did you ever find a solution for this? I am having the exact same issue. It’d be great if you could help.

Thanks!

joshing · September 6, 2022, 5:07pm

Could you possibly elaborate on what the original pass-thru URL would be for this to work?

I believe I would need to change my button ID to sign-in-btn within Webflow UI, but what is the URL that this reads from? (Example: https://url.com/index?buttonUrl=https%3A%2F%2FnewURL.com)

Thanks for any help you can share

annawangler · October 19, 2022, 5:50pm

Here is the script changes that also works for GetElementsByClassName

<script>
        // create urlParams variable (constant) from URLSearchParams class using current window
           const urlParams = new URLSearchParams(window.location.search);
        // set UTM medium, source and campaign variables (constants) based on results of URSearchParams
           const utm_medium = urlParams.get('utm_medium')
           const utm_source = urlParams.get('utm_source')
           const utm_campaign = urlParams.get('utm_campaign')
        // get the RSVP button element
           var rsvpLinks = document.getElementsByClassName("rsvp");
        // edit RSVP button element property by appending the URL parameters
           for (let rsvpLink of rsvpLinks){
               rsvpLink.href += "?" + "&medium=" + utm_medium + "&source=" + utm_source+ "&campaign=" + utm_campaign;
           }
</script>

annawangler · October 19, 2022, 5:52pm

Here is the Script-Change to also make it work for GetElementsByClassName

<script>
        // create urlParams variable (constant) from URLSearchParams class using current window
           const urlParams = new URLSearchParams(window.location.search);
        // set UTM medium, source and campaign variables (constants) based on results of URSearchParams
           const utm_medium = urlParams.get('utm_medium')
           const utm_source = urlParams.get('utm_source')
           const utm_campaign = urlParams.get('utm_campaign')
        // get the RSVP button element
           var rsvpLinks = document.getElementsByClassName("rsvp");
        // edit RSVP button element property by appending the URL parameters
           for (let rsvpLink of rsvpLinks){
               rsvpLink.href += "?" + "&medium=" + utm_medium + "&source=" + utm_source+ "&campaign=" + utm_campaign;
           }
</script>

memetican · October 19, 2022, 7:38pm

You can use wfu- attributes to do that as well;