With OTTO Pathfinder we invented a great tool which offers the ability to interactively analyze paths.
The user has the possibility to filter paths, to drill certain nodes up to three levels of detail (e.g. from the assortment to the product or from page types to ever finer page names), to select the number of the displayed steps within the journey, to display only the paths of visitors of specific marketing channels and many more options.
Not only the absolute, but also the percentage occurrences of the paths are displayed (share of the current view, not share of total).
It is now possible to save different views (drilldowns and filters) in the webbrowser and reload them later.
A view that has been saved in the browser previously can be reloaded via the "Load Sankey" function. Here the stored drilldowns and filters are applied to the current data of the Sankey database.
Web Server MongoDB Node.js
- Upload all files to the server
- Navigate to OTTO Pathfinder folder
- Adjust config.json
- sudo npm install
- sudo npm install forever -g
- sudo forever start sankey.js
- Access OTTO Pathfinder at http://<server-ip>:<port>
Each Sankey diagram is stored as a collection in MongoDB. Each collection contains several paths as well as metadata:
{
"p-1" : { /*Step -1*/
"PC" : "Entrysite", /*Hierarchy 1; e.g. Page type*/
"N1" : "herrenmode", /*Hierarchy 2; e.g. Page name*/
"N2" : "Entrysite", /*Hierarchy 3*/
"N3" : "Entrysite" /*Hierarchy 4*/
},
"p0" : { /*Step 0*/
"PC" : "Storefront", /*Hierarchy 1; e.g. Page type*/
"N1" : "homepage", /*Hierarchy 2; e.g. Page name*/
"N2" : "hierarchie_level3", /*Hierarchy 3*/
"N3" : "hierarchie_level4" /*Hierarchy 4*/
},
"p1" : { /*Step 1*/
"PC" : "Entrysite", /*Hierarchy 1; e.g. Page type*/
"N1" : "herrenmode", /*Hierarchy 2; e.g. Page name*/
"N2" : "Entrysite", /*Hierarchy 3*/
"N3" : "Entrysite" /*Hierarchy 4*/
},
"p2" : { /*Step 2*/
"PC" : "Entrysite", /*Hierarchy 1; e.g. Page type*/
"N1" : "herrenmode", /*Hierarchy 2; e.g. Page name*/
"N2" : "shirts", /*Hierarchy 3*/
"N3" : "Entrysite" /*Hierarchy 4*/
},
"p3" : { /*Exit-Step*/
"PC" : "#exit",
"N1" : "exit",
"N2" : "exit",
"N3" : "exit"
},
/*Filter variables*/
"device" : "mobile",
"marketingchannel" : "SEA",
"ordervalue" : 5.99,
"date" : ISODate("2016-08-23T12:00:00.000Z"),
"count" : 1 /*Number of paths with this structure*/
}
{
"metadata" : {
"date" : {
"min" : "2016-06-26T12:00:00.000Z", /*Minimum date available*/
"max" : "2016-07-08T12:00:00.000Z", /*Maximum date available*/
"start" : "2016-07-08T12:00:00.000Z", /*Preselected start date*/
"end" : "2016-07-08T12:00:00.000Z" /*Preselected end date*/
},
"steps" : {
"min" : -7, /*Minimum step available*/
"max" : 7, /*Maximum date available*/
"start" : -3, /*Preselected start step*/
"end" : 3 /*Preselected end step*/
},
"meta" : {
"owner" : "Sales", /*Owner of the current Sankey diagram; e.g. department*/
"description" : "This sankey shows the paths that visitors of otto.de go.",
"created" : "2016-08-23T12:00:00.000Z"
},
"sum" : { /*Field which can be summarized in the frontend. "count" is standard. */
"count" : "Number of paths",
"ordervalue" : "Order value in EUR"
},
"info" : { /*Variables that are shown in tooltip*/
"size" : "Screen size"
},
"filter" : [
{
"label" : "Screen size",
"type" : "multilist",
"field" : "device",
"default" : false,
"required" : false,
"variant" : [
{
"label" : "S",
"value" : "S"
},
{
"label" : "M",
"value" : "M"
},
{
"label" : "L",
"value" : "L"
},
{
"label" : "XL",
"value" : "XL"
}
]
},
{
"label" : "Marketing Channel",
"type" : "multilist",
"field" : "marketingchannel",
"default" : false,
"required" : false,
"variant" : [
{
"label" : "SEA",
"value" : "SEA"
},
{
"label" : "SEO",
"value" : "SEO"
}
]
}
]
}
}
- Material Design Icons (CC-BY 4.0) https://design.google.com/icons/
- ClearSans (Apache 2.0 License) https://01.org/clear-SANS
- Many thanks to Mike Bostock (https://bost.ocks.org/mike/sankey/), whose Sankey library provided basic code and inspiration.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent