Implementation Guidelines

Size: px

Start display at page:

Download "Implementation Guidelines"

Lesley Lawson
5 years ago
Views:

Webtrekk GmbH Robert-Koch-Platz 4 10115 Berlin t +49

com CEO Wolf Lichtenstein Local Court Berlin HRB

1 Webtrekk GmbH Robert-Koch-Platz Berlin t f w CEO Wolf Lichtenstein Local Court Berlin HRB B Implementation Guidelines Single Page Applications

2 1 INTRODUCTION 3 2 BASIC IMPLEMENTATION IMPLEMENTING THE TRACKING SCRIPT GLOBAL CONFIGURATION PAGE SPECIFIC CONFIGURATION 4 3 GENERATING TRACKING REQUESTS MANUAL FUNCTION CALL WT.SENDINFO() EXEMPLARY TRACKING CODES 6 4 PARAMETER OVERVIEW PAGE INFORMATION ACTION INFORMATION E-COMMERCE AND ORDER INFORMATION CAMPAIGN INFORMATION SESSION AND USER INFORMATION 12 2 Implementation Guidelines by Webtrekk

3 1 Introduction This document contains information about the integration of Webtrekk in single page applications (SPAs). Since implementation in SPAs differs from the regular implementation on websites, this method is explicitly detailed here. This document supplements the official implementation documentation ("Integration and Configuration of the Webtrekk Tracking Pixel for Tag Integration", attached to the Webtrekk tracking library and always available for download in the most recent version in the Webtrekk Support Center. The recommendations made here are best practice. Please use both documents together. 2 Basic implementation Webtrekk is based on unique objects (user, session, page, product, event, campaign, video) which can be enriched with individual static (categories) or dynamic (parameter) information. This approach is detailed further in each part of this document in the respective chapters and is the basis for gaining deep insights and creating meaningful analyses. Important: Parameters and campaigns have to be created in Webtrekk Q3 before they are being tracked Categories are only tracked once during the initial measurement of the object. Changing the categories can be achieved by manually uploading them in the Webtrekk frontend or by executing a category reset. Multiple values in parameters have to be separated by a semicolon. It is important to keep in mind that the information in the first position has a direct relation to the equivalent product in the first position, the information in second position to the product in second position and so forth. Therefore, the position of the information in dynamic parameters and categories has to align with the position of the objects. Furthermore, it should be noted that additional information without direct object relation are not connected to any object. The length of requests must not extend over 7000 characters, additional characters are cut off. 3 Implementation Guidelines by Webtrekk

4 2.1 Implementing the tracking script The essential basis for implementing Webtrekk in SPAs is the integration of the tracking script version 4 in the head of the website. The JavaScript file has to be hosted on your webserver and implemented in the earliest possible position in the source code of all your websites. <html> <head> <script type="text/javascript" src="webtrekk_v4.min.js"> </script> </head> <body> </body> </html> Global configuration Within the JavaScript file, the global configuration is set. This is initially valid for each page on which the tracking pixel is integrated. It can be adjusted by the page specific configuration. var webtrekkconfig = webtrekkconfig { trackid: " ", trackdomain: "customer.wt-eu02.net", domain: " mediacode: "wt_mc", cookie: "1" }; /** ************ Don't change anything beyond this line ************ ********************* Start webtrekk_v4.js ********************* */ Page specific configuration Since SPAs generally are constructed dynamically, only a rudimentary page specific configuration is needed. All information is transmitted based on events. To ensure the functionality, the wt object has to be created. The code snipped shows how this is done. <script type="text/javascript"> var pageconfig = { contentid: "", // generiert eine automatische Content ID aus der URL linktrack: "link" // Aktiviert Linktracking [link oder standard, siehe Doku) }; var wt = new webtrekkv3(pageconfig); </script> 4 Implementation Guidelines by Webtrekk

5 3 Generating tracking requests Single Page Applications (SPAs) do not generate classic page loads in which the browser loads a new page. Instead, the displayed content is dynamically created based on the user interactions. This dynamic behavior has to be taken into consideration for the tracking. When a new view is generated, a "page", a tracking request for this page has to be sent. When a button is clicked or another interesting event is triggered, a tracking request for this action has to be executed. 3.1 Manual function call wt.sendinfo() wt.sendinfo({"additional information":''}) When the user of the SPA triggers a dynamic change of the website status through an action that does not result in a page load, the manual function call can be used to transmit this information. This dynamic change can take different forms, for example loading of a new virtual page, adding a product to the cart, validating a form, dynamically loading content or any other possible function. In this case, the regular tracking of the Webtrekk tracking library is not executed. It only works when a page is loaded normally in the browser. When implementing the tracking it has to be defined what additional information should be made available in the tracking request and when it should be triggered. Important: Webtrekk differentiates between page and action requests and does not permit a combination of these types of information in one tracking request! The function wt.sendinfo() can be appended to any JavaScript function, for example the onclick of a button. 5 Implementation Guidelines by Webtrekk

6 3.2 Exemplary tracking codes The following chapter details the exemplary tracking integration in a dynamic SPA in order to track all required information at the right time in the right place. Often, the checkout form is a dynamic element in an E-Commerce shop, preventing the regular tracking methods from being valid options. Here are the code snippets for measuring the information and events on the pages accordingly. Detailed are the final three steps of the six step checkout form as well as the order confimation page. 1. After the user added a product tothe basket and has proceeded with purchase intention to the checkout process, he has completed three of the six steps of the checkout form SPA checkout method (step 1 guest order), billing (step 2) and shipping (step 3) information. He has now arrived on the dynamically loaded page for step 4, the shipping method. The following code snippet has to be executed when the page is loaded in order to track the page as the fourth step in the checkout: wt.sendinfo({ contentid:'demoshop.checkout.step4', contentgroup: { 1:'demoshop', 2:'checkout' }, customparameter: {1:'en'}, customerid:'6c4bbe6560f8ac35d542d5bec3d0fed9e162633d27b7a8e671fa' }); 6 Implementation Guidelines by Webtrekk

7 2. The user now click on the button "continue" to get to step 5. Here, two tracking requests have to be triggered: a. An action request signaling the use of the button: <input type="button" onclick= "wt.sendinfo({ linkid:'continue_to_step5' });" value="continue" /> b. A page request as soon as the page with the content for step 5 has loaded: wt.sendinfo({ contentid:'demoshop.checkout.step5', contentgroup: { 1:'demoshop', 2:'checkout' }, customparameter: {1:'en'}, customerid:'6c4bbe6560f8ac35d542d5bec3d0fed9e162633d27b7a8e671fa' }); The selection of the payment method can be transmitted as action request as well: <input type="radio" onclick= "wt.sendinfo({ linkid:'check_mo' });" value="check/money order" /> 7 Implementation Guidelines by Webtrekk

8 3. When the user clicks "Continue" again, he arrives at the final step of the checkout form, step 6. Just as in the previous step, two tracking requests have to be sent here: a. An action request signaling the use of the button: <input type="button" onclick= "wt.sendinfo({ linkid:'continue_to_step6' });" value="continue" /> b. A page request as soon as the page with the content for step 6 has loaded: wt.sendinfo({ contentid:'demoshop.checkout.step6', contentgroup: { 1:'demoshop', 2:'checkout' }, customparameter: {1:'en'}, customerid:'6c4bbe6560f8ac35d542d5bec3d0fed9e162633d27b7a8e671fa' }); As soon as the user clicks "Place Order" to complete the checkout process, another action request is sent: <input type="button" onclick= "wt.sendinfo({ linkid:'place_order' });" value="place Order" /> 8 Implementation Guidelines by Webtrekk

4. When loading the order confirmation page the order information has to be transmitted now to measure the order: wt.sendinfo({ contentid:'demoshop.checkout.

9 4. When loading the order confirmation page the order information has to be transmitted now to measure the order: wt.sendinfo({ contentid:'demoshop.checkout.success', contentgroup: {1:'demoshop', 2:'checkout'}, customparameter: {1:'en'}, customerid:'6c4bbe6560f8ac35d542d5bec3d0fed9e162633d27b7a8e671fa', product:'085eo2f014', customecommerceparameter: {1:'textured check shirt, 100% cotton'}, productvariant:'size_l', productquantity:'1', productstatus:'conf', productcost:'42.01', currency:'eur', orderid:' ', ordervalue:'126.03', orderid:' ', shippingcost:'5', shippingmethod:'webtrekk Courier', paymentmethod:'check/money order' }); 9 Implementation Guidelines by Webtrekk

10 4 Parameter overview The following chapter contains an overview of possible parameters that can be transmitted with event-based requests. Custom parameters and categories that have been created before in Webtrekk Q3 in order to be assigned an ID are transmitted in curly brackets where the number equals the ID in Webtrekk Q3. Multiple values within a parameter are separated with a semicolon and always relate to the object at the same position. More detailed information to each individual parameter can be found in the technical implementation documentation. 4.1 Page information Preconfigured parameters Information page Id page category number of search results search term error messages paywall visits [ 1, 0 ] article heading content tags title of a page typ of a page length of a page days since publication Custom parameter Page parameter Code with example value contentid:'checkout.step3' contentgroup: {1:'store', 2:'checkout'} numbersearchresults:'15' internalsearch:'webtrekk' errormessages:' required' paywall:'1' articletitle:'surprise Transfer' contenttags:'news,soccer,transfer' pagetitle:'breaking news' pagetype:'article' pagelength:'short' dayssincepublication:'3' customparameter: {1:'de'} 4.2 Action information Preconfigured Parameter Information action name Custom parameter action parameter Code with example value linkid:'checkout.next_to_step3' customclickparameter: {1:'footer'} 10 Implementation Guidelines by Webtrekk

11 4.3 E-Commerce and order information E-Commerce and order information have to be transmitted via a page request! Preconfigured parameter Information product Id product quantity product cost currency product status coupon value product category order value order Id payment method shipping service shipping method shipping costs gross margin order status produkt variant product availability Custom parameter E-Commerce-Parameter Code with example value product:'sku123;sku456' productquantity:'1;2' productcost:'19.95;9.90' currency:'eur' ISO-Code productstatus:'conf' (view add conf) couponvalue:'5.00' productcategory: {1:'men;women', 2:'pants;blouses'} ordervalue:'59.70' orderid:'ab-1234' paymentmethod:'paypal' shippingservice:'dhl' shippingspeed:'express' shippingcosts:'5.95' grossmargin:'5.43;2.67' orderstatus:'prepare_for_shipping' productvariant:'varianta;variantb' productsoldout:'0' (sold out=1 available=0) customecommerceparameter: {1:'grün', 2:'L'} 4.4 Campaign information Preconfigured parameters Information campaign name campaign action Custom parameter campaign parameter Code with example value campaignid:'mc%3dnewsletter_2017.week37.a' campaignaction:'view' (view click) customcampaignparameter: {1:'personalized'} 11 Implementation Guidelines by Webtrekk

12 4.5 Session and user information Preconfigured parameters Information Code with example value Custom visitor-id customerid:' 372d1a04d003eebc09e17330d5d3' Login-Status loginstatus:'loggedin' User category urmcategory: { 2:'35'} 'info@webtrekk.com' Receiver Id rid:'receiver' Opt-In optin:'3' (yes=1 no=2 unknown=3) first name firstname:'web' last name lastname:'trekk' phone number telefon:' ' (0-9) gender gender:'1' (male=1 female=2 unknown=3) country country:'germany' city city:'berlin' zip code postalcode:'10115' street street:'robert-koch-platz' street number streetnumber:'4' validation validation:'1' (yes=1 no=0) birthday birthday:' ' Custom Parameter Session parameter customsessionparameter: {1:'male'} 12 Implementation Guidelines by Webtrekk

Functional Description of the Pixel Plug-in Interface. Pixel Version 3.2.7

Functional Description of the Pixel Plug-in Interface Pixel Version 3.2.7 1 Contents 1 General... 3 2 Activating the Plug-in... 3 3 Structure of a Plug-in Function... 4 4 Parameter Overview... 4 5 Function