Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 8 Next »

The APP does  not install  the tracking code for implementing all of the advanced reporting supported by Hawksearch. The  keyword and autocomplete reports will be populated based on the search keywords on the search results  page and autocomplete requests. However  for the personalization  features please implement the "Event  tracking" code specified in the following section


Event Tracking Code


The code can be implemented using tracking tags. For any additional questions please reach out support@hawksearch.com


BigCommerce Event Tracking Code Quick Start

This section is only applicable for Hawksearch 2.0L-4.0L clients who use non-API method of implementation.

Please contact your Project Manger if you are not sure which tracking implementation you should be using.

In \templates\layout\base.html and \templates\layout\empty.html place the following code before the </body> tag:

<script type="text/javascript"> 
        HawkSearch.customEvent = function() {
        //<![CDATA[
             if ('{{template}}') {
                  if (('{{template}}' == 'pages/category') || ('{{template}}' == 'pages/custom/category/category') || ('{{template}}' == 'pages/search')) { 
                       HawkSearch.Tracking.track('pageload', {pageType: 'landing'}); } else if ('{{template}}' == 'pages/product') { 
                       HawkSearch.Tracking.track('pageload', {pageType: 'item'}); 
                       HawkSearch.Context.add("UniqueId", "{{product.id}}"); } else if ('{{template}}' == 'pages/cart') { 
                       HawkSearch.Tracking.track('pageload', {pageType: 'cart'}); } else { 
                       HawkSearch.Tracking.track('pageload', {pageType: 'custom'});
              }
        } //]]>
     } 
</script>

In \templates\pages\order-confirmation.html place the following code before the {{/partial}} handlebar:In \templates\layout\base.html and \templates\layout\empty.html place the following code before the </body> tag: <script type="text/javascript"> HawkSearch.customEvent = function() { //<![CDATA[ if ('{{template}}') { if (('{{template}}' == 'pages/category') || ('{{template}}' == 'pages/custom/category/category') || ('{{template}}' == 'pages/search')) { HawkSearch.Tracking.track('pageload', {pageType: 'landing'}); } else if ('{{template}}' == 'pages/product') { HawkSearch.Tracking.track('pageload', {pageType: 'item'}); HawkSearch.Context.add("UniqueId", "{{product.id}}"); } else if ('{{template}}' == 'pages/cart') { HawkSearch.Tracking.track('pageload', {pageType: 'cart'}); } else { HawkSearch.Tracking.track('pageload', {pageType: 'custom'}); } } //]]> } </script>


<script type="text/javascript">
    HawkSearch.customEvent = function() {
        HawkSearch.Tracking.track('pageload', {pageType: 'order'});
    }

    var orderNum = '{{checkout.order.id}}';
    console.log('orderNo = ' + orderNum);
    if (orderNum) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                if (this.responseText) {
                    var response = JSON.parse(this.responseText);
                    var itemList = [];

                    for (var i = 0; i < response.lineItems.physicalItems.length; i++) {
                        var item = response.lineItems.physicalItems[i];
                        itemList.push({
                            uniqueid: item.productId,
                            itemPrice: item.listPrice,
                            quantity: item.quantity
                        });
                    }

                    var hsObject = {
                        orderNo: orderNum,
                        itemList: itemList,
                        total: response.orderAmount,
                        subTotal: response.baseAmount,
                        tax: response.taxes[0].amount,
                        currency: response.currency.code
                    };

                    HawkSearch.customEvent = function() {
                        HawkSearch.Tracking.track('sale', hsObject);
                    }
                }
            }
        };
        xhttp.open('GET', '/api/storefront/orders/' + orderNum, true);
        xhttp.send();
    }
</script>


*note: this code only takes physical items into account, if digital items or gift certificates are sold the code will need to be adjusted to take that data point into account (order api can be found here: https://developer.bigcommerce.com/api-reference/storefront/orders/order/ordersbyorderidget).


In \templates\components\products\add-to-cart.html find the <input> tag with an id of “form-action-addToCart” and add and attribute of data-pid with a value of {{product.id}}, so the element should look similar to:

<input id="form-action-addToCart" data-wait-message="lang 'products.adding_to_cart'" data-pid="product.id" class="button button--primary" type="submit" value="#if product.pre_orderlang 'products.pre_order'elselang 'products.add_to_cart'/if">


In \assets\js\theme\common\product-details.js within the addProductToCart function call look for the utils.api.cart.itemAdd api call and add the following:


if (typeof HawkSearch !== 'undefined' ){
                const pidVar = $addToCartBtn.data('pid');
                const price = $('.productView').data('product-price');
                const qtyVar = $('.productView-details .form-input--incrementTotal').val();

                HawkSearch.Tracking.track('add2cart', {
                    uniqueId: pidVar,
                    price: parseFloat(price, 10),
                    quantity: qtyVar,
                    currency: 'USD'
                });
           }


  • No labels