Integrate a content-based platform
Learn how to integrate a content-based platform with Klaviyo.
If you’ve built your own content solution or the data you would like to track is not currently supported by one of Klaviyo’s pre-built integrations or partner integrations, you can integrate with Klaviyo using our JavaScript API, server-side API, and custom catalog integration.
Key integration components
The key components of integrating a content website are:
- Reader data
- Email subscribers
- Website subscribers
- Website activity
- Content catalog
About JavaScript and server-side Track and Identify APIs
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 setup outlined in the following checklist for the reasons outlined in our article [Getting started with the Track and Identify API] (doc:getting-started-with-track-and-identify-apis).
-
Use our JavaScript Track 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
- Active on Site
-
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
- Followed Articles
-
Use our custom catalog feed for the following:
- Feed of articles
An XML feed or JSON feed of all articles on the website
- Feed of articles
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 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/klaviyo.js?company_id=PUBLIC_API_KEY"></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.
"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.
Viewed Article
To track a viewed article, add the following snippet to your article template:
<script type="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]);
</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. For more information on how to implement this, check out our guide on how to insert recently viewed items into an email.
<script type="text/javascript">
_learnq.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">
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
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">
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>
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
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, 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.
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 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 Track API and server-side Identify API requests. 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
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">
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 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">
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": "[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">
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, 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:
{
"token": "PUBLIC_API_KEY",
"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
Updated almost 2 years ago