Event Collection in Web SDK

Event Collection in Web SDK

In order to collect website events and use that data to create behavioral segments in dEngage you have to determine the type of events and data that needs to collected. Once you have determined that, you will need to create a “Big Data” table in dEngage. Collected events will be stored in this table. Multiple tables can be defined depending on your specific need.

Any type of event can be collected. The content and the structure of the events are completely flexible and can be changed according to unique business requirements. You will just need to define a table for events.

Once defined, all you have to do is to send the event data to these tables. dEngage SDK has only two functions for sending events: sendDeviceEvent. Most of the time you will just need the sendDeviceEvent function. For ecommerce accounts there is predefined event tables. And you can feed these tables by usern ecommerce event functions.

1. Login / Logout Action

If the user loggs in or you have user information, this means you have contact_key for that user. You can set contact_key in order to match user with the browser. There are two functions for getting and setting contact_key.

setContactKey

If user logged in set user id. This is important for identifying your users. You can put this function call in every page. It will not send unnecessary events.

  1. dengage('setContactKey', userId);

getContactKey

If you need to get current user information from SDK use this function.

  1. dengage('getContactKey', function(userId) {
        //use userId (contact_key) here
    });

2. Event Collection

If your dEngage account is an ecommerce account, you should use standart ecommerce events in the SDK. If you need some custom events or your account is not standart ecommerce account, you should use custom event functions.

a) Events for Ecommerce Accounts

There are standart ecommerce events in dEngage SDK.

  • Page View Events
    • Home page view
    • Product page view
    • Category page view
    • Promotion page view
    • …
  • Shopping Cart Events
    • Add to cart
    • Remove from cart
    • View Cart
    • Begin Checkout
  • Order Events
    • Order
    • Cancel order
  • Wishlist Events
    • Add to wishlist
    • Remove from wishlist
  • Search Event

For there event there is related tables in your account.

Page View Events

Page view events will be sent to page_view_events table. If you add new columns to this table. You can send these in the event data.

  1. // Home page view
    dengage("ec:pageView", {
        page_type: "home"
        // ... extra columns in page_view_events table, can be added here
    });

    // category page view
    dengage("ec:pageView", {
        page_type: "category",
        category_id: "123" //category id here
        // ... extra columns in page_view_events table, can be added here
    });

    // product page view
    dengage("ec:pageView", {
        page_type: "product",
        product_id: '123' //product id here
        // ... extra columns in page_view_events table, can be added here
    });

    // promotion page view
    dengage("ec:pageView", {
        page_type: "promotion",
        promotion_id: '123' //promotion id here
        // ... extra columns in page_view_events table, can be added here
    });

    // custom page view
    dengage("ec:pageView", {
        page_type: "custom"
        // ... extra columns in page_view_events table, can be added here
    });

    // For other pages you can send anything as page_type

Shopping Cart Events

These events will be stored in shopping_cart_events and shopping_cart_events_detail. There are 4 shopping cart event functions. addToCart, removeFromCart, viewCart, beginCheckout Every shopping cart event function needs all items in cart as an array. You must send last version of the shopping cart.

For example: If there is one item in cart and item id is 5. And after that, an add to cart action is happened with the item id 10. You have to send 10 as product_id in event parameters and you must send current version of cart items. Meaning [5, 10]

  1. // All items currently exists in shopping cart
    var cartItems = [
        {
            product_id: '123',
            product_variant_id: '1222',
            quantity: 1,
            unit_price: 1233,
            discounted_price: 123,
            // ... extra columns in shopping_cart_events_detail table, can be added here
        },
        {
            product_id: '123',
            product_variant_id: '1222',
            quantity: 1,
            unit_price: 1233,
            discounted_price: 123,
            // ... extra columns in shopping_cart_events_detail table, can be added here
        }    
    ];

    // Add to cart action
    dengage('ec:addToCart', {
        product_id: '123',
        product_variant_id: '1222',
        quantity: 1,
        unit_price: 1233,
        discounted_price: 123,
        // ... extra columns in shopping_cart_events table, can be added here
        cartItems: cartItems,
    });

    // Remove from cart action
    dengage('ec:removeFromCart', {
        product_id: '123',
        product_variant_id: '1222',
        quantity: 1,
        unit_price: 1233,
        discounted_price: 123,
        // ... extra columns in shopping_cart_events table, can be added here
        cartItems: cartItems,
    });

    // view cart action
    dengage('ec:viewCart', {
        // ... extra columns in shopping_cart_events table, can be added here
        cartItems: cartItems,
    });

    // begin checkout action
    dengage('ec:beginCheckout', {
        // ... extra columns in shopping_cart_events table, can be added here
        cartItems: cartItems,
    });

