Klaviyo Device Mode Integration

Send events to Klaviyo using RudderStack device mode.

RudderStack lets you send your event data to Klaviyo via device mode using the native web SDK.

info
RudderStack loads the Klaviyo native SDK from https://static.klaviyo.com/ domain. Based on your website’s content security policy, you might need to allowlist this domain to load the Klaviyo SDK successfully.

Identify

The identify call lets you identify a visiting user and associate them to their actions. It also lets you record the traits about them like their name, email address, etc.

success
You can send any number of key-value pairs as user traits and RudderStack updates them as custom profile properties in Klaviyo.

To create a new user in Klaviyo, you must pass either the userId, email, or phone properties in the identify call. If a user already exists, RudderStack updates the user profile with the latest values.

A sample identify call is shown below:

rudderanalytics.identify("1hKOmRA4el9Z", {
  firstName: "Alex",
  lastName: "Keener",
  email: "alex@example.com",
  phone: "+12 345 678 900",
  title: "Owner",
  organization: "Company",
  zip: "100-0001",
  Flagged: false,
  properties: {
    listId: "XUepkK",
    subscribe: true,
    consent: ["email"],
    smsConsent: true,
  },
})

Note that specifying consent and smsConsent in the event properties overrides the respective settings specified in the RudderStack dashboard.

Track

The track call lets you record the user actions along with any properties associated with them.

A sample track call is shown below:

rudderanalytics.track("Checked Out", {
  Clicked_Rush_delivery_Button: true,
  total_value: 2000,
  Ordered: ["T-Shirt", "jacket"],
  revenue: 2000,
})

In the above snippet, RudderStack captures the information related to the Checked Out event, along with the details of the event.

To associate a user with an event, you need to pass either their userId, email, or phone in the track call. A sample server-side track call along with the user information is as shown:

client.track({
  userId: "1hKsmRA4el9Z",
  event: "Item Purchased",
  properties: {
    revenue: 97.5,
    products: [
      {
        productId: "pro1",
        price: 32.5,
        quantity: 3,
      },
    ],
  },
  context: {
    traits: {
      email: "alex@example.com",
    },
  },
})

In the above snippet, RudderStack captures the information related to the Item Purchased event, along with its additional information in properties. Moreover, since this event is captured using a server-side SDK, RudderStack passes the user information in context along with a unique userId.

Note that:

  • Use context.traits to pass the information in your track or screen events in case you are using a server-side SDK that does not persist user context information.
  • To set a specific value to the screen or track type event, you need to pass the event-related property in the properties field. Also, you can send revenue property in the track event and RudderStack will automatically map it to Klaviyo’s special property $value.

Ecommerce event mapping

RudderStack converts the following ecommerce events to the corresponding Klaviyo events:

RudderStack eventKlaviyo event
Product Viewed
Product Clicked
Viewed Product
Product AddedAdded to Cart
Checkout StartedStarted Checkout

In addition to the above, RudderStack sends the following:

  • Customer properties: Must contain either the email or phone_number. RudderStack extracts these customer properties from traits/context.traits in the track call.

As mentioned above, you can send any number of key-value pairs as user traits and RudderStack updates them as custom profile properties in Klaviyo.

  • Token: Public API key from the RudderStack dashboard.

Additionally, you can choose to send specific fields for each of the events covered in the following sections:

Product Viewed

RudderStack maps the Product Viewed event to Viewed Product and maps the following event properties:

RudderStack propertyKlaviyo property
nameProductName
product_idProductID
skuSKU
image_urlImageURL
urlURL
brandBrand
pricePrice
compare_at_priceCompareAtPrice
categoriesCategories

Product Added

RudderStack maps the Product Added event to Added to Cart and maps the following event properties:

RudderStack propertyKlaviyo property
value$value
nameAddedItemProductName
product_idAddedItemProductID
skuAddedItemSKU
image_urlAddedItemImageURL
urlAddedItemURL
priceAddedItemPrice
quantityAddedItemQuantity
categoriesAddedItemCategories
item_namesItemNames
checkout_urlCheckoutURL
items (deprecating soon)
products
Items
warning
properties.items will be deprecated soon.

Note that products/items can contain the following parameters:

RudderStack parametersKlaviyo parameters
product_idProductID
skuSKU
nameProductName
quantityQuantity
pricePrice
totalRowTotal
urlURL
image_urlImageURL
categoriesProductCategories

Checkout Started

RudderStack maps the Checkout Started event name to Started Checkout and maps the following event properties:

RudderStack ParametersKlaviyo Parameters
order_id$event_id
value$value
categoriesCategories
item_namesItemNames
items (deprecating soon)
products
Items
checkout_urlCheckoutURL
warning
properties.items will be deprecated soon.

Note that products / items can contain the following parameters:

RudderStack parametersKlaviyo parameters
product_idProductID
skuSKU
nameProductName
quantityQuantity
pricePrice
totalRowTotal
urlURL
image_urlImageURL
categoriesProductCategories

A sample track call containing the above ecommerce event parameters is shown below:

rudderanalytics.track("checkout started ", {
  order_id: "1234",
  value: 12.34,
  categories: ["category1", "category2"],
  checkout_url: "http://www.testcall.com",
  item_names: ["item1", "item2"],
  products: [{
      product_id: "pId1",
      sku: "sku1",
      name: "item1",
      url: "https://www.item1URL.com",
      price: 1.0,
      quantity: 1,
      image_url: "https://www.item1Image.com,
      categories: ["category1", "category2"],
      row_total: 1.0
    },
    {
      product_id: "pId2",
      sku: "sku2",
      name: "item2",
      url: "https://www.item2URL.com",
      price: 2.0,
      quantity: 1,
      image_url: "https://www.item2Image.com,
      categories: ["category1", "category2"],
      row_total: 2.0
    },
  ],
});
warning
It is not mandatory to specify the order_id as Klaviyo automatically assigns the timestamp to the event. However, if explicitly specified, it must be unique. Klaviyo automatically discards the events containing a duplicate order_id.

Page

The page call lets you record your website’s page views with any additional relevant information about the viewed page.

You can send the name and category information in the page event by enabling the Send Page As Track setting in the RudderStack dashboard. To associate the properties with the page view event, enable the Additional Page info setting as well.

A sample page call is shown below:

rudderanalytics.page("Cart", "Cart Viewed", {
  path: "/cart",
  referrer: "test.com",
  search: "term",
  title: "test_item",
  url: "http://test.in",
})

Questions? Contact us by email or on Slack