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

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

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
1 hour ago, TinyEasy said:

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?

@TinyEasy Yep! As long as the value of the MAX variable is greater than 1, it'll set random numbers between 1 and the MAX value.  

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

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. 

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

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.