Order Events

Orders events will be sent to order_events and order_events_detail tables.

  1. // Ordered items or canceled items
    var cartItems = [
        {
            product_id: '123',
            product_variant_id: '1222',
            quantity: 1,
            unit_price: 1233,
            discounted_price: 123,
            // ... extra columns in order_events_detail table, can be added here
        },
        {
            product_id: '123',
            product_variant_id: '1222',
            quantity: 1,
            unit_price: 1233,
            discounted_price: 123,
            // ... extra columns in order_events_detail table, can be added here
        }    
    ];
    dengage('ec:order', {
        order_id: '123',
        item_count: 123, // total ordered item count
        total_amount: 1, // total price
        payment_method: 'card',
        shipping: 5,
        discounted_price: 123, // use total price if there is no discount
        coupon_code: '', // use if necessary
        // ... extra columns in order_events table, can be added here
        cartItems: cartItems, //ordered items
    });

    dengage('ec:cancelOrder', {
        order_id: '123', // canceled order
        item_count: 123, // canceled total item count
        total_amount: 1, // canceled item's total price
        discounted_price: 123, // use total price if there is no discount
        // ... extra columns in order_events table, can be added here
        cartItems: cartItems, // canceled items
    });

Search Event

Search events will be stored in search_events table.

  1. dengage('ec:search', {
        keywords: 'hello', // text in the searchbox
        result_count: 123, 
        filters: '', //use can send extra filters selected by user here. Formating is not specified
        // ... extra columns in search_events table, can be added here
    });

Wishlist Events

These events will be stored in wishlist_events and wishlist_events_detail. There are 2 wishlist event functions. addToWishlist, removeFromWishlist. In every event call, you can send all items in wishlist. It makes it easy to track current items in wishlist.

  1. // All items that are currently in wishlist
    var wishlistItems = [
        {
            product_id: '123',
            // ... extra columns in wishlist_events_detail table, can be added here
        },
        {
            product_id: '123',
            // ... extra columns in wishlist_events_detail table, can be added here
        }    
    ];

    dengage('ec:addToWishlist', {
        product_id: '123',
        // ... extra columns in wishlist_events table, can be added here
        items: wishlistItems, // current items
    });

    dengage('ec:removeFromWishlist', {
        product_id: '123',
        // ... extra columns in wishlist_events table, can be added here
        items: wishlistItems, // current items
    });

b) Custom Events

Send device (browser) specific events

You can use sendDeviceEvent function for sending events for the browser. Events are sent to a big data table defined in your dEngage account. That table must have relation to the master_device table. If you set contact_key for that browser. Collected events will be associated for that user.

dengage(‘sendDeviceEvent’, tableName, dataObject [, callback]);

  1. // for example if you have a table named "events"
    // and events table has "key", "event_date", "event_name", "product_id" columns
    // you just have to send the columns except "key" and "event_date", because those columns sent by the SDK

    var eventData = {
        event_name: ‘page_view’,
        product_id: 12345,
      };
      dengage(‘sendDeviceEvent’, ‘events’, eventData);​


    • Related Articles

    • How can I implement web SDK?

      Execute the following steps to implement web SDK: Create a web application on Admin Panel. Then, the system will provide a JavaScript code and service worker file. Add the JavaScript code to your website's source code (You must put it into <head> ...

    • Event Data Integration

      There are two options to send Event Data to D·engage: 1. Send event data via D·engage SDK First, you need to create a website application to use the dEngage Web SDK. Go to D·engage Event SDK page for detailed instructions to 'create an ...

    • Web Push SDK Implementation

      With D·engage's Web Push SDK you can collect session and event data from your website. You can also use the Web SDK to engage with your users by sending web push notifications.  Please check the following page to implement D·engage's Mobile Push SDK: ...

    • Event Collection in iOS SDK

      In order to collect app events and use that data to create behavioral segments in dEngage you have to determine the type of events and data that needs to collected. Once you have determined that, you will need to create a “Big Data” table in dEngage. ...

    • Event Collection in Android SDK

      In order to collect android mobile events and use that data to create behavioral segments in dEngage you have to determine the type of events and data that needs to collected. Once you have determined that, you will need to create a “Big Data” table ...