Custom Pixel

window.mParticle = {
    config: {
        isDevelopmentMode: true,
        identifyRequest: {
            userIdentities: {
                email: 'email@example.com',
                customerid: '123456',
            },
        },
        identityCallback: function(result) {
            // Do something once an identity call has been made.
            // For more information, see https://docs.mparticle.com/developers/client-sdks/web/idsync/#sdk-initialization-and-identify
            console.log(result);
        },
        dataPlan: {
           planId: 'my_plan_id',
           planVersion: 2
        }
    },
};

//load the SDK
(
function(t){window.mParticle=window.mParticle||{};window.mParticle.EventType={Unknown:0,Navigation:1,Location:2,Search:3,Transaction:4,UserContent:5,UserPreference:6,Social:7,Other:8};window.mParticle.eCommerce={Cart:{}};window.mParticle.Identity={};window.mParticle.config=window.mParticle.config||{};window.mParticle.config.rq=[];window.mParticle.config.snippetVersion=2.3;window.mParticle.ready=function(t){window.mParticle.config.rq.push(t)};var e=["endSession","logError","logBaseEvent","logEvent","logForm","logLink","logPageView","setSessionAttribute","setAppName","setAppVersion","setOptOut","setPosition","startNewSession","startTrackingLocation","stopTrackingLocation"];var o=["setCurrencyCode","logCheckout"];var i=["identify","login","logout","modify"];e.forEach(function(t){window.mParticle[t]=n(t)});o.forEach(function(t){window.mParticle.eCommerce[t]=n(t,"eCommerce")});i.forEach(function(t){window.mParticle.Identity[t]=n(t,"Identity")});function n(e,o){return function(){if(o){e=o+"."+e}var t=Array.prototype.slice.call(arguments);t.unshift(e);window.mParticle.config.rq.push(t)}}var dpId,dpV,config=window.mParticle.config,env=config.isDevelopmentMode?1:0,dbUrl="?env="+env,dataPlan=window.mParticle.config.dataPlan;dataPlan&&(dpId=dataPlan.planId,dpV=dataPlan.planVersion,dpId&&(dpV&&(dpV<1||dpV>1e3)&&(dpV=null),dbUrl+="&plan_id="+dpId+(dpV?"&plan_version="+dpV:"")));var mp=document.createElement("script");mp.type="text/javascript";mp.async=true;mp.src=("https:"==document.location.protocol?"https://jssdkcdns":"http://jssdkcdn")+".mparticle.com/js/v2/"+t+"/mparticle.js" + dbUrl;var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(mp,c)}
)("REPLACE WITH API KEY");

analytics.subscribe('page_viewed', async (event) => {
    window.mParticle.logPageView('Page View: ' + event.context.document.title, {
        page: event.context.document.location.href,
        title: event.context.document.title,
        referrer: event.context.document.referrer,
    });
});

analytics.subscribe("cart_viewed", event => {
    window.mParticle.ready(function () {
        var products = [];

        event.data.cart.lines.forEach(function (cartItem) {
            var mpProduct = window.mParticle.eCommerce.createProduct(
                cartItem.merchandise.product.title,      // Name
                cartItem.merchandise.sku,                // SKU
                cartItem.cost.totalAmount.amount,        // Price
                cartItem.quantity,                       // Quantity
                cartItem.merchandise.title,              // Variant
                cartItem.merchandise.product.type,       // Category
                cartItem.merchandise.product.vendor,     // Brand
            );
       
            products.push(mpProduct);
        });

        var transactionAttributes = {
            Step: 1
        };

        window.mParticle.eCommerce.logProductAction(
            window.mParticle.ProductActionType.Checkout, // Product Action Type
            products,                                    // Product(s)
            undefined,                                   // Custom Attributes
            undefined,                                   // Custom Flags
            transactionAttributes                        // TransactionAttributes
        );
    });
});

analytics.subscribe("checkout_completed", event => {
    window.mParticle.ready(function () {
        var products = [];

        event.data.checkout.lineItems.forEach(function (product) {
            var mpProduct = window.mParticle.eCommerce.createProduct(
                product.title,                  // Name
                product.variant.sku,            // SKU
                product.finalLinePrice.amount,  // Price
                product.quantity,               // Quantity
                product.variant.title,          // Variant
                product.variant.product.type,   // Category
                product.variant.product.vendor, // Brand
            );

            products.push(mpProduct);
        });

        var checkoutTotalPrice = event.data.checkout.totalPrice.amount;
        var transactionAttributes = {
            Step: 3
            Revenue: checkoutTotalPrice,
        };

        window.mParticle.eCommerce.logProductAction(
            window.mParticle.ProductActionType.Checkout, // Product Action Type
            products,                                    // Product(s)
            undefined,                                   // Custom Attributes
            undefined,                                   // Custom Flags
            transactionAttributes                        // TransactionAttributes
        );
    });
});

analytics.subscribe("checkout_started", event => {
    window.mParticle.ready(function () {
        var products = [];

        event.data.checkout.lineItems.forEach(function (product) {
            var mpProduct = window.mParticle.eCommerce.createProduct(
                product.title,                  // Name
                product.variant.sku,            // SKU
                product.finalLinePrice.amount,  // Price
                product.quantity,               // Quantity
                product.variant.title,          // Variant
                product.variant.product.type,   // Category
                product.variant.product.vendor, // Brand
            );

            products.push(mpProduct);
        });

        var transactionAttributes = {
            Step: 2
        };

        window.mParticle.eCommerce.logProductAction(
            window.mParticle.ProductActionType.Checkout, // Product Action Type
            products,                                    // Product(s)
            undefined,                                   // Custom Attributes
            undefined,                                   // Custom Flags
            transactionAttributes                        // TransactionAttributes
        );
    });
});

 analytics.subscribe("collection_viewed", event => {
    window.mParticle.ready(function () {
        var products = [];

        event.data.collection.productVariants.forEach(function (product) {
            var mpProduct = window.mParticle.eCommerce.createProduct(
                product.title,              // Name
                product.sku,                // SKU
                product.price.amount,       // Price
                1,                          // Quantity
                undefined,                  // Variant
                product.product.type,       // Category
                product.product.vendor,     // Brand
            );
            
            products.push(mpProduct);
        });
  
        var impression = window.mParticle.eCommerce.createImpression(
            event.data.collection.title,
            products
        );

        window.mParticle.eCommerce.logImpression(impression);
    });
 });

analytics.subscribe("page_viewed", event => {
    window.mParticle.ready(function () {
        window.mParticle.logPageView(
            'Page View: ' + event.context.document.title,
            {
                page: event.context.document.location.href,
                title: event.context.document.title,
                referrer: event.context.document.referrer,
            }
        );
    });
});

analytics.subscribe("product_added_to_cart", event => {
    window.mParticle.ready(function () {
        var product = window.mParticle.eCommerce.createProduct(
            event.data.cartLine.merchandise.product.title,  // Name
            event.data.cartLine.merchandise.sku,            // SKU
            event.data.cartLine.merchandise.price.amount,   // Price
            event.data.cartLine.quantity,                   // Quantity
            event.data.cartLine.merchandise.title,          // Variant
            event.data.cartLine.merchandise.type,           // Category
            event.data.cartLine.merchandise.vendor,         // Brand
        );
     
        window.mParticle.eCommerce.logProductAction(
            window.mParticle.ProductActionType.AddToCart,
            product
        );
    });
});

analytics.subscribe("product_removed_from_cart", event => {
    window.mParticle.ready(function () {
        // We noticed that in some cases, the merchandise or product title comes back as undefined
        var name = event.data.cartLine.merchandise.title || event.data.cartLine.merchandise.untranslatedTitle;
        var product = window.mParticle.eCommerce.createProduct(
            name,                                           // Name
            event.data.cartLine.merchandise.sku,            // SKU
            event.data.cartLine.merchandise.price.amount,   // Price
            event.data.cartLine.quantity,                   // Quantity
            event.data.cartLine.merchandise.title,          // Variant
            event.data.cartLine.merchandise.type,           // Category
            event.data.cartLine.merchandise.vendor,         // Brand
        );
    
        window.mParticle.eCommerce.logProductAction(
            window.mParticle.ProductActionType.RemoveFromCart,
            product
        );
    });
});

analytics.subscribe("product_viewed", event => {
    console.log('subscribing to product viewed', event);

    window.mParticle.ready(function () {
        var product = window.mParticle.eCommerce.createProduct(
            event.data.productVariant.title,              // Name
            event.data.productVariant.sku,                // SKU
            event.data.productVariant.price.amount,       // Price
            1,                                            // Quantity
            undefined,                                    // Variant
            event.data.productVariant.product.type,       // Category
            event.data.productVariant.product.vendor,     // Brand
        );
     
        window.mParticle.eCommerce.logProductAction(
            window.mParticle.ProductActionType.ViewDetail,
            product
        );

    });
});