Page Comparison

...

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

BigCommerce Event Tracking Code Quick Start

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

Wiki Markup

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:

Wiki Markup

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

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:

Wiki Markup

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 2

New Version 3

Key