Web Event Listener Graph Template

Owned by Atul Dattatray Bhujbal
12/07/2023
4 min read

This template provides out of the box Xponent web tracking combined with customer profile building. With LUDA (Listen, Understand, Decide, Act) in mind, this business logic focuses on the Listen and Understand steps with optional add-ons for returning web recommendations to the website in the same transaction. Xponent beginners should be able to set up this graph within 1 hour running in a production environment tracking page views, clicks and form submits.

Please see our Xponent Graph API Web Tracking article for details on Xponent Web Tracking.

Use the Web Event Listener graph template as the listen and understand section combined with the central HUB design (see here) to build a customer profile. The web tracking data is appended to a complete user profile allowing you to take advantage of the users' interactions across all channels.

Interaction Schema 
{
	"interaction": {
		"ts": "2017-01-01 00:00:00.000",
		"chanId": "1234-asdf-1234-asdf",
		"channel": "web",
		"direction": "inbound",
		"interactionId": "41234",
		"interactionType": "webEvent",
		"device": {
			...
		},
		"webtrack": {
			"_kw": {
				...
			},
			"tag": "",
			"url": "http://yourwebsite.com",
			"href": "",
			"tagId": "",
			"mouseX": "",
			"mouseY": "",
			"epochTs": "1434567876543",
			"tagData": "",
			"formdata": "",
			"kwCookie": "1234-asdf-1234-asdf",
			"referrer": "http://www.google.com",
			"winWidth": "412",
			"eventtype": "",
			"kwSession": "",
			"timestamp": "",
			"userAgent": "",
			"winHeight": "322",
			"scrollPctHor": "",
			"scrollPctVer": "",
			"kwFingerprint": "fdsa-4321-fdsa-4321"
		}
	}
}
Profile Schema 
{
	"profile": {
		"channelIdentifiers": [{
			"chanId": "",
			"cidType": ""
		}],
		"profileWeb": {
			"numPageViews": "",
			"lastSessionId": "",
			"numWebSessions": "",
			"product1Clicks": "",
			"product2Clicks": "",
			"product3Clicks": "",
			"favouriteProduct": ""
		},
		"profileCommon": {
			"pId": "",
			"email": "",
			"lastName": "",
			"firstName": "",
			"channelIds": ""
		},
		"profileTwitter": {
			...
		},
		"profileFacebook": {
			...
		}
	}
}


Package contents

  • Graph: 
    • Web Event Listener (async) – receives data sent to Xponent collected on a website and writes it to a queue for processing

 

    • Web Event (async) Queue Listener – processes data in the queue and determines whether a user profile exists. If not, create the profile and save web track event in the database
      • processWebEvent
        • refreshLookUps
        • filters
        • get/createCustomer
        • processWebTrackEvent
      • Schema Location:
        • {Schema}/transaction
        • {Schema}/profile
        • {Schema}/interaction

Setup 

  • Deploy the 'Webtrack (async) CDM' template to create all the required Xponent resources. 

  • To do this go to your project, click on 'Create' and select Webtrack (async) CDM from the  section.

  • At this time the graphs created from the template will be Invalid
    • You would need a valid database connection setup that has all the required tables of Xponent Common Data Model. At least two separate connections, one for development and other for production is advisable
    • You would need message queues to read and write messages. At least two separate connections, one for development and other for production is advisable
    • You can enter the above details or any additional connections in the Admin → Connections Tab. See here for more details

Using  

  1. Create any additional graphs that you need other than the 'Webtrack (async) CDM' graph template
    1. Open 'Web Event Listener (async)' and view the listener properties under 'Web Tracking & Recommendation'. See Web Tracking & Recommendation for more details
    2. Set the required levels of tracking
      1. Currently, the template handles views, clicks, form submit all with fingerprint, blur, and geolocation
      2. The noConflict option allows the user to either use their website's version of jQuery or to use Xponent version. In both situations though, both versions are loaded on the page and the option determines which one to use. If not on, then Xponent's jQuery is used. However, if it is on, then Xponent uses the website's jQuery.
    3. Copy the <script> tags (everything in grey) - this is to be added to your website's <head />
    4. Note the listener id will be different for each environment e.g. Dev, UAT, Prod

Tip: Ensure listenerHost uses the correct region: e.g. if using hub-eu.kitewheel.com, then use https://api-eu.kitewheel.com/api/v1/listener/{yourlistenerid}

 

Possible Issues

Things that are likely to go wrong:

  • The webtrack <script> has not been copied to the site properly, e.g. missing the second <script> at the bottom
  • An ad-blocker is blocking Xponent's js on the site
  • _kw.events are set to false when they should be true

Typical Deliverables Plan

Use this plan to agree the requirements from the Xponent User and your client/ brand

 Deliverables Plan
  1. KW user to deploy Web Tracking graph template and required environments
    1. Deliver webtrack snippet with listener IDs to the client to load into the header of their website
      1. Beware of minification
    2. The web administrator will have control over what events are tracked by changing _kw.events in the snippet
  2. Create SQL Assets:
    1. If using your own database
      1. KW user to create SQL assets
    2. If using the client's database
      1. Provide the SQL creation code above for the brand to create
      2. KW will need access to the database - see here for DB connections
  3. Data capture scope
    1. If the client wishes more data to be tracked such as particular page variables to be sent as part of the main packet then contact your Xponent account manager
    2. KW User to deliver if the client wishes more data to be derived by Xponent

Privacy Policy
© 2022 CSG International, Inc.