tag-rocket-taboola.html

<script data-cfasync="false">   
/*
    Web Site Advantage: Tag Rocket Taboola [v2.4] 
    Taboola base pixel, conversion events and ecommevents
    https://bigcommerce.websiteadvantage.com.au/tag-rocket/articles/tracking-with-taboola-on-bigcommerce/
    Copyright (C) 2021 Web Site Advantage
*/
!function(w,t){
    var taboolaAccountId = 0; // REPLACE_WITH_YOUR_ID; If you have a DCO account, use the associated SC accounts ID here.

    var useEcommEvents = true; // For DCO (Dynamic Creative Optimization) accounts

    var campaignIds = ""; // An optional parameter containing a list of campaign id these events are relevant to

    var itemGroupIdFormat = "[[psku]]||P[[pid]]"; 

    var debug = false;

    // End of settings --------

    var tagName = 'Taboola'; 
    var consentRequired = 'targetingAdvertising'; 

    // Event based conversions need creating to get access to the events this tracks:
    // https://bigcommerce.websiteadvantage.com.au/tag-rocket/articles/tracking-with-taboola-on-bigcommerce/

    // https://help.taboola.com/hc/en-us/articles/360003484314-Defining-and-Creating-Conversions

    // ecevents were reverse engineered from the Taboola ecommerce pixel
    // https://tagmanager.google.com/gallery/#/owners/taboola/templates/taboola-ecomm-pixel

    var getProductId = function(item,) {
        return T.getProductId(tagName, 'ItemGroupId', item, itemGroupIdFormat); 
    };

    var productInformation = function(item, change) {

        var product = {
            productId: getProductId(item)
        };

        if (item.price || item.price == 0) product.price = item.price;

        if (change) product.quantity = change;
        else if (item.quantity) product.quantity = item.quantity;

        return product;
    }

    var cartInformation = function(cart) {
        var tagData = {
            value: cart.orderAmount,
            currency: cart.currency.code,
            cartDetails: []
        };

        if (cart.orderId) tagData.orderId = '' + cart.orderId;

        for(var i =0; i < cart.items.length; i++) {
            var item = cart.items[i];

            tagData.cartDetails.push(productInformation(item));
        }
        return tagData;
    };

    w._tfa = w._tfa||[];
    
    var CallTag = function(eventData) {

        eventData.id = taboolaAccountId;

        if (campaignIds) eventData.campaignIds = campaignIds;

        if (!taboolaAccountId) {
            console.warn(tagName, "Missing taboolaAccountId", eventData); 
            return;
        }

        if(debug) console.log(tagName, eventData); 

        w._tfa.push(eventData);
    }

    w[t]=w[t]||{};var T=w[t];T.i=T.i||[];if(!T.init)T.init=function(f){T.i.push(f)};
    
    T.init(function(){

        var scriptTagAdded = false;
        function addScriptTag() {
            if (!scriptTagAdded) {
                scriptTagAdded = true;
                T.addPreconnectTag('https://cdn.taboola.com');
                T.addScriptTag('//cdn.taboola.com/libtrc/unip/'+taboolaAccountId+'/tfa.js',{id:'tb_tfa_script'});               
            }    
        }

        CallTag({notify: 'event', name: 'page_view'}); // I think name is case sensitive, with events lower case and ecevents upper case
    
        if (T.consent[consentRequired]) {
            addScriptTag();        
        }
        else {
            T.on('ConsentChanged',function(data){
                if (T.consent[consentRequired]) addScriptTag();
            });
        }

        {{#if settings.request.absolute_path '===' '/'}}
        CallTag({notify: 'ecevent', name: 'HOME_PAGE_VISIT'});
        {{/if}}

        T.on('.*',function(eventData, eventName){
            switch(eventName) {
                case "QuickSearch":
                case "SearchPage":
                    CallTag({notify: 'event', name: 'search'});                   
                    break;
                case "ProductPage":
                    if (useEcommEvents) {
                        CallTag({
                            notify: 'ecevent',
                            name: 'PRODUCT_VIEW',
                            productIds: [getProductId(eventData)]
                        });
                    }
                    break;
                case "ProductsVisible":
                    if (useEcommEvents) {
                        var tagData = {
                            notify: 'ecevent',
                            name: 'CATEGORY_VIEW',
                            productIds: eventData.list.items.map(function(item){
                                return getProductId(item);
                            })
                        }

                        if (eventData.list.listName) {
                            tagData.category = eventData.list.listName;
                        }

                        if (eventData.list.id) {
                            tagData.categoryId = eventData.list.id;
                        }

                        if (eventData.search) {
                            tagData.name = 'SEARCH';
                            tagData.searchTerm = eventData.search;
                        }

                        CallTag(tagData);
                    }
                    break;
                case "CartItemChanged": 
                    if (eventData.change > 0) CallTag({notify: 'event', name: 'add_to_cart', quantity: eventData.change});
                    if (useEcommEvents) {
                        if (eventData.change > 0) {
                            CallTag({
                                notify: 'ecevent', 
                                name: 'ADD_TO_CART', 
                                productIds: [getProductId(eventData.item)]
                            });
                        }
                        else {
                            CallTag({
                                notify: 'ecevent', 
                                name: 'REMOVE_FROM_CART', 
                                productIds: [getProductId(eventData.item)]
                            });
                        }
                    }
                    break;
                case "CheckoutStep1CustomerStarted":
                    CallTag({notify: 'event', name: 'start_checkout'});
                    if (useEcommEvents) {
                        CallTag({
                            notify: 'ecevent', 
                            name: 'CHECKOUT',
                            productIds: eventData.items.map(function(item){
                                return getProductId(item);
                            })
                        });
                    }
                    break;
                case "CheckoutStep5OrderCompleted":
                    CallTag({notify: 'event', name: 'add_payment_info'});
                                       
                    CallTag({
                        notify: 'event', 
                        name: 'make_purchase',
                        revenue: eventData.orderAmount, 
                        currency: eventData.currency.code, 
                        orderid: ''+eventData.orderId,                            
                        quantity: eventData.items.reduce(function(p, c){return p + c.quantity}, 0)                            
                    });

                    if (useEcommEvents) {
                        var tagData = cartInformation(eventData);

                        tagData.notify = 'ecevent';
                        tagData.name = 'PURCHASE';

                        // from the tag code. custType is valid and should be a boolean, however the code rejects it and cancels the event
                        // if (eventData.new_customer === true) {
                        //     tagData.custType = true;
                        // }
                        // if (eventData.new_customer === false) {
                        //     tagData.custType = false;
                        // }

                        CallTag(tagData);
                    }
                    break;
                case "AccountCreated":
                    CallTag({notify: 'event', name: 'complete_registration'}); 
                    break;
                case "ContactSuccess":
                    CallTag({notify: 'event', name: 'contact'}); //was lead_contact
                    break;
                case "SubscribeSuccess":
                    CallTag({notify: 'event', name: 'subscribe'}); //was lead_subscribe
                    break;
                case "AddToWishList":
                    CallTag({notify: 'event', name: 'add_to_wishlist'}); 
                    if (useEcommEvents) {
                        CallTag({
                            notify: 'ecevent', 
                            name: 'ADD_TO_WISH_LIST',
                            productIds: [getProductId(eventData)]
                        });
                    }
                    break;
                // REMOVE_FROM_WISH_LIST
            }                    
        });     
    })
}(window,"TagRocket")
</script>