How to Track Which Button Opens a Lightbox

If several buttons on your page open the same lightbox form, this script tells you which button a visitor clicked. It can record the button in your lead data and change the lightbox text with Dynamic Text Replacement based on the button.

See the demo page built in Unbounce.

This is community code, not an official Unbounce feature. Unbounce Support can't troubleshoot custom code. Test it on a published page before relying on it, and work with a developer if you aren't comfortable editing HTML, JavaScript, and CSS.

How it works

The script adds URL parameters to the lightbox URL when a visitor clicks a button. Unbounce already fills a form field with the value of a URL parameter that has the same name, and Dynamic Text Replacement can read the same parameters. Together, these let the lightbox know which button opened it.

Add the script to your page

1. Add the following script to the JavaScripts section. Make a note of the IDs of your lightbox buttons, since you add them to the script in the next step.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
/*
Unbounce Community :: Tips & Scripts :: Use DTR and Track Which Button Opens a Lightbox
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-322").click(function() { // Add Id of button
  var url = $(this).attr('href').split("?")[0];
  $(this).attr("href", url + params + character + "plan=Bronze"); // add parameters to pass through to lightbox
});
$("#lp-pom-button-323").click(function() { // Add Id of button
 var url = $(this).attr('href').split("?")[0]
 $(this).attr("href", url + params + character + "plan=Silver"); // add parameters to pass through to lightbox
});
$("#lp-pom-button-324").click(function() {  // Add Id of button
 var url = $(this).attr('href').split("?")[0]
 $(this).attr("href", url + params + character + "plan=Gold"); // add parameters to pass through to lightbox
});
$("#lp-pom-button-325").click(function() {  // Add Id of button
 var url = $(this).attr('href').split("?")[0]
 $(this).attr("href", url + params + character + "plan=Platinum"); // add parameters to pass through to lightbox
});
</script>

2. The script needs one block for each button. In each block, replace the button ID with the ID of one of your lightbox buttons.
3. In each block, replace plan=Bronze with the parameters you want that button to pass. You can use any parameter names and values. Separate multiple parameters with &, for example "plan=bronze&param=value&param2=value2".
4. In your lightbox form, add a field whose ID matches each parameter name. This example uses a field with the ID plan. For Dynamic Text Replacement, make sure the parameter assigned to the text matches the one you set in step 3.
5. Save and republish the page.