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/modules/analytics.js on line 1294.
No Hooks
This function does not have any filters or actions available. Request one?Note: This function contains 2 to-do comments.
JavaScript
nebula.ecommerceTracking = async function(){
if ( nebula.site?.ecommerce ){
//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?
let thisEvent = {
event: e,
event_name: 'add_to_cart',
event_category: 'Ecommerce',
event_action: 'Add to Cart',
product: jQuery(this).attr('data-product_id')
};
nebula.dom.document.trigger('nebula_event', thisEvent);
gtag('event', thisEvent.event_name, nebula.gaEventObject(thisEvent));
window.dataLayer.push(Object.assign(thisEvent, {'event': 'nebula-add-to-cart'}));
nebula.fbq('track', 'AddToCart');
nebula.clarity('set', thisEvent.event_category, thisEvent.event_action);
nebula.crm('event', 'Ecommerce Add to Cart');
});
//Update cart clicks
nebula.dom.document.on('click', '.button[name="update_cart"]', function(e){
let thisEvent = {
event: e,
event_name: 'update_cart',
event_category: 'Ecommerce',
event_action: 'Update Cart Button',
event_label: 'Update Cart button click'
};
nebula.dom.document.trigger('nebula_event', thisEvent);
gtag('event', thisEvent.event_name, nebula.gaEventObject(thisEvent));
window.dataLayer.push(Object.assign(thisEvent, {'event': 'nebula-update-cart'}));
nebula.crm('event', 'Ecommerce Update Cart');
});
//Product Remove buttons
nebula.dom.document.on('click', '.product-remove a.remove', function(e){
let thisEvent = {
event: e,
event_name: 'remove_from_cart',
event_category: 'Ecommerce',
event_action: 'Remove This Item',
product: jQuery(this).attr('data-product_id')
};
nebula.dom.document.trigger('nebula_event', thisEvent);
gtag('event', thisEvent.event_name, nebula.gaEventObject(thisEvent));
window.dataLayer.push(Object.assign(thisEvent, {'event': 'nebula-remove-item'}));
nebula.crm('event', 'Ecommerce Remove From Cart');
});
//Proceed to Checkout
nebula.dom.document.on('click', '.wc-proceed-to-checkout .checkout-button', function(e){
let thisEvent = {
event: e,
event_name: 'begin_checkout',
event_category: 'Ecommerce',
event_action: 'Proceed to Checkout Button',
event_label: 'Proceed to Checkout button click'
};
nebula.dom.document.trigger('nebula_event', thisEvent);
gtag('event', thisEvent.event_name, nebula.gaEventObject(thisEvent));
window.dataLayer.push(Object.assign(thisEvent, {'event': 'nebula-proceed-to-checkout'}));
nebula.fbq('track', 'InitiateCheckout');
nebula.clarity('set', thisEvent.event_category, thisEvent.event_action);
nebula.crm('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');
let thisEvent = {
event: e,
event_name: 'checkout_progress',
event_category: 'Ecommerce',
event_action: 'Started Checkout Form',
event_label: 'Began filling out the checkout form (Billing First Name)'
};
nebula.dom.document.trigger('nebula_event', thisEvent);
gtag('event', thisEvent.event_name, nebula.gaEventObject(thisEvent));
window.dataLayer.push(Object.assign(thisEvent, {'event': 'nebula-started-checkout-form'}));
nebula.crm('event', 'Ecommerce Started Checkout Form');
});
//Place order button
nebula.dom.document.on('click', '#place_order', function(e){
let thisEvent = {
event: e,
event_name: 'purchase',
event_category: 'Ecommerce',
event_action: 'Place Order Button',
event_label: 'Place Order button click'
};
gtag('event', 'timing_complete', {
name: 'Checkout Form',
value: Math.round(nebula.timer('(Nebula) Ecommerce Checkout', 'end')),
event_category: 'Ecommerce',
event_label: 'Billing details start to Place Order button click',
});
nebula.dom.document.trigger('nebula_event', thisEvent);
gtag('event', thisEvent.event_name, nebula.gaEventObject(thisEvent));
window.dataLayer.push(Object.assign(thisEvent, {'event': 'nebula-place-order-button'}));
nebula.fbq('track', 'Purchase');
nebula.clarity('set', thisEvent.event_category, thisEvent.event_action);
nebula.crm('event', 'Ecommerce Placed Order');
nebula.crm('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. Remember: Some functionality is conditionally loaded via dynamic imports, so if your function is not overriding properly, try listening for a DOM event (described below).
JavaScript
For non-module import functions:
nebula.ecommerceTracking = function(){
//Write your own code here, leave it blank, or return false.
}
For dynamically imported module function overrides:
jQuery(window).on('load', function(){
nebula.ecommerceTracking = function(){
//Write your own code here, leave it blank, or return false.
}
});
Custom Nebula DOM events do also exist, so you could also try the following if the Window Load listener does not work:
jQuery(document).on('nebula_module_loaded', function(module){
//Note that the module variable is also available to know which module specifically was imported
if ( typeof nebula.ecommerceTracking === 'function' ){
nebula.ecommerceTracking = function(){
//Write your own code here, leave it blank, or return false.
}
}
});