Jump to content

Assign random hidden value in form field for A/B testing

Go to solution Solved by jpeter,

Recommended Posts

Site URL: https://www.tinyeasy.co.nz/free-tiny-house-plans

Hi Squarespace community!

I am trying to create an A/B split test campaign using customer journeys on Mailchimp following this blog's advice: https://meetedgar.com/blog/hacked-mailchimp-ab-test-automated-campaigns/

I currently run a landing page for my company, advertising a free product which signs potential customers up to our e-mail flow. The sign up button uses a classic light boxed form block to collect the user's information.

In order to successfully split test our e-mail campaign I need to assign a value, let's say "1" to 50% of the users that sign up, and another value "2" to the other 50% of the users to sign up, which will give me the freedom to split test my e-mail flows automatically. I understand how to add one fixed value "hidden field" within a formblock, but can I use custom code to assign variable values by chance? E.g. 50% of the users are assigned to one value, and 50% are assigned to the other?

You can find the landing page here: https://www.tinyeasy.co.nz/free-tiny-house-plans

I look forward to hearing your comments,

Till

Link to comment
  • Solution

@TinyEasy

You can add the following javascript code below using Code Injection. When a user lands on the page,  the code will run and add a random value of either 1 or to the hidden field whose name is SQF_3FREEPLANS.

Javascript

(function(){
  // Configuration
  var MAX = 2;
  var FIELD_NAME = 'SQF_3FREEPLANS';
  
  // Execute code
  if(document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', randomizeFieldValue);
  } else {
    randomizeFieldValue();
  }

  function randomizeFieldValue(){
  	var randomNumber = Math.floor(Math.random() * MAX) + 1;
    var hiddenField = document.querySelector('[name='+ FIELD_NAME +']');
	hiddenField && (hiddenField.value = randomNumber);
  }
})()

Make sure to place the javascript code between <script> tag e.g.:

<script>
  // Add JS Code Here
</script>

 

Edited by jpeter
Account for code placement in header or footer
Link to comment
16 hours ago, jpeter said:

@TinyEasy

You can add the following javascript code below using Code Injection. When a user lands on the page,  the code will run and add a random value of either 1 or to the hidden field whose name is SQF_3FREEPLANS.

Javascript

(function(){
  var MAX = 2;
  var randomNumber = Math.floor(Math.random() * MAX) + 1;
  var hiddenField = document.querySelector('[name="SQF_3FREEPLANS"]');
  hiddenField && (hiddenField.value = randomNumber);
})()

Make sure to place the javascript code between <script> tag e.g.:

<script>
  // Add JS Code Here
</script>

 

Hi jpeter, thank you for your quick reply, that looks exactly like what I've been looking for! Thank you so much. 🙂 Do you think the code would also work if I was to change "var MAX = 2;" to "var MAX = 4;" in order to assign a value between 1-4 instead of just 1-2? This would give me additional freedom with my split testing campaigns and run 4 sequences at the same time rather than just 2.

I can't wait to hear what you think.

Thanks again,

Till

Link to comment

Hi @jpeter!

I have just tested the script finally, but it doesn't seem to be changing anything unfortunately.

Any ideas why it's doing that?

 

I have tried inputting different values into the Value field in the form block configuration or just leaving it completely empty, but that doesn't seem to make it work either.

If I input a value, e.g. "1", it always sends through this number, and if I leave it blank, no value at all is received.

I look forward to hearing from you if you have any ideas,

Thanks a lot,

Till

Link to comment
26 minutes ago, TinyEasy said:

Hi @jpeter!

I have just tested the script finally, but it doesn't seem to be changing anything unfortunately.

Any ideas why it's doing that?

@TinyEasy I'm not seeing the code on the page, however my guess is it may have been added to the wrong spot; the Header, instead of the Footer.  I would make sure you add it to the Footer when using code injection. See article https://support.squarespace.com/hc/en-us/articles/205815908-Using-code-injection#footer. It's a best practice to place any javascript code in the Footer. 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.