Example Implementation

Build the Rule

When you have added the JavaScript to a site, as shown in the example page, you can configure a feature rule.

To configure a feature rule in the Admin console, complete the following steps:

1. Select Products from the main menu
2. Select Features from the menu options

   The Features screen displays.

3. Select the Add a Feature button

   The Add a Feature screen displays.

4. Complete the Add a Feature screen as follows:
   1. Enter a name for the Feature in the Title text box
   2. Optionally, add a description of the feature, using no more than 100 characters, in the Description text box
   3. Select the HTML radio button from the Types of Integration options
   4. Select the Continue button to create the Feature

   The Developer Interface screen displays.

5. Complete the Developer Interface section to configure the type of integration as follows:
   1. Select the Run In Browser radio button from the Where to Run options
   2. Enter a CSS Selector for the feature in the CSS Selector text box, as illustrated below:

      

   3. Define JSON paths that could be used to make decisions in the rule. The JSON paths should match the JSON object that is passed as custom data. Click Add A JSON Path to add a JSON path. Available data types are String, Number, Boolean, and DateTime. You can later create Custom Data decisions based on the JSON Path defined here.

   4. Select the Update & Lock button. Selecting the Cancel button closes and locks the Developer Interface without making changes

      Note: If you return to an existing feature, the Developer Interface section is locked by default and located at the bottom of the page. You can unlock and open the Developer Interface section by clicking inside the border.

      The rules canvas section displays.

6. Create a basic rule to test the integration as follows:
   1. By default, the Anonymous user journey is selected, select Outcomes from the decision bar
   2. Select Add Outcome from the listed decision points

      The Add an Outcome screen displays.

   3. Enter a name for your Outcome in the Title text box
   4. Optionally, add a description of the outcome in the Description text box
   5. Select the Add a New Form Or Custom Component Block button
   6. Select the Add Custom Component Block button

      The Custom Content Block dialog box displays.

   7. Enter a name for the custom content block in the Title text box
   8. Enter a message in the large text box, as illustrated below:

      

   9. Select the Save button

      The Add an Outcome screen displays.

   10. Select the Save button to save your Outcome

   Your new outcome is added to the palette, with the title you entered.

7. Drag your outcome to the rules canvas
8. Connect your outcome to the Page View node
9. Scroll to the bottom of the screen and select the up arrow next to the Save button
10. Select Save and Publish

Test the Rule

To test the rule, complete the following steps:

1. Open the page you created in a browser

   For example, the provided example page.

2. Open the Console log

   To open the console log, complete the following steps:

   1. Right click in the browser

      The context menu for the browser displays.

   2. Select Inspect from the context menu options

      The Inspection frame opens.

   3. Select Console from the main menu of the Inspection frame

      The Console log displays in the Inspection frame.

3. Refresh your browser

The console log updates as illustrated below:

Augment Your Decision Data

With this integration, you can add a custom data argument in the run command. This can be used in a Zephr feature to determine a customer’s journey.

The following example determines whether a user has Ad Block running on their browser:

document.addEventListener('DOMContentLoaded', (event) => {
zephrBrowser.run({
  cdnApi: 'https://{zephr-cdn-url}',
  customData: {
    hasAdBlock: true
  }
});
        });
        

As you can see, the user does have Ad Block running.

This information is passed to the custom object. You can use the Custom Data Node in your Zephr Feature Builder to make a decision based on the response as follows:

1. Navigate to the relevant feature
2. Select Content from the decision bar
3. Drag the Custom Data decision point to the rules canvas

   The Custom Data dialog box displays.

4. Select the object that you want to query from the Property Name options

   In our example, we select hasAdBlock.

5. Select the condition from the Condition drop-down menu

   In our example, we select Contains.

6. Enter the value to search for in the Value text box

   In our example, we enter true.

   The Custom Data dialog box with our selections is as illustrated below:

   

7. Select the Save button

Your rule now includes branches for the following user journeys:

• Using Ad Block
• Not using Ad Block