Skip to main content

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!

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 👍🏽


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