Path Analyzer X-Files: How We Built the Ultimate xDB Forensic Tool

Path Analyzer X-Files

Presented by:Adam Weber & Alex ShybaTeam X, Sitecore

How We Builtthe UltimatexDB Forensic Tool* In 100% JavaScript. Really!

© 2001-2016 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

#Sitecore SYM

3

1. Product Intro (Alex).

2. How we built it (Adam).

3. What other cool stuff you can do?

4. Q&A

Agenda

What is Path Analyzer?

• Forensic tool for a digital analyst.

• Focus on sequence analysis of xDB data.

• Data engine + two apps (viz).

• Available since Sitecore 8.

Why Path Analyzer?

• Understand behavior of your contacts.

• Spot bad behavior and eliminate it.

• Find optimization opportunities.


#Sitecore SYM

6

Interactions in xDB

PageRegister.aspx

Interaction

Pages

Page Event / Goal

A ‘register’ goal is fired

Home, Login.aspx, Register.aspx

Engagement Value


#Sitecore SYM

7

1. Home -> (exit)value = 0

2. Home -> Products -> Specials -> Demovalue 100

3. Home -> About -> Newsvalue = 0

4. Landing -> Products -> Demovalue 100

How it works in nutshell

RootVisit: 1Value: 0Value per visit: 0

HomeVisit: 1Value: 0Value per visit: 0

RootVisit: 2Value: 100Value per Visit: 50

HomeVisit: 2Value: 100Value per Visit: 50

ProductsVisits: 1Value: 100Value per Visit: 100

SpecialsVisits: 1Value: 100Value per Visit: 100

DemoVisits: 1Value: 100Value per Visit: 100

RootVisit: 3Value: 100Value per visit: 33.33

HomeVisit: 3Value: 100Value per visit: 33.33

ProductsVisits: 1Value: 100Value per visit: 100

SpecialsVisits: 1Value: 100Value per visit: 100

DemoVisits: 1Value: 100Value per visit: 100

AboutVisits: 1Value: 0

NewsVisits: 1Value: 0

RootVisit: 4Value: 200Value per visit: 50

LandingVisit: 1Value: 100Value per visit: 100



HomeVisit: 3Value: 100Value per visit: 33.33


SpecialsVisits: 1Value: 100Value per visit: 100


AboutVisits: 1Value: 0

NewsVisits: 1Value: 0


#Sitecore SYM

8

• Ditched Silverlight!

• Completely re-worked FE.

• Reworked UX (user tested).

• Built-in Marketing Funnels.

• More approachable:

• Built-in help w/ GitHub sync• New dashboard• New visualizations• New filters

What’s in 8.2?

Demo time – quick product demo. Diapers & Beer.

How we built it

100% JavaScript. Completely stand-alone. Completely new stack.

React.js – for rendering

Redux.js – for application state management

D3.js – for visualization

Webpack – for dev workflow


#Sitecore SYM

11

Modules

Classes

let + const

Arrow functions

New data structures

Async/await (async programming)

Etc. etc. etc.

Modern JavaScript ES6 and 7


#Sitecore SYM

12

Just the “V” in MVC, and doing it well

Component basedDeclare components in XML-like syntax - JSX (XML -> JS)

Fast and intuitiveVirtual DOM, best practices checks, performance tools.

Vibrant open source ecosystemBuilt and used by Facebook/Instagram and embraced many.

What is React.js and why we chose it


#Sitecore SYM

13

class MyComponent extends React.Component {

render() {

return (<h1>Welcome to {this.props.event}!</h1>);

}

}

------------------------------------- usage -----------------------------------

<MyComponent event="Symposium 2016" />

// props – immutable data// state – mutable data// rendering lifecycle functions

The unit of React.js – a component


#Sitecore SYM

Sidebar

14

Redux – “Flux” architecture implementation.

Button state: ‘on’

Container

Menuif (button.state === ‘on’) {

menu.visible = true;

}

Action Reducer Store


#Sitecore SYM

15

Data to DOM

Extremely rich API

Powerful data layouts

Battle-tested

viz. by Ken Penn

D3.js – THE standard for data visualization


#Sitecore SYM

16

1. Builds Uglification (minification)

“Transpilation” via BabelJS

Bundling

Dev/prod replacements

2. Dev web server With hot reloading

Using Webpack for blissful dev workflow

Demo time – how it’s built

Next steps/Resources

18

What to do• Check out both react.js and redux.js.

• Check out D3.js for anything viz. related

• Build something with it!

• Try out the new Path Analyzer in 8.2

• Send feedback to [email protected] directly


#Sitecore SYM

19

siteco.re/pastudy

Path Analyzer User Study


UX studies at Symposium’s Product Usability Meeting Room –Strand 7, 2nd floorStudy name Study Description Who How Duration

Campaign management usability study

Provide feedback on future designs of the campaign management experience

Marketers Usability study 45 minutes

Feedback on our partner personas

Help us build up our understanding of the digital strategist, solution architect, and project manager roles so we can better meet your needs

Digital strategists, Solution architects and Project managers

Interview and short validation exercise

30-45 minutes

Build your own SitecoreLaunchpad

Help us design a Launchpad that fits your needs

Anybody using the SitecoreLaunchpad

Usability study 30

Marketing automation Provide feedback on future designs of the marketing automation experience

Marketers Usability study 30-45 minutes

Sitecore End User Council Sign up for the Sitecore End User Council to participate in usability studies, surveys, interviews so you can impact the product

Anybody Online survey 5-10 minutes

20

Thanks! Questions?

@aweber1

@alexshyba

FOR DISCUSSION PURPOSES ONLY. SitecoreConfidential and Proprietary. © 2016 SitecoreCorporation A/S. All rights reserved. Sitecore®

and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All

other brand and product names are the property of their respective owners.

Technology

Path Analyzer X-Files: How We Built the Ultimate xDB Forensic Tool