Generate UTM parameter to button click

  • 25 June 2019
  • 2 replies
  • 216 views
J

Hello,

I have a a number of pages and variants that each use multiple popup forms. Each page and variant has its own popup which is becoming too difficult to manage. However, I need to track which page variant the user converted on and pass this info into Hubspot as a hidden field using UTM tags.

Is it possible to have one popup for for all pages and variants, but capture information via a UTM tag generated on the button click?

(For clarity, I am not using UTM tags when directing traffic to a page, so i do not need to pass UTM data through to the form.)

Thanks for your help!

2 replies

Finge
Userlevel 6
Badge +4

Hi @Jasha. There should be a way to do this. You will need to apply a script to the page that helps you identify the button that was clicked.

<script>TS:0002-04-057
***********************
Do not remove this section. It helps our team track useage of external workarounds.
*/	
	
  var params = window.location.search;
  var character = "&";
  if (params == ""){
	character = "?";	
  }
$("#lp-pom-button-939").click(function() { // Add Id of button
  var url = $(this).attr('href').split("?")[0];
  $(this).attr("href", url + params + character + "utm_source=NAMEOFPAGE"); // add parameters to pass through to lightbox
});
  
$("#lp-pom-button-937").click(function() { // Add Id of button
 var url = $(this).attr('href').split("?")[0]
 $(this).attr("href", url + params + character + "utm_source=NAMEOFPAGE"); // add parameters to pass through to lightbox
});
  
$("#lp-pom-button-938").click(function() {  // Add Id of button
 var url = $(this).attr('href').split("?")[0]
 $(this).attr("href", url + params + character + "utm_source=NAMEOFPAGE"); // add parameters to pass through to lightbox
});    </script>

Replace button id to match buttons on your page. In this case above you have 3 buttons identified. I think you can also add a second paramter so you have both page name and variant. Please note that I have not tested adding 2 parameters myself.

$("#lp-pom-button-938").click(function() {  // Add Id of button
     var url = $(this).attr('href').split("?")[0]
     $(this).attr("href", url + params + character + "utm_source=nameofpage&utm_medium=variant-a"); // add parameters to pass through to lightbox

Then on your popup create 2 hidden fields 1) utm_source and 2) utm_medium. The values from the script would then be added from the button click.

I would perhaps not use utm_source and utm_medium but other parameters instead, but this is up to you and your logic.

Script was provided to me by my good friend @Hristian 👍🏽

Finge
J

Hi Finge,

Thank you so so so much for the effort you put into your reply. I really do appreciate it.

But, I have found a work around that’s a bit more simple (which means I’m less likely to break something)

I created a new page that contained the form as it appeared in the existing popups. I added some hidden UTM fields to this form so I could capture which button was clicked. I then set the buttons on the primary page to open the new “popup” with UTM’s attached in a lightbox.

I also tested adding UTM parameters to the primary page, and checking the “Pass parameters” checkbox on the button. Turns out you can “stack” the UTM parameters so that I could capture campaign and button info in the form submission.

Thank you again for your help.

Cheers
Jasha

Reply


Terms & ConditionsCookie settings