Event Tracking

The tracking part is mostly done client-side with a minor exception (Login tracking). More on tracking can be found in the official documentation: https://hawksearch.atlassian.net/wiki/spaces/HSKB/pages/1553957692/Event+Tracking

In order to ease the client-side aspect of tracking, we provide a JavaScript file with all the methods mentioned in the Events Tracking API https://hawksearch.atlassian.net/wiki/spaces/HSKB/pages/541556744/Hawksearch+-+Events+Tracking+API

The contents of the file:

class EventTracking {
    constructor(baseUrl, clientGuid, visitorId, visitId) {
        this.trackingEndpoint = "/api/trackevent";
        this.baseUrl = baseUrl;
        this.clientGuid = clientGuid;
        this.visitorId = visitorId;
        this.visitId = visitId;
    }

    pageLoad(eventDataModel, customDictionary = null, trackingProperties = null) {
        var request = this.#buildRequest("PageLoad", eventDataModel, customDictionary, trackingProperties);
        this.#sendRequest(request);
    }

    pageLoadByType(pageTypeId, customDictionary = null, trackingProperties = null) {
        var eventDataModel = new Object();
        eventDataModel.pageTypeId = pageTypeId;
        eventDataModel.qs = window.location.search;
        eventDataModel.requestParh = window.location.pathname;
        eventDataModel.ViewportHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
        eventDataModel.ViewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
       
        var request = this.#buildRequest("PageLoad", eventDataModel, customDictionary, trackingProperties);
        this.#sendRequest(request);
    }

    addToCart(eventDataModel, customDictionary = null, trackingProperties = null) {
        var request = this.#buildRequest("Add2Cart", eventDataModel, customDictionary, trackingProperties);
        this.#sendRequest(request);
    }

    addToCartMultiple(eventDataModel, customDictionary = null, trackingProperties = null) {
        var request = this.#buildRequest("Add2CartMultiple", eventDataModel, customDictionary, trackingProperties);
        this.#sendRequest(request);
    }

    sale(eventDataModel, customDictionary = null, trackingProperties = null) {
        var request = this.#buildRequest("Sale", eventDataModel, customDictionary, trackingProperties);
        this.#sendRequest(request);
    }

    rate(eventDataModel, customDictionary = null, trackingProperties = null) {
        var request = this.#buildRequest("Rate", eventDataModel, customDictionary, trackingProperties);
        this.#sendRequest(request);
    }

    click(eventDataModel, customDictionary = null, trackingProperties = null) {
        var request = this.#buildRequest("Click", eventDataModel, customDictionary, trackingProperties);
        this.#sendRequest(request);
    }

    search(eventDataModel, customDictionary = null, trackingProperties = null) {
        var request = this.#buildRequest("Search", eventDataModel, customDictionary, trackingProperties);
        this.#sendRequest(request);
    }

    bannerClick(eventDataModel, customDictionary = null, trackingProperties = null) {
        var request = this.#buildRequest("BannerClick", eventDataModel, customDictionary, trackingProperties);
        this.#sendRequest(request);
    }

    bannerImpression(eventDataModel, customDictionary = null, trackingProperties = null) {
        var request = this.#buildRequest("BannerImpression", eventDataModel, customDictionary, trackingProperties);
        this.#sendRequest(request);
    }

    recommendationClick(eventDataModel, customDictionary = null, trackingProperties = null) {
        var request = this.#buildRequest("RecommendationClick", eventDataModel, customDictionary, trackingProperties);
        this.#sendRequest(request);
    }

    autocompleteClick(eventDataModel, customDictionary = null, trackingProperties = null) {
        var request = this.#buildRequest("AutocompleteClick", eventDataModel, customDictionary, trackingProperties);
        this.#sendRequest(request);
    }

    customEvent(eventName, eventDataModel, customDictionary = null, trackingProperties = null) {
        var request = this.#buildRequest(eventName, eventDataModel, customDictionary, trackingProperties);
        this.#sendRequest(request);
    }

    #buildRequest(eventType, eventData, customDictionary = null, trackingProperties = null) {
        var request = new Object();
        request.clientGuid = this.clientGuid;
        request.eventType = eventType;
        request.eventData = btoa(JSON.stringify(eventData));
        request.visitorId = this.visitorId;
        request.visitId = this.visitId;

        request.customDictionary = customDictionary;
        request.trackingProperties = trackingProperties;

        return request;
    }

    #sendRequest(request) {
        var xhr = new XMLHttpRequest();
        var url = this.baseUrl + this.trackingEndpoint;

        xhr.open("POST", url, true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(JSON.stringify(request));
    }
}

Usage

In order to use the client-side tracking:

Add the script to your webpage
Instantiate an EventTracking object with the required parameters
Build the event data model for the specific tracking action. These event data models are also described in https://hawksearch.atlassian.net/wiki/spaces/HSKB/pages/541556744/Hawksearch+-+Events+Tracking+API
Call the needed method of the EventTracking object by passing the created event data to it

Examples:

PageLoad event type (script that executes when the page is loaded)

<script src="path/to/tracking.js"></script>
<script>
    var baseUrl = 'https://tracking-dev.hawksearch.net';        // Your environment
    var clientGuid = 'B33A205A-A58E-4CED-93CF-69C2E2327646';    // Your API Client Guid
    var visitorId = 'B9A82E3F-5349-459E-AC73-8FCCD395E2C2';     // Visitor Id generated on your end (and perhaps stored in a cookie)
    var visitId = '6E169ACE-2C47-463B-A5BD-4B9B0B1F8BBD';       // Visit Id generated on your end (and perhaps stored in a cookie)
    var eventTracking = new EventTracking(baseUrl, clientGuid, visitorId, visitId);
    
    eventTracking.pageLoadByType('1');
</script>

Add2Cart event type (script that executes when the user makes an action → pressing the ‘Add To Cart’ button)

<script src="path/to/tracking.js"></script>
<script>
    var eventTracking = new EventTracking(...);
    
    // call a similar function when the user clicks on the 'Add To Cart' button
    function trackAddToCart(item) {
        var eventData = new Object();
        eventData.uniqueId = item.ItemId;
        eventData.price = item.AddedItemPrice;
        eventData.quantity = item.Quantity;
        eventData.currency = item.Currency;
        
        eventTracking.addToCart(eventData);
    }
</script>

Login Tracking

The official Hawksearch documentation states that a server-to-server approach must be taken in the case of tracking login events (if applicable).
To make this kind of tracking possible, we created the LoginTrackingClient class. This class is a part of the Optimizely.Hawksearch.Client package and provides 2 methods:

To implement login tracking, inject a LoginTrackingClient instance in your class and use its methods in the code sequence responsible for your login operation. Example: