Instructions for the manual integration of the uptain snippet

The following instructions show you how you can manually integrate uptain into your shop. The specified steps primarily serve as an orientation and description of functionalities, since the exact implementation depends on your system.

If you have any further questions, please write an email to support@uptain.de.

If you do not yet have an account with uptain, you can register here: Create account

Embed a JavaScript-Snippet on all pages

The following JavaScript-Snippet should be loaded on every page (preferably asynchronously, potentially a little delayed and at the end of the body).

<script type="text/javascript" src="https://app.uptain.de/js/uptain.js?x=XXXXXXXXXXXXXXXX" async></script>

The "XXXXXXXXXXXXXXXX" is the uptain-ID that will be provided by uptain and needs to be filled by each plugin user. For testing purposes you may obtain your own uptain-ID by registering with uptain: Register

Provide additional information in a HTML tag

When the JavaScript-Snippet is executed (with every page load) it will check for provided information in the HTML tag with the ID "__up_data_qp" in the DOM. This HTML tag cannot be loaded later than the JavaScript-Snippet. However, the JavaScript-Snippet may contain the information itself.

The resulting combined JavaScript-Snippet may for instance look like this:

<script id="__up_data_qp" src="https://app.uptain.de/js/uptain.js?x=XXXXXXXXXXXXXXXX" async></script>

Or it might be two separate HTML tags:

<script src="https://app.uptain.de/js/uptain.js?x=XXXXXXXXXXXXXXXX" async></script>

<div  id="__up_data_qp" style="display: none;"></div>

Include non-personal data

Additional data should be included in the HTML tag. The following tables define in detail which information should be included on which pages. For instance, the plugin version is always available and should thus be always included. Whereas, a success=1 should only be included once the order was completed (e.g. on the success or thank you page).

The following data depicted by table A should be included all the time:

Table A:

The resulting JavaScript snippet may for instance look like this:

<script id="__up_data_qp" src="https://app.uptain.de/js/uptain.js?x=XXXXXXXXXXXXXXXX"

data-returnurl="https://www.uptain.de?cartid=123456789"

data-page="cart"

data-wishlist="{'id1':{amount:10,name:'Levis Jeans',variants: {color:'blue',size:'XL'}},'id2':{amount:1,name:'Nike Sports Shoes',variants: {size:'45'}}}"

data-comparison="{'id1':{amount:10,name:'Levis Jeans',variants: {color:'blue',size:'XL'}},'id2':{amount:1,name:'Nike Sports Shoes',variants: {size:'45'}}}"

async></script>

The following data depicted by table B should be included whenever and as long as something is in the shopping cart:

Table B:

The resulting JavaScript snippet may for instance look like this:

<script id="__up_data_qp" src="https://app.uptain.de/js/uptain.js?x=XXXXXXXXXXXXXXXX"

data-returnurl="https://www.uptain.de?cartid=123456789"

data-page="cart"

data-wishlist="{'id1':{amount:10,name:'Levis Jeans',variants: {color:'blue',size:'XL'}},'id2':{amount:1,name:'Nike Sports Shoes',variants: {size:'45'}}}"

data-comparison="{'id1':{amount:10,name:'Levis Jeans',variants: {color:'blue',size:'XL'}},'id2':{amount:1,name:'Nike Sports Shoes',variants: {size:'45'}}}"

data-scv="38.89"

data-currency="EUR"

data-tax-amount="7.39"

data-usedvoucher="12345"

data-voucher-amount="5.00"

data-voucher-type="monetary"

data-shipping="DHL"

data-payment="PayPal"

data-shipping-costs="0.00"

data-payment-costs="0.00"

data-postal-code="delivery:20255;accounting:25421"

data-products="{'id1':{amount:10,name:'Levis Jeans',variants: {color:'blue',size:'XL'}},'id2':{amount:1,name:'Nike Sports Shoes',variants: {size:'45'}}}"

async></script>

The following data depicted by table C should be included on category pages:

Table C:

The resulting JavaScript snippet may for instance look like this:

<script id="__up_data_qp" src="https://app.uptain.de/js/uptain.js?x=XXXXXXXXXXXXXXXX"

data-returnurl="https://www.uptain.de?cartid=123456789"

data-page="cart"

data-wishlist="{'id1':{amount:10,name:'Levis Jeans',variants: {color:'blue',size:'XL'}},'id2':{amount:1,name:'Nike Sports Shoes',variants: {size:'45'}}}"

data-comparison="{'id1':{amount:10,name:'Levis Jeans',variants: {color:'blue',size:'XL'}},'id2':{amount:1,name:'Nike Sports Shoes',variants: {size:'45'}}}"

data-category-name="Jeans"

data-category-path="Clothes;Trousers"

data-category-products="{'id1':{name:'Levis Jeans',position:1}, 'id2':{name:'Nike Sports Shoes',position:2}}"

data-category-sorting="price-ascending"

async></script>

The following data depicted by table D should be included on product pages:

Table D:

The resulting JavaScript snippet may for instance look like this:

<script id="__up_data_qp" src="https://app.uptain.de/js/uptain.js?x=XXXXXXXXXXXXXXXX"

data-returnurl="https://www.uptain.de?cartid=123456789"

data-page="cart"

data-wishlist="{'id1':{amount:10,name:'Levis Jeans',variants: {color:'blue',size:'XL'}},'id2':{amount:1,name:'Nike Sports Shoes',variants: {size:'45'}}}"

data-comparison="{'id1':{amount:10,name:'Levis Jeans',variants: {color:'blue',size:'XL'}},'id2':{amount:1,name:'Nike Sports Shoes',variants: {size:'45'}}}"

data-product-id="id1"

data-product-name="Levis Jeans"

data-product-price="51.28"

data-product-original-price="99.99"

data-product-image="https://uptain.de/app/uploads/2021/04/logo_uptain.png"

data-product-tags="waterproof;10 yr warranty;outdoor"

data-product-variants="size:XL;color:blue"

data-product-category="Jeans"

data-product-category-paths="clothes/trousers/jeans;outdoor/pants"

async></script>

The following data depicted by table E should be included on search result pages:

Table E:

The resulting JavaScript snippet may for instance look like this:

<script id="__up_data_qp" src="https://app.uptain.de/js/uptain.js?x=XXXXXXXXXXXXXXXX"

data-returnurl="https://www.uptain.de?cartid=123456789"

data-page="cart"

data-wishlist="{'id1':{amount:10,name:'Levis Jeans',variants: {color:'blue',size:'XL'}},'id2':{amount:1,name:'Nike Sports Shoes',variants: {size:'45'}}}"

data-comparison="{'id1':{amount:10,name:'Levis Jeans',variants: {color:'blue',size:'XL'}},'id2':{amount:1,name:'Nike Sports Shoes',variants: {size:'45'}}}"

data-search-term="Outdoor pants woodworking"

data-search-products="{'id1':{name:'Levis Jeans',position:1}, 'id2':{name:'Nike Sports Shoes',position:2}}"

data-search-sorting="price-ascending"

async></script>

The following data depicted by table F should be included on success pages and whenever an order was placed. All information about the shopping cart (table B) should also be included here.

Table F:

The resulting JavaScript snippet may for instance look like this:

<script id="__up_data_qp" src="https://app.uptain.de/js/uptain.js?x=XXXXXXXXXXXXXXXX"

data-returnurl="https://www.uptain.de?cartid=123456789"

data-page="cart"

data-wishlist="{'id1':{amount:10,name:'Levis Jeans',variants: {color:'blue',size:'XL'}},'id2':{amount:1,name:'Nike Sports Shoes',variants: {size:'45'}}}"

data-comparison="{'id1':{amount:10,name:'Levis Jeans',variants: {color:'blue',size:'XL'}},'id2':{amount:1,name:'Nike Sports Shoes',variants: {size:'45'}}}"

data-success="1"

data-ordernumber="PO16328934"

async></script>

Include personal data depending on plugin settings

Additionally, personal data should be included into the HTML tag depending on the plugin settings (see below). As soon as and as long as the data is available (and the plugin settings indicate it should be transmitted) it should be included in the HTML tag on every page.

The following personal data depicted by table G should be included if plugin settings indicate it on every page:

Table G:

The resulting JavaScript snippet may for instance look like this:

<script id="__up_data_qp" src="https://app.uptain.de/js/uptain.js?x=XXXXXXXXXXXXXXXX"

data-returnurl="https://www.uptain.de?cartid=123456789"

data-page="cart"

data-wishlist="{'id1':{amount:10,name:'Levis Jeans',variants: {color:'blue',size:'XL'}},'id2':{amount:1,name:'Nike Sports Shoes',variants: {size:'45'}}}"

data-comparison="{'id1':{amount:10,name:'Levis Jeans',variants: {color:'blue',size:'XL'}},'id2':{amount:1,name:'Nike Sports Shoes',variants: {size:'45'}}}"

data-email="xxxxxxx@xxxx.de"

data-firstname="Jane"

data-lastname="Doe"

data-gender="f"

data-title="Dr."

data-uid="c81e728d9d4c2067f89cc14862c"

data-revenue="4800.21"

data-customergroup="general"

async></script>

Updating data

With every page load the embedded JavaScript-Snippet executes and transmits all data provided in the HTML tag (see 2). However, some data needs to be transmitted to uptain without a new page load while the user remains on the same page. For instance, if something was put into the shopping cart and the page is not reloaded or the products on a category or a search result page are loaded asynchronously. 

After the updated data was written into the HTML tag, a JavaScript function needs to be executed to initiate the transmission of data to uptain. In this case, the following function should be executed:

window._upEventBus.publish("uptain.readData");