How to Fire Pixels and Events Based Specific Conditions

Introduction:

  • LeadsHook provides a great UI for creating your Decision Trees. There are countless features that makes server side scripting easy.
  • Additionally, power users might be glad to know that it’s also possible to go low level and use any HTML/CSS/JS that you might like.
  • In this example we will be showing you how to create a script that fires an event based on the answer a user has provided.

Step 1: First drag a question node onto the canvas. It will open for editing automatically.

Step 2: Give it a title, In this example we will be specifying the question as “Are you male or female?”.

Step 3: Select the type of node you want. Any type that specifies a one word answer will work for this example. So lets try using a multiple choice node type. Its located up the top right hand corner.

Step 4: Next assign a custom field and provide answers. The blue “Add Answer Custom Fields” button in the bottom left is where you do that. For example:

Step 5: Now we need to add the script. In the bottom right hand corner you will see the node level script button. Click on that and setup your script like so:

Its important that we set the event to fire on ‘exit’ of the node. Because on ‘enter’ the answer will be blank.

For you convenience here is the script to copy/paste

<script>
  
  if('{_c_answer}'=="Male"){
  	alert("You selected Male!");
  }
  else{
  	alert("You selected Female!");
  	}  
  
  
</script>

The {_c_answer} custom field will evaluate as the choice the user has taken. So you need it to equal an answer. In this case its “Male”.

Simply replace the debugging code ( alert or log ), with the code you want to fire. This can be any valid JavaScript code.

For example – here’s how you would fire a FB standard event if the answer is “Male”. No tracking occurs if the answer is anything else.

For your convenience here is the code to copy/paste:

<script>

  if('{_c_answer}'=="Male"){
    
    //Fire custom FB Event
    fbq('track', 'ViewContent', {
     content_name: '{_c_dt}',
     content_category: '{_c_node}',
     content_ids: ['{_c_question}'],
     content_type: '{_c_answer}'
    });
  }
  else{
  	//Nothing
  	}  

</script>

Step 6: Remember to publish and access via direct link/embed ( because scripts don’t fire on preview ). And you are Done!

You can see this working here:

https://test2.leadshook.io/survey/1m7WmqBo7Sf12N4BucO9SBVROUStCxj3B10d6IPg

As requested by our Facebook group, here’s a complex example with multiple if/else statements combined with answers stored in previous nodes.

Multiple nodes look like this:

Note that each node stores the answer in a custom field. LH custom fields can be used almost anywhere ( even in scripts! )

<script> 
if('{_c_answer}'=="Male" && '{age}' < 50 ){

    //if Male and less than fifty
    console.log( "Male and under fifty");
  
    //Fire custom FB Event
    fbq('track', 'ViewContent', {
     content_name: '{_c_dt}',
     content_category: '{_c_node}',
     content_ids: ['{_c_question}'],
     content_type: '{_c_answer}'
    });
  }
else if('{_c_answer}'=="Female" && '{age}' < 50 ){
    //if Female and less than fifty
    console.log("Female and under fifty");
  
    //fire event here
}
else{
    //everyone over fifty of any gender
    console.log("everyone over fifty any gender");
}
</script>

You can see the debug log in the browser console prove its working.

Like in this example here: https://test2.leadshook.io/survey/GgMMxMLDMpuzcv2n43zJjVqj1qgXiOVuBJfFcvsW

Tagged: