How to pass UTM variables in custom html block?

  • 23 August 2019
  • 4 replies
  • 88 views
K
Badge

I am using Stripe Checkout (client side) to run purchases through stripe for a test. Stripe allows me to configure the success page URL after a successful transaction takes place. However, I want to pass UTM variables from my purchase page to that success page: specifically, email, name and patient relationship (p_relation).

Because those will obviously be different for each person, I need my custom html block to append these variables to the success page URL in the html block.

Currently, dynamic text won’t work for custom html blocks (!!) so I desperately need a work around…

Here’s the code I’m using for my purchase button:

image

Anyone implemented something like this?

Thanks in advance!!
Kirsti

4 replies

Hristian
Userlevel 7
Badge +3

Hi @kirstihegg,

You can grab the UTM parameters with JS and append them to your success URL but where are you getting the “email, name and patient relationship”?

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
K
Badge

They are coming in on the page url.

Thanks!

Kirsti

K
Badge

I also neglected to mention this piece of code I figured might help out (but as a non-coder, I’m not entirely sure how to implement it within UB… https://www.sitepoint.com/get-url-parameters-with-javascript/

Luis_Francisco
Rank
Userlevel 3
Badge +1

I think i have a way easier code for you that might help. Will require a little bit of coding knowledge though…

  1. Make sure Jquery is added to your page.

  2. Add the following script:

<script>  
    $(document).ready(function(){

    // REGEX to Parse URL Queries
    function url_query( query ) {
        query = query.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var expr = "[\\?&]"+query+"=([^&#]*)";
        var regex = new RegExp( expr );
        var results = regex.exec( window.location.href );
        if ( results !== null ) {
            return results[1];
        } else {
            //falback in case its empty
            return "empty";
        }}

    // Example usage - /?email=luis.francisco@unbounce.com&tag=DesignTrack
    var e = url_query('email'); //variable e would fetch the value of 'email' url parameter 
              
        });
    </script>

  1. Replace the url_query(‘email’) to whatever is your utm parameter.
    For example: url_query(‘name’)

  2. Now you can use the variable you defined (e in this case) where you want to use the url parameter value.

Let me know if this helps 🙂

Reply


Terms & ConditionsCookie settings