Integrate a content-based platform

If you’re using an ecommerce platform not currently supported by one of Klaviyo’s pre-built integrations or partner integrations, or you’ve built your own custom solution, you can integrate with Klaviyo using our APIs, which enable, for example:

• Onsite activity tracking with the JavaScript API.
• Managing lists and segments with the server-side API.
• Creating and managing custom catalogs.

Key integration components

The key components of integrating a content website are:

• Reader data
  Tracking information such as name, email, phone number, or other profile attributes.
• Email subscribers
  Tracking who is subscribed to your newsletter.
• Website subscribers
  Tracking who is subscribed to your website.
• Website activity
  Tracking who is active on your site, what experiences they view, etc.
• Content catalog
  Syncing your catalog of content to Klaviyo.

About JavaScript and server-side event APIs

This guide focuses on how to sync important metrics, or key customer activities, to Klaviyo. These events can be created in the browser with the JavaScript API and on the backend with the server-side API.

• Use our JavaScript API for the following:

  • Active on Site
    When someone visits your website
  • Viewed Article
    When someone views an article
  • Viewed Author
    When someone views an author
  • Viewed Category
    When someone views a category
  • Read Article
    When someone finishes reading an article
  • Followed Article
    When someone follows an article
  • Followed Author
    When someone follows an author
  • Followed Category
    When someone follows a category

• Use our server-side Identify API for the following:

  • Followed Articles
    List of names of articles someone follows for updates
  • Followed Authors
    List of names of authors someone follows
  • Followed Categories
    List of names of categories someone follows

• Use our custom catalog feed for the following:

  • Feed of articles
    An XML feed or JSON feed of all articles on the website

🚧

For populating your Klaviyo product catalog, you can use either a custom catalog feed or the catalog API. You can only populate products using one option. To shift from a custom catalog feed to the new catalog API you must first disable the existing custom catalog feed before using the API.

Filtering and segmenting on these events will be based on the level of detail in the event data sent to Klaviyo. To understand how data must be structured so that key event details are available for segmentation, check out our articles on segment conditions and how to structure your data for segment and flow filters.

🚧

The code snippets in this guide use example data. You will need to update the values of the JSON properties in these snippets so that they dynamically pull from the relevant information needed for that property.

Check out our Custom integration FAQ for any questions about custom integrations.

JavaScript Track API for onsite metrics

Active on Site tracking snippet

To be able to publish forms directly from Klaviyo to your site, add the following JavaScript snippet so it appears on every page on your website (the end of the footer is often a good place to add it). Make sure to replace PUBLIC_API_KEY with your Klaviyo account's six character public API key:

<script type="application/javascript" async
src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>

Once you’ve added the snippet above, an Active on Site metric will trigger for any person who is cookied. A browser can be cookied in any of the ways listed in our article on Klaviyo onsite tracking.

Initialize the klaviyo object

Ensure that you have initialized the klaviyo object on your page before executing any of the following code snippets.

Viewed event tracking snippet

If you'd like to set up a read/browse abandonment flow or build segments based on article browsing data, you'll need to add JavaScript event tracking for a Viewed metric. All Viewed metrics are tied to user profiles. Users must already be cookied by Klaviyo in order for these metrics to track properly. After you configure tracking for these Viewed events on your site, this data will begin populating in your Klaviyo account as known visitors browse your pages.

📘

Make sure to replace item.___ in the below code snippets with whatever item object your platform uses for product properties.

Viewed Article

To track a viewed article, add the following snippet to your article template:

<script type="text/javascript">
   var item = {
  "Title": item.Title,
  "ArticleID": item.ArticleID,
  "Author": item.Author,
  "PublicationDate": item.PublishDate,
  "Categories": item.Categories,
  "ImageURL": item.ImageURL,
  "URL": item.URL
 };
 klaviyo.push(["track", "Viewed Article", item]);
</script>

You can also track a recently viewed item on a person’s profile under a “Recently Viewed Items” section by adding the following snippet directly below the Viewed Article snippet above.

Calling the Klaviyo object's trackViewedItem function below will populate a product feed of recently viewed products that can be included in emails. For more information on how to use the “Recently Viewed Items” feature in a template, check out our article on inserting recently viewed items into an email.

The following snippet can be added directly below the Viewed Product snippet:

<script type="text/javascript">
 klaviyo.push(["trackViewedItem", {
  "Title": item.Title,
  "Categories": item.Categories,
  "ImageUrl": item.ImageURL,
  "Url": item.URL,
  "Metadata": {
   "Author": item.Author,
   "PublicationDate": item.PublicationDate
  }
 }]);
</script>

Viewed Author

To track a viewed author, which can be used to alert readers about articles by that author, add the following snippet to your author template:

<script type="text/javascript">
 klaviyo.push(["track", "Viewed Author", {
  "Name": item.Name,
  "AuthorID":item.AuthorID,
  "Categories": item.Categories,
  "ImageURL": item.ImageURL,
  "Bio": item.Bio,
  "URL": item.URL
 }]);
</script>

Viewed Category

To track a viewed category, which can be used to alert readers about articles in that category, add the following snippet to your category template:

<script type="text/javascript">
 klaviyo.push(["track", "Viewed Category", {
  "Title": item.Title,
  "CategoryID": item.CategoryID,
  "ImageURL": item.ImageURL,
  "URL": item.URL
 }]);
</script>

Read Article

In order to build segments based on a person's past reading interests, or to filter people out of a read abandonment flow, you'll need to add JavaScript event tracking for a Read Article metric. Read Article can be implemented in a few different ways.

For example, if you have a method of estimating the amount of time it takes a person to read an article on your site, you can set the event to track after a delay in that estimated amount of time (represented by readingTime below):

<script type="text/javascript">
 var readingTime = 12; // Estimated amount of minutes to read article
 setTimeout(function() {
  klaviyo.push(["track", "Read Article", {
   "Title": item.Title,
   "ArticleID": item.ArticleID,
   "Author": item.Author,
   "PublicationDate": item.PublishDate,
   "Categories": item.Categories,
   "ImageURL": item.ImageURL,
   "URL": item.URL
  }]);
 }, (readingTime * 60 * 1000));
</script>

Alternatively, you can track when someone reaches the bottom of an article. To trigger the event after someone reaches a specific part of the page, you can use something like the following code snippet. This snippet will trigger the event at a specific pixel offset from the bottom of the page (bottomOffset):

<script type="text/javascript">
 var bottomOffset = 2423; // Amount of pixels the end of the article is from the bottom of the page.
 trackReadArticle = function(e) {
  if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - bottomOffset) {
   window.removeEventListener("scroll", trackReadArticle, true); // Stop the onscroll function from triggering more than once
   klaviyo.push(["track", "Read Article", {
   "Title": item.Title,
   "ArticleID": item.ArticleID,
   "Author": item.Author,
   "PublicationDate": item.PublishDate,
   "Categories": item.Categories,
   "ImageURL": item.ImageURL,
   "URL": item.URL
   }]);
  }
 };
 window.addEventListener("scroll", trackReadArticle, true); 
</script>

“Followed” Events

If readers are able to follow certain articles, authors, or categories on your site, you can track an event for the follow to:

• Trigger any follow-up flows 
• Target your messages around that action

Along with these events, tracking profile properties representing a list of who or what a reader currently follows allows you to target them using filters and segments based on these follows. 

Followed events use both JavaScript API and server-side event API requests. The event can be passed with our JavaScript API when the reader clicks the follow button. The profile property should be synced via a server-side request in order to keep it up to date. 

Followed Article

You can track a Followed Article event when a person clicks the "follow" button for an article by adapting the following snippet and adding it to your article template. In this example, the follow button has an id of followArticleButton, which you should replace with the ID of your own button. 

<script type="text/javascript">
document.getElementById("followArticleButton").addEventListener("click",function(e){
  klaviyo.push(["track", "Followed Article", {
   "Title": item.Title,
   "ArticleID": item.ArticleID,
   "Author": item.Author,
   "PublicationDate": item.PublishDate,
   "Categories": item.Categories,
   "ImageURL": item.ImageURL,
   "URL": item.URL
  }]);
 });
</script>

In addition to the event above, you can send a server-side Identify API request containing all of the articles a person currently follows. The payload should look something like this:

{
 "token": "PUBLIC_API_KEY",
 "properties": {
   "email": "[email protected]",
   "FollowedArticles": ["The Ultimate Guide to (Last Minute) Holiday Marketing","4 Steps for a Successful Holiday Season with Klaviyo"],
   "FollowedArticleIDs": ["holiday-marketing-101","4-step-holiday-kla"]
 }
}

Followed Author

You can track a Followed Author event when a person clicks the "follow" button for an author by adapting the following snippet and adding it to your author template. This example’s button has an id of followAuthorButton.

<script type="text/javascript">
document.getElementById("followAuthorButton").addEventListener("click",function(e){
  klaviyo.push(["track", "Followed Author", {
   "Name": item.Name,
   "AuthorID": item.AuthorID,
   "Categories": item.Categoreis,
   "ImageURL": item.ImageURL,
   "Bio": item.Bio,
   "URL": item.URL
  }]);
 });
</script>

In addition to the event, send a server-side API request containing all of the authors a person currently follows. The payload should look something like this:

 "properties": {
   "email": "[email protected]",
   "FollowedAuthors": ["Mike Green","Dan Cohen"],
   "FollowedAuthorIDs": ["mg-01","dc-02"]
 }

Followed Category

You can track a Followed Category event when a person clicks the "follow" button for a category by adapting the following snippet and adding it to your category template. This example’s button has an id of followCategoryButton.

<script type="text/javascript">
document.getElementById("followCategoryButton").addEventListener("click",function(e){
  klaviyo.push(["track", "Followed Category", {
   "Title": item.Title,
   "CategoryID": item.CategoryID,
   "ImageURL": item.ImageURL,
   "URL": item.URL
  }]);
 });
</script>

In addition to the event, you can send a server-side Identify API request containing all of the categories a person currently follows. The payload should look something like this:

 "properties": {
   "email": "[email protected]",
   "FollowedCategories": ["Email Marketing","Black Friday"],
   "FollowedCategoryIDs": ["email-marketing","blk-fri"]
 }

Catalog feed integration

Integrating your catalog will allow you to utilize product blocks in emails. To set up a custom catalog integration, please follow Klaviyo’s custom catalog sync integration process. 

Note that Klaviyo’s catalog feed examples include some product specific fields like "price". If your articles do not require a purchase, you can leave this field out. "categories" is also an optional field, but we highly recommend including these as they enable you to create product feeds that include or exclude certain categories.

Other considerations

If people can subscribe to paid content on your website, you can follow our article Integrate a subscription ecommerce platform. The guide outlines how to sync customer data, email subscribers, website activity, order activity, and subscriptions. 

Example flow ideas

Browse abandonment

Purpose: Re-engage browsers who landed on a category page but never looked at an article.

Trigger: Viewed Category

Flow Filter: Has Viewed Article zero times since starting this flow

Read abandonment

Purpose: Re-engage browsers who landed on an article page but did not stay long enough to read it.

Trigger: Viewed Article

Flow Filter: Has Read Article zero times since starting this flow

Additional resources

• Custom integration FAQs

• Developer Group on the Klaviyo Community