Integrate a Content-based Platform

read
Last updated at:

Overview

If you've built your own content solution or the data you would like to track is not yet supported by one of our pre-built integrations, you can integrate with Klaviyo using our JavaScript API, server-side API, and Custom Catalog integration.

The key components of integrating a content website are:

  • Reader data
  • Email subscribers
  • Website subscribers
  • Website activity
  • Content catalog

This guide focuses on how to sync important metrics, or key customer activities, to Klaviyo. While our JavaScript and server-side Track and Identify APIs can be used interchangeably, we recommend using the following setup for content-based businesses. Use this as a checklist when setting up your integration:

  • Use our JavaScript Track API for the following
    • Active on Site - When readers visit your website
    • Viewed Article - When readers view an article
    • Viewed Author - When readers view an author
    • Viewed Category - When readers view a category
    • Read Article - When readers finish reading an article
    • Followed Article - When readers follow an article
    • Followed Author - When readers follow an author
    • Followed Category - When readers follow a category
  • Use our server-side Identify API for the following:
    • Followed Articles -List of names of articles a reader follows for updates
    • Followed Authors - List of names of authors a reader follows
    • Followed Categories - List of names of categories a reader follows
  • Use our custom catalog feed for the following
    • Feed of Articles - An XML feed or JSON feed of all articles on the website

The detailed data you send to Klaviyo along with view, favorite, and other website activity events will determine how you can filter and segment these events in Klaviyo. To understand how data must be structured so that key event details are available for segmentation, check out our guide on segment conditions.

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

Make sure to check out our custom integration FAQ for any questions about custom integrations or reach out to our Support Team.

On Site Behaviors (JavaScript Track API)

To enable our JavaScript API and our ability to publish forms to your site, add the following snippet such that it appears on every page on your website (often the end of the footer is a good place to add this). Make sure to replace PUBLIC_API_KEY with your Klaviyo account's 6 character Public API Key:

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

Active on Site

Once you’ve added the snippet above, Active on Site should now trigger for any person who is cookied:

"Viewed" Events

If you'd like to set up a read abandonment flow or build segments based on article browsing data, you"ll need to add JavaScript event tracking for "Viewed" metrics. 

Viewed Article

In order to trigger an event for when someone lands on a page with an article, add a snippet like the following to your article template:

<script text="text/javascript">
 var _learnq = _learnq || [];
 var item = {
  "Title": "The Ultimate Guide to (Last Minute) Holiday Marketing",
  "ArticleID": "holiday-marketing-101",
  "Author": "Mike Green",
  "PublicationDate": "2019-11-13 09:00:00",
  "Categories": ["Holiday","Marketing","Black Friday"],
  "ImageURL": "https://www.klaviyo.com/wp-content/uploads/2018/11/customer-segment-cramming-for-black-friday-cyber-monday-klaviyoBOS-1500x700-bh-112018.jpg",
  "URL": "https://www.klaviyo.com/blog/last-minute-black-friday-strategy"
 };
 
 _learnq.push(["track", "Viewed Article", item]);
 
 _learnq.push(["trackViewedItem", {
  "Title": item.Title,
  "Categories": item.Categories,
  "ImageUrl": item.ImageURL,
  "Url": item.URL,
  "Metadata": {
   "Author": item.Author,
   "PublicationDate": item.PublicationDate
  }
 }]);
</script>

Similarly, on your author and category page templates, add the following snippets, respectively:

Viewed Author

<script text="text/javascript">
 var _learnq = _learnq || [];
 _learnq.push(["track", "Viewed Author", {
  "Name": "Mike Green",
  "AuthorID": "mg-01",
  "Categories": ["Holiday","Marketing","Black Friday"],
  "ImageURL": "https://www.klaviyo.com/wp-content/uploads/2018/08/MG.jpeg",
  "Bio": "Mike is the Product Marketing Manager at Klaviyo. While Mike loves launching new features, he also enjoys playing and watching all kinds of sports and exploring all of Boston's best restaurants and bars.",
  "URL": "https://www.klaviyo.com/blog/last-minute-black-friday-strategy#article-author"
 }]);
</script>

 

Viewed Category

<script text="text/javascript">
 var _learnq = _learnq || [];
 _learnq.push(["track", "Viewed Category", {
  "Title": "Email Marketing",
  "CategoryID": "email-marketing",
  "ImageURL": "https://www.klaviyo.com/wp-content/themes/klaviyo/dist/images/klaviyo-bos-badge-gray_ab2f255e.png",
  "URL": "https://www.klaviyo.com/blog/category/email-marketing"
 }]);
</script>

After "Viewed" web tracking has been configured for your site, this data will begin populating in your Klaviyo account as known visitors browse your pages.

Read Article

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

If you have a way 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 of that estimated amount of time (represented by readingTime below):

<script text="text/javascript">
 var readingTime = 12; // Estimated amount of minutes to read article
 var _learnq = _learnq || [];
 setTimeout(function() {
  _learnq.push(["track", "Read Article", {
   "Title": "The Ultimate Guide to (Last Minute) Holiday Marketing",
   "ArticleID": "holiday-marketing-101",
   "Author": "Mike Green",
   "PublicationDate": "2019-11-13 09:00:00",
   "Categories": ["Holiday","Marketing","Black Friday"],
   "ImageURL": "https://www.klaviyo.com/wp-content/uploads/2018/11/customer-segment-cramming-for-black-friday-cyber-monday-klaviyoBOS-1500x700-bh-112018.jpg",
   "URL": "https://www.klaviyo.com/blog/last-minute-black-friday-strategy"
  }]);
 }, (readingTime * 60 * 1000));
