Skip to content

Commit 1a2d016

Browse files
akleiberakleiber
authored
Merge pull request #1 from 8select/CSE-911-update-integration-guide
CSE-911 update integration guide
2 parents 4a80ab4 + acf3f0f commit 1a2d016

File tree

7 files changed

+502
-1
lines changed

7 files changed

+502
-1
lines changed

‎README.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,7 @@
1-
# CSE-integration-manual
1+
# 8select CSE - JavaScript SDK
2+
3+
1. [Installation](./docs/setup.md)
4+
1. [Widgets](./docs/widgets/README.md)
5+
1. [Performance-Tracking](./docs/eightlytics/README.md)
6+
1. [API](./docs/widget-loader/README.md)
7+
1. [Funktionsweise](./docs/how-does-this-thing-work.md)

‎_config.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
theme: jekyll-theme-cayman

‎docs/eightlytics/README.md‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
2+
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
3+
[Übersicht](https://docs.8select.io/CSE-integration-manual/)
4+
5+
- [CSE Performance-Tracking aka. Eightlytics für KPIs und Abrechnung](#cse-performance-tracking-aka-eightlytics-f%C3%BCr-kpis-und-abrechnung)
6+
- [Eightlytics einbinden](#eightlytics-einbinden)
7+
- [Tracking von Transaktionen](#tracking-von-transaktionen)
8+
- [API](#api)
9+
- [eightlytics('purchase', order)](#eightlyticspurchase-order)
10+
11+
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
12+
13+
# CSE Performance-Tracking aka. Eightlytics für KPIs und Abrechnung
14+
15+
Eightlytics ist das Web Analytics Tool von 8select, ähnlich wie z.B. Google Analytics oder Webtrekk.
16+
Mit Hilfe unseres Web Analytics Tools sammeln wir Daten zur Nutzung der Widgets. Im Performance Dashboard können Sie so jederzeit die Performance der CSE einsehen.
17+
18+
## Eightlytics einbinden
19+
20+
Eightlytics wird automatisch durch das einbinden des 8select-CSE JavaScript SDKs geladen, sofern es benötigt wird.
21+
22+
Siehe dazu [Setup](../setup.md)
23+
24+
## Tracking von Transaktionen
25+
26+
Für die Auswertung der Umsätze die über die 8select-CSE kommen, müssen Sie einen zweiten JavaScript Codeausschnitt einbinden. Dies muss auf der Seite die nach einem erfolgreichen Checkout angezeigt wird erfolgen.
27+
28+
Der Codeausschnitt muss im HTML an beliebiger Stelle nach dem Codeausschnitt für das Laden des 8select-CSE JavaScript-SDKs eingefügt werden.
29+
30+
**ACHTUNG** - Preise müssen in Cent übertragen werden - also aus `199,95 €` wird `19995`.
31+
32+
```javascript
33+
<script type="text/javascript">
34+
window.eightlytics(
35+
'purchase',
36+
{
37+
customerid: '1234',
38+
orderid: '1234',
39+
products: [
40+
{
41+
sku: '12345',
42+
amount: 3,
43+
price: 1199
44+
},
45+
{
46+
sku: '456',
47+
amount: 1,
48+
price: 19995
49+
}
50+
]
51+
}
52+
);
53+
</script>
54+
```
55+
56+
## API
57+
58+
### eightlytics('purchase', order)
59+
60+
**order**
61+
62+
| field | type | required | description |
63+
| ---------- | ---------------- | -------- | ------------------------------------- |
64+
| customerid | string | required | unique customer identifier |
65+
| orderid | string | required | unique transaction identifier |
66+
| products | array of product | required | which products does the order contain |
67+
68+
**product**
69+
70+
| field | type | required | description |
71+
| ------ | ------- | -------- | ------------------------------------------ |
72+
| sku | string | required | product identifier |
73+
| amount | integer | required | how many units are added to the cart |
74+
| price | integer | required | what does one unit cost in **_euro cent_** |
75+
76+
```javascript
77+
{
78+
customerid: '1234',
79+
orderid: '1234',
80+
products: [
81+
{
82+
sku: '12345',
83+
amount: 3,
84+
price: 1199
85+
},
86+
{
87+
sku: '456',
88+
amount: 1,
89+
price: 19995
90+
}
91+
]
92+
}
93+
```

‎docs/how-does-this-thing-work.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
2+
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
3+
[Übersicht](https://docs.8select.io/CSE-integration-manual/)
4+
5+
- [Funktionsweise des 8select-CSE JavaScript SDK](#funktionsweise-des-8select-cse-javascript-sdk)
6+
7+
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
8+
9+
# Funktionsweise des 8select-CSE JavaScript SDK
10+
11+
Das Widget-Loader Script `loader.js` ist eine ca. 5 KB große JavaScript Datei. Dieses Script erzeugt ein FIF (Friendly IFrame) in dem die 8select CSE geladen wird.
12+
13+
Diese Technik verhindert das Blockieren von Downloads anderer Ressourcen. Außerdem wird das `onload` Event des Browsers nicht blockiert. Somit beeinflusst das Einbinden der 8select CSE in keinster Weise die Ladezeiten Ihres Shops.
14+
15+
Nachdem das 8select-CSE JavaScript SDK geladen ist, füllt dieses automatisch alle gekennzeichneten div-Elemente mit den entsprechenden Widgets.

‎docs/setup.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
2+
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
3+
[Übersicht](https://docs.8select.io/CSE-integration-manual/)
4+
5+
- [Installation](#installation)
6+
- [Wie wird die 8select-CSE integriert?](#wie-wird-die-8select-cse-integriert)
7+
- [API-ID](#api-id)
8+
9+
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
10+
11+
# Installation
12+
13+
Das 8select-CSE JavaScript SDK bietet alle clientseitigen Funktionen um die 8select-CSE vollständig in eine Webseite einzubinden.
14+
15+
Es ermöglicht die Nutzung des:
16+
17+
- SYS-PSV Widget - um ein Produktset für eine SKU anzuzeigen
18+
- SYS-PSV Button - um einen Button mit dem Hinweis auf ein passendes Produktset anzuzeigen
19+
- SYS-ACC Widget - um ergänzende Vorschläge zu einer in den Warenkorb gelegten SKU anzuzeigen
20+
- PSP-PSV Widget - um ein bestimmtes Produktsets anzuzeigen
21+
- PSP-TLV Widget - um eine Liste von Produktsets anzuzeigen
22+
- ELTX-Client - für das CSE Performance-Tracking
23+
24+
Das SDK und die Widgets funktionieren in Desktop- und mobilen Webrowsern.
25+
26+
## Wie wird die 8select-CSE integriert?
27+
28+
Die 8select-CSE wird mit Hilfe des JavaScript SDK muss nicht heruntergeladen werden. Es wird einfach über ein JavaScript-Codeausschnitt auf der Webseite im HTML platziert.
29+
30+
Das SDK wird asynchron geladen ohne Ladevorgänge von anderen Elementen auf der Webseite zu blockieren.
31+
32+
Mit Hilfe von folgendem Codeausschnitt wird das SDK geladen:
33+
34+
```javascript
35+
<script type="text/javascript">
36+
(function(d, s, w) {
37+
var apiId = '<API-ID>';
38+
39+
window.eightlytics || function (w) {
40+
w.eightlytics = function () {
41+
window.eightlytics.queue = window.eightlytics.queue || []
42+
window.eightlytics.queue.push(arguments)
43+
};
44+
}(w);
45+
var script = d.createElement(s);
46+
script.src = 'https://wgt.8select.io/' + apiId + '/loader.js';
47+
var entry = d.getElementsByTagName(s)[0];
48+
entry.parentNode.insertBefore(script, entry);
49+
})(document, 'script', window);
50+
</script>
51+
```
52+
53+
## API-ID
54+
55+
In vielen Code-Snippets befindet sich der Wert `<API-ID>`. Dieser muss durch `API-ID` ersetzt werden, die 8select zur Verfügung stellt.

‎docs/widget-loader/README.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
2+
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
3+
[Übersicht](https://docs.8select.io/CSE-integration-manual/)
4+
5+
- [JavaScript-SDK API](#javascript-sdk-api)
6+
- [initCSE()](#initcse)
7+
- [reinitSys(newSku, [oldSku])](#reinitsysnewsku-oldsku)
8+
9+
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
10+
11+
# JavaScript-SDK API
12+
13+
## initCSE()
14+
15+
Wenn ihr Shop die Widget HTML-Elemente Asynchron nachläd (z.B. Shopware Einkaufswelten), dann muss nach dem Laden die CSE darüber informiert werden. Dies erfolgt durch einen Aufruf von `initCSE()`
16+
17+
```javascript
18+
window._8select.initCSE();
19+
```
20+
21+
## reinitSys(newSku, [oldSku])
22+
23+
Wenn Ihr Shop Varianten via Ajax nachlädt, so müssen Sie das SYS-PSV Widget über die geänderte SKU informieren.
24+
25+
```javascript
26+
window._8select.reinitSys("21", "42");
27+
```

0 commit comments

Comments
 (0)