How to Display offers with Interact on a page which does not have server-side programming control

Interact helps marketers to be competitive and allows the users to present the right offer to the proper recipients at the right place. Sometimes marketers need to present offers on a page where they may not have server-side programmatic control over the page display (as you would with, for example, PHP or another server-based scripting). We offer a simple solution to deal with this use case. Marketers can use Interact’s JSConnector, whereby users can embed JavaScript code in the page content that will be executed by the visitor’s web browser.

What is JSConnector?

JSConnector acts as a service that integrates JavaScript code on the client-side by calling the Interact Java API.
The Interact JSConnector provides a service on the Interact runtime server that allows JavaScript code to call the Interact Java™ API. This enables web pages to make calls to Interact for real-time offer personalization using only embedded JavaScript code, without having to rely on web development languages (such as Java, PHP, JSP, and so on). For example, you might embed a small snippet of JavaScript code on each page of your web site that serves offers recommended by Interact. Therefore, each time the page loads, calls are made to the Interact API to ensure that the best offers are displayed on the page for the visitor.

Where is it available:
JSConnector comes built-in as part of the Interact Runtime Web application (post Interact version 8.1).  It can also be deployed separately as its own web app, configurable to communicate with the remote Interact Runtime instance.

In addition to the web app, there is a configuration directory that will contain all the configuration files used to manage the behavior of the JSConnector.  For convenience purposes, the web app comes with a web page that will help administer most of the features available in these configuration files ( https://host:port/<interact>/jsp/WebConnector.jsp )

Inbuilt JS Connector :

If you are relying on the JSConnector service that is built in to the Interact, then the only thing that needs to be done is to set two Java properties at the start-up of the app server that will tell the system where the JSConnector root directory (that contains the conf data) resides on the file system.

-DUI_JSCONNECTOR_HOME=<jsconnectorHome> [For e.g. -DUI_JSCONNECTOR_HOME=E:\u101\Interact\jsconnector]

-DUI_JSCONNECTOR_ENABLE_INPROCESS=true

Demonstration with test data :

1. Create an Interactive channel “IC_web” and mapped customer audience table
2. Create a zone ‘Z1’ and an interaction point ‘IP1.’
3. Create two events “present” as contact and “accept” as accept event
4. Create a new session and add an interactive flowchart
5. Add Interaction PB, decision PB (only one branch as all records) and Populate Seg PB (Segment name is “Allseg”)
6. Go to the campaign setting and add offer attributes (AbsoluteLandingPageURL as a string, TREATMENT_CODE as a string, TextVersion as string and AbsoluteBannerURL as string)
7. Create an offer template and all attributes
8. Create a new offer

Webconnector_Offer

• AbsoluteLandingPageURL – https://www.spain.info/
• TREATMENT_CODE – 1
• TextVersion – 12
• AbsoluteBannerURL – https://www.map-of-spain.co.uk/maps-of-spain/spain/map-of-spain2.jpg
• 9. Create a new campaign and add an interaction strategy. Add “Allseg” smart segment and assign Offer (Webconnector_Offer)
• 10. Deploy the Interactive channel.

Configurations in JS Connector

A. Navigate to /jsconnector/conf directory, and edit jsconnector.xml file.

jsconnector.xml

B. Copy the attached WebConnector_TestPage.html in the local directory.

Edit WebConnector_TestPage.html and set the correct URL for unicaWebConnectorBaseURL

WebConnector_TestPage

C. Restart the application server.

D. Open the WebConnector URL

https://<interacr runtime host:port/interact/jsp/WebConnector.jsp

E. Click on Basic Settings (these settings should be picked up from jsconnector.xml, so no need to change anything here. Just make sure the URL and IC name are correct).

F. Setting for Most Interaction Point (The HTML Element ID should be the name of the HTML file that we created for testing)

G. Click on “Rollout the changes” and click on “Generate the finished configuration XML.”

It should give a pop up as “Your configurations were saved successfully,” and jsconnector.xml should get updated.

H. Click on Enhanced Pages > Click on WebConnector_TestPage.

I. Fill the information on Interaction Points (offer display locations) on this page or set of pages.

Here IP1 should be IP name picked up from jsconnector.xml and the name of the IP from your IC.

J. Click on basic settings and Select events.

The three drop-downs should list the events from your IC. Again, these values are picked up from jsconnector.xml

K. In HTML Display types, we are using Image_Banner_Link.flt

L. Click on “Roll out the changes.”

Test for jsConnector

1. We are using following jsconnector url

https://<interacthostName:PortNumber>/interact/jsp/jsconnector.jsp

2. Click on the Reload Configuration link. It should display the message as “Configuration reload successful”.

3. Set URL: https://<interacthostName:PortNumber>/WebConnector_TestPage.html

Session Cookie name: SessionID

SessionId Value : 123

VisitorID : CustomerID

Visitorid value: 10001

4. Click on Execute PageTag

5. Click the OK button on the Popup.

6. The offer Image should be displayed. This is set in the field ‘ AbsoluteBannerURL’ while creating offers.

This is treated as Offer Contact.

7. Click on the image. Users should navigate to the web page set in the field ‘ AbsoluteLandingPageURL.’

This is treated as offer Accept.

Conclusion:

The JSConnector is used to design web pages and capture customer responses on the page, which may not have server-side programmatic control over the page display. These responses [offer accept/reject/contact] from the customer are captured and inserted into the staging tables of interact. With the normal ETL process, this data gets transferred into the campaign history tables and then used for reporting and for the interact learning functionality.