Page Comparison

search terms if any were used on the site. The following image pixel needs to be added to the order confirmation page.

Staging:

Production:

The parameters that need to be used with the URL are as follows.

· d = Unique Identifier for your account

· orderno = The alpha-numeric order number for the site

· total = total order amount

To add this pixel, from your BigCommerce control panel, click ‘Advanced Settings’ from the left menu and then select ‘Affiliate Conversion Tracking’.
On this page, add the image pixel to the Conversion Tracking Code input box. This page still utilizes variables from BigCommerce’s legacy BluePrint engine. For orderno, the variable will be %%ORDER_ID%% and for total, the variable is %%ORDER_AMOUNT%%.
Please see the image below for an example.Image RemovedHawksearch requires tracking information for report generation and Recommendation features to function. The events are of multiple kinds such as visits, searches, clicks, purchases and many others. Hawksearch provides some events automatically however events such as Add to Cart and Sale need to be sent to Hawksearch from the website explicitly upon user action. For any additional questions please reach out support@hawksearch.com. The remainder of the article details the tracking feature for Big Commerce connector.

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. For cart addition, sale and personalization features, please implement Event tracking specified in the following sections.

For Hawksearch v4.0 (latest):

To integrate through API - Events Tracking API Integration.
To integrate through Rapid UI Framework: TrackingService | @bridgeline-digital/hawksearch-handlebars-ui

...

For Hawksearch v2.0L to v4.0L:

Note

This section is only applicable for Hawksearch v2.0L-4.0L implementations with JavaScript integration.

Please contact your Project Manager if you are unsure of the tracking implementation or version.

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

Code Block

language	html

<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\layout\base.html and \templates\layout\empty.html place the following code before the </body> tag:}

Code Block

language	html

<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 {{/partial}}

Code Block

language	html

<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>

Info
^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:

Code Block

language	js

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'
    });
}

Versions Compared

Old Version 1

New Version Current

Key

· d = Unique Identifier for your account

· orderno = The alpha-numeric order number for the site

· total = total order amount

For Hawksearch v4.0 (latest):

For Hawksearch v2.0L to v4.0L: