Skip to Content

ecommerceTracking()

Track events in Google Analytics specific to Ecommerce.

JavaScript February 22, 2017

Usage

This function runs automatically, so it is not called manually. Is this incorrect?

Additional Notes

WooCommerce must be activated for these events to be enabled.

Source File

Located in /assets/js/nebula.js on line 1645.

Note: This function contains 3 to-do comments.

JavaScript
nebula.ecommerceTracking = function(){
    if ( nebula.has(nebula, 'site.ecommerce') && nebula.site.ecommerce ){ //@todo "Nebula" 0: Replace with optional chaining
        //Add to Cart clicks
        nebula.dom.document.on('click', 'a.add_to_cart, .single_add_to_cart_button', function(e){ //@todo "Nebula" 0: is there a trigger from WooCommerce this can listen for?
            var thisEvent = {
                event: e,
                category: 'Ecommerce',
                action: 'Add to Cart',
                product: jQuery(this).attr('data-product_id')
            };

            nebula.dom.document.trigger('nebula_event', thisEvent);
            ga('send', 'event', thisEvent.category, thisEvent.action, thisEvent.product);
            window.dataLayer.push({'event': 'nebula-add-to-cart', 'nebula-event': thisEvent});
            if ( typeof fbq === 'function' ){fbq('track', 'AddToCart');}
            nebula.nv('event', 'Ecommerce Add to Cart');
        });

        //Update cart clicks
        nebula.dom.document.on('click', '.button[name="update_cart"]', function(e){
            var thisEvent = {
                event: e,
                category: 'Ecommerce',
                action: 'Update Cart Button',
                label: 'Update Cart button click'
            };

            nebula.dom.document.trigger('nebula_event', thisEvent);
            ga('send', 'event', thisEvent.category, thisEvent.action, thisEvent.label);
            window.dataLayer.push({'event': 'nebula-update-cart', 'nebula-event': thisEvent});
            nebula.nv('event', 'Ecommerce Update Cart');
        });

        //Product Remove buttons
        nebula.dom.document.on('click', '.product-remove a.remove', function(e){
            var thisEvent = {
                event: e,
                category: 'Ecommerce',
                action: 'Remove This Item',
                product: jQuery(this).attr('data-product_id')
            };

            nebula.dom.document.trigger('nebula_event', thisEvent);
            ga('send', 'event', thisEvent.category, thisEvent.action, thisEvent.product);
            window.dataLayer.push({'event': 'nebula-remove-item', 'nebula-event': thisEvent});
            nebula.nv('event', 'Ecommerce Remove From Cart');
        });

        //Proceed to Checkout
        nebula.dom.document.on('click', '.wc-proceed-to-checkout .checkout-button', function(e){
            var thisEvent = {
                event: e,
                category: 'Ecommerce',
                action: 'Proceed to Checkout Button',
                label: 'Proceed to Checkout button click'
            };

            nebula.dom.document.trigger('nebula_event', thisEvent);
            ga('send', 'event', thisEvent.category, thisEvent.action, thisEvent.label);
            window.dataLayer.push({'event': 'nebula-proceed-to-checkout', 'nebula-event': thisEvent});
            if ( typeof fbq === 'function' ){fbq('track', 'InitiateCheckout');}
            nebula.nv('event', 'Ecommerce Proceed to Checkout');
        });

        //Checkout form timing
        nebula.dom.document.on('click focus', '#billing_first_name', function(e){
            nebula.timer('(Nebula) Ecommerce Checkout', 'start');

            var thisEvent = {
                event: e,
                category: 'Ecommerce',
                action: 'Started Checkout Form',
                label: 'Began filling out the checkout form (Billing First Name)'
            };

            nebula.dom.document.trigger('nebula_event', thisEvent);
            ga('send', 'event', thisEvent.category, thisEvent.action, thisEvent.label);
            window.dataLayer.push({'event': 'nebula-started-checkout-form', 'nebula-event': thisEvent});
            nebula.nv('event', 'Ecommerce Started Checkout Form');
        });

        //Place order button
        nebula.dom.document.on('click', '#place_order', function(e){
            var thisEvent = {
                event: e,
                category: 'Ecommerce',
                action: 'Place Order Button',
                label: 'Place Order button click'
            };

            ga('send', 'timing', 'Ecommerce', 'Checkout Form', Math.round(nebula.timer('(Nebula) Ecommerce Checkout', 'end')), 'Billing details start to Place Order button click');
            nebula.dom.document.trigger('nebula_event', thisEvent);
            ga('send', 'event', thisEvent.category, thisEvent.action, thisEvent.label);
            window.dataLayer.push({'event': 'nebula-place-order-button', 'nebula-event': thisEvent});
            if ( typeof fbq === 'function' ){fbq('track', 'Purchase');}
            nebula.nv('event', 'Ecommerce Placed Order');
            nebula.nv('identify', {hs_lifecyclestage_customer_date: 1}); //@todo "Nebula" 0: What kind of date format does Hubspot expect here?
        });
    }
};

Override

To override or disable this JavaScript function, simply redeclare it with the exact same function name.

JavaScript
nebula.ecommerceTracking = function(){
    //Write your own code here, leave it blank, or return false.
}