Script Helper In Web Journey Manager

Overview

The Script Helper is for users who are not JavaScript experts and want to execute a script as a step in the Web Journey Manager. Essentially, the user navigates through a set of actions and those actions are translated into JavaScript in real-time. That script can then be copied and tested on that step. Download the Web Journey Manager here.

To access the script helper, add a step or edit an existing step to change the action to Execute.

Select execute in the Action options to start using the Script Helper.

Turn on the Script Helper button and perform any action on the screen and a script will begin to form. When the Script Helper is on, you cannot navigate to other pages.

Turn on the Script Helper to start generating JavaScript

Once the Script Helper button is turned on, the option Event Listeners will also be available for selection. In addition to the JavaScript, this will display the code generated by the chrome engine as it listens for key events such as a click, pressing a key, etc.
Deleted:

This option displays the code of the chrome engine as you perform actions
As you perform actions, this is where you will start to see the script appearing

Example

Script Helper

Use the script helper to generate the code for entering an email into a contact form. Starting on the contact page jpstyle.us/contact:

  1. Add a new execute step
  2. Turn on the script helper
  3. Click in the email field
  4. Fill in your email

The email field is filled in and the following code will appear in the Script Helper box:

var win = window;<br> var doc = win.document;<br> var element = doc.querySelector('#edit-submitted-email');<br> element.click();<br> var element = doc.querySelector('#edit-submitted-email');<br> element.value = "john.smith@gmail.com";

Script Helper and Event Listener

  1. Add a new execute step
  2. Turn on the script helper
  3. Turn on the event listener
  4. Click in the email field
  5. Fill in your email

The email field is filled in and in addition to the script that showed up previously you will also see:

<br> var win = window;<br> var doc = win.document;<br> var element = doc.querySelector('#edit-submitted-email');<br> element.click();<br> var element = doc.querySelector('#edit-submitted-email');<br> element.value = "john.smith@observepoint.com";<br> var element = doc.querySelector('#edit-submitted-name');<br> element.dispatchEvent(new Event('focus', { bubbles: true }));<br> element.dispatchEvent(new Event('select', { bubbles: true }));<br> element.value = "John Smith";<br> element.dispatchEvent(new Event('input', { bubbles: true }));<br> element.dispatchEvent(new Event('keydown', { bubbles: true }));<br> element.dispatchEvent(new Event('keypress', { bubbles: true }));<br> element.dispatchEvent(new Event('keyup', { bubbles: true }));<br> element.dispatchEvent(new Event('change', { bubbles: true }));<br> element.dispatchEvent(new Event('blur', { bubbles: true }));<br> var element = doc.querySelector('#webform-client-form-2045 > div');<br> element.dispatchEvent(new Event('mouseover', { bubbles: true }));<br> element.dispatchEvent(new Event('mousemove', { bubbles: true }));<br> element.dispatchEvent(new Event('mousedown', { bubbles: true }));<br> element.dispatchEvent(new Event('mouseup', { bubbles: true }));<br> element.click();<br>

Copy the code into the Script box and click Test Code to run that step on your page. If the script isn't working correctly, an error message will inform you to check your console. Check for syntax errors and try running the code in the console to see if it is identifying any elements on the page.

Select this option to run the script on your page.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.