Cart Tracking

Adding cart tracking is an important step to ensure that your Beam Partner Portal data, especially Cart Completion Rate and lift metrics, are accurate.

Add Beam cart tracking to existing cart update handlers

If you have an existing method for tracking update events (add, remove, changes) to your site’s cart, such as the cart.js tracking found in BigCommerce’s Cornerstone theme, the following code should be added when an update event happens to let Beam know of the updated cart details.

Replace

• apiKey - Your Beam SDK API Key
• storeId - Your Beam Store Id
• storeBaseDomain - The base domain for your storefront. This should be the common domain between your public storefront and the checkout experience, if they are on different subdomains. For example, if your store is hosted at “myshop.com” and your checkout flow is hosted on “checkout.myshop.com”, your storeBaseDomain should be set to “myshop.com”.
• baseUrl - This value can remain unchanged, unless you are specifically using Beam’s Staging environment

[...]
import utils from '@bigcommerce/stencil-utils';
import { events } from "https://sdk.beamimpact.com/web-sdk/v1.30.1/dist/integrations/utils.esm.js";
import { updateCart } from "https://sdk.beamimpact.com/web-sdk/v1.30.1/dist/integrations/cart.esm.js";
[...]

export default class Cart extends PageManager {
  trackBeamCart() {
    const apiKey = "{{ SDK API Key }}";
    const storeId = {{ Store Id }};
    const storeBaseDomain = "{{ Store Base Domain }}";
    const baseUrl = "https://api.beamimpact.com";
    const options = {
      method: "GET",
      headers: {
        "Content-Type": "application/json"
      }
    };

    fetch("/api/storefront/carts/", options, {
      credentials: "include",
    })
    .then(function (response) {
      return response.json();
    })
    .then(function (cart) {
      const lineItems = cart?.lineItems;
      const lineItemCount = lineItems && Object.keys(lineItems).reduce((acc, curr) => {
        const lineItemGroup = lineItems[curr];
        return acc += (lineItemGroup?.reduce((acc2, curr2) => acc2 += curr2?.quantity, 0) || 0)
      }, 0);
      const cartData = {
        cartId: cart?.cartId,
        beamCartId: window.localStorage?.getItem("beam_cart_id") || undefined,
        itemCount: lineItemCount || 0,
        subtotal: cart?.baseAmount,
        currencyCode: cart?.currency?.code
      };

      // Emit a cart change event that will allow the Select Nonprofit
      // widget to hide itself if the cart is empty.
      window.dispatchEvent(new events.BeamCartChangeEvent(cartData));

      const response = await updateCart({
        apiKey,
        storeId,
        domain: storeBaseDomain,
        baseUrl
      }, cartData);
      const beamCartInfo = await response.json();

      window.localStorage.setItem(
        "beam_cart_id",
        beamCartInfo?.beamCartId
      );
      window.localStorage.setItem(
        `beam_cart_key_${apiKey}`,
        JSON.stringify(cartData)
      );
    }
  }

  refreshContent(remove) {
    this.trackBeamCart();
    [...]
  }
};

---

Using BigCommerce Event Hooks

If supported by your BigCommerce theme, Beam Cart Tracking can be added via Javascript Event Hooks.

Add the following code to an existing Javascript file used in your theme that is loaded when the cart is displayed to the user.

Replace

• apiKey - Your Beam SDK API Key
• storeId - Your Beam Store Id
• baseUrl - This value can remain unchanged, unless you are specifically using Beam’s Staging environment
• eventHookNames - In this method, add the cart update events that are currently emitted by your theme. For reference, these events are typically found in your theme’s HTML as data-cart-... and may be custom to your theme. For more information, please see BigCommerce’s documentation on using event hooks in your code. In the example below, event hooks are set up for common cart events, but may need to modified to meet your site’s usage:
  • cart-item-add
  • cart-item-remove
  • cart-item-update

[...]
import utils from '@bigcommerce/stencil-utils';
import { events } from "https://sdk.beamimpact.com/web-sdk/v1.30.1/dist/integrations/utils.esm.js";
[...]

export default class Cart extends PageManager {
  onReady() {
    utils.hooks.on("cart-item-add", this.getAndTrackCart);
    utils.hooks.on("cart-item-remove", this.getAndTrackCart);
    utils.hooks.on("cart-item-update", this.getAndTrackCart);
  }

  trackBeamCart() {
    const apiKey = "{{ SDK API Key }}";
    const storeId = {{ Store Id }};
    const baseUrl = "https://api.beamimpact.com";
    const options = {
      method: "GET",
      headers: {
        "Content-Type": "application/json"
      }
    };

    fetch("/api/storefront/carts/", options, {
      credentials: "include",
    })
    .then(function (response) {
      return response.json();
    })
    .then(function (cart) {
      const lineItems = cart?.lineItems;
      const lineItemCount = lineItems && Object.keys(lineItems).reduce((acc, curr) => {
        const lineItemGroup = lineItems[curr];
        return acc += (lineItemGroup?.reduce((acc2, curr2) => acc2 += curr2?.quantity, 0) || 0)
      }, 0);
      const cartData = {
        cartId: cart?.cartId,
        itemCount: lineItemCount || 0,
        subtotal: cart?.baseAmount,
        currencyCode: cart?.currency?.code
      };

      // Emit a cart change event that will allow the Select Nonprofit
      // widget to hide itself if the cart is empty.
      window.dispatchEvent(new events.BeamCartChangeEvent(cartData));

      await fetch(`${baseUrl}/api/v3/cart`, {
        method: "POST",
        mode: "cors",
        cache: "no-cache",
        headers: {
          "Content-Type": "application/json",
          "Authorization": `Api-Key ${apiKey}`
        },
        body: JSON.stringify({
          ...cartData,
          storeId: window.BeamImpact.storeId
        })
      });

      window.localStorage.setItem(
        `beam_cart_key_${apiKey}`,
        JSON.stringify(cartData)
      );
    }
  }

  refreshContent(remove) {
    this.trackBeamCart();
    [...]
  }
};