</script>

Alternatively, an event like this can be tracked when someone reaches the bottom of an article. In order to trigger it after reaching a specific part of the page, use something like the following which will trigger the event at a specific pixel offset from the bottom of the page (bottomOffset):

<script text="text/javascript">
 var bottomOffset = 2423; // Amount of pixels the end of the article is from the bottom of the page.
 var _learnq = _learnq || [];
 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
   _learnq.push(["track", "Read Article", {
    "Title": "The Ultimate Guide to (Last Minute) Holiday Marketing",
    "ArticleID": "holiday-marketing-101",
    "Author": "Mike Green",
    "PublicationDate": "2019-11-13 09:00:00",
    "Categories": ["Holiday","Marketing","Black Friday"],
    "ImageURL": "https://www.klaviyo.com/wp-content/uploads/2018/11/customer-segment-cramming-for-black-friday-cyber-monday-klaviyoBOS-1500x700-bh-112018.jpg",
    "URL": "https://www.klaviyo.com/blog/last-minute-black-friday-strategy"
   }]);
  }
 };
 window.addEventListener("scroll", trackReadArticle, true); 
</script>

“Followed” Events

If readers are able to follow certain articles, authors, or categories, you can track an event for when they initially follow (in order to trigger any follow ups or message targeting around that action) as well as a profile property representing a list of who or what they currently follow (in order to target them using filters and segments based on an up-to-date representation of who/what they follow). The event can be passed with our JavaScript Track API when the reader clicks the follow button. The profile property should be synced via a server-side Identify API request in order to keep it up to date, there is no way to add to or remove from an array property via the API so the full list of followed items must be synced each time.

Followed Article

Add something like the following to your article template in order to trigger a Followed Article event when a person clicks a "follow" button for that article (in this example, the button has an id of followArticleButton).

<script text="text/javascript">
 var _learnq = _learnq || [];
 document.getElementById("followArticleButton").addEventListener("click",function(e){
  _learnq.push(["track", "Followed Article", {
   "Title": "The Ultimate Guide to (Last Minute) Holiday Marketing",
   "ArticleID": "holiday-marketing-101",
   "Author": "Mike Green",
   "PublicationDate": "2019-11-13 09:00:00",
   "Categories": ["Holiday","Marketing","Black Friday"],
   "ImageURL": "https://www.klaviyo.com/wp-content/uploads/2018/11/customer-segment-cramming-for-black-friday-cyber-monday-klaviyoBOS-1500x700-bh-112018.jpg",
   "URL": "https://www.klaviyo.com/blog/last-minute-black-friday-strategy"
  }]);
 });
</script>

In addition to the event, 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": "john.smith@test.com",
   "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"]
 }
}

Similarly, on your author and category page templates, add the following snippets, respectively:

Followed Author

This example assumes the button has an id of followAuthorButton.

<script text="text/javascript">
 var _learnq = _learnq || [];
 document.getElementById("followAuthorButton").addEventListener("click",function(e){
  _learnq.push(["track", "Followed Author", {
   "Name": "Mike Green",
   "AuthorID": "holiday-marketing-101",
   "Categories": ["Holiday","Marketing","Black Friday"],
   "ImageURL": "https://www.klaviyo.com/wp-content/uploads/2018/08/MG.jpeg",
   "Bio": "Mike is the Product Marketing Manager at Klaviyo. While Mike loves launching new features, he also enjoys playing and watching all kinds of sports and exploring all of Boston's best restaurants and bars.",
   "URL": "https://www.klaviyo.com/blog/last-minute-black-friday-strategy#article-author"
  }]);
 });
</script>

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

{
 "token": "PUBLIC_API_KEY",
 "properties": {
   "$email": "john.smith@test.com",
   "FollowedAuthors": ["Mike Green","Dan Cohen"],
   "FollowedAuthorIDs": ["mg-01","dc-02"]
 }
}

Followed Category

This example assumes the button has an id of followCategoryButton.

<script text="text/javascript">
 var _learnq = _learnq || [];
 document.getElementById("followCategoryButton").addEventListener("click",function(e){
  _learnq.push(["track", "Followed Category", {
   "Title": "Email Marketing",
   "CategoryID": "email-marketing",
   "ImageURL": "https://www.klaviyo.com/wp-content/themes/klaviyo/dist/images/klaviyo-bos-badge-gray_ab2f255e.png",
   "URL": "https://www.klaviyo.com/blog/category/email-marketing"
  }]);
 });
</script>

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

{
 "token": "PUBLIC_API_KEY",
 "properties": {
   "$email": "john.smith@test.com",
   "FollowedCategories": ["Email Marketing","Black Friday"],
   "FollowedCategoryIDs": ["email-marketing","blk-fri"]
 }
}

Catalog Feed Integration

Our catalog feed integration allows you to sync a feed of your "catalog" of articles to your Klaviyo account. Integrating your catalog will allow you to use our Product Feeds and Product Blocks in emails and enables the use of dynamic personalized recommendations in emails to people who view your content online. In order to set up a custom catalog integration, please reach out to our Support Team. They will pass along the documentation and examples for this setup and will need to be notified once the setup is complete in order to activate the feed on your account.

Note, our 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 guide to integrating a subscription ecommerce platform.

Example Flows Ideas

Browse Abandonment

Re-engage browsers who landed on a category page but never went on to look at an article.

Trigger: Viewed Category

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

Read Abandonment

Re-engage browsers who landed on an article page but never stayed long enough to read it.

Trigger: Viewed Article

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

x
Was this article helpful?
6 out of 8 found this helpful