Guide to integrating a headless Magento 2 setup

read
Last updated at:

Overview

Learn about important considerations for integrating with Klaviyo if you are using a “headless” Magento 2 setup. If you are using Magento 2 to power your ecommerce store’s backend, but a different framework for the frontend (such as React.js, Angular etc.), then the following information is relevant for you.

Included integration features

A large part of Klaviyo’s Magento 2 integration relies on fetching data via Magento's server side API. Typically, this isn’t affected by using a decoupled frontend, and the integration will track the following events without further setup:

  • Placed Order
  • Fulfilled Order
  • Fulfilled Shipment
  • Canceled Order
  • Refunded Order
  • Started Checkout
Started Checkout events will sync provided you are still creating quotes and assigning an email address to them when the user checks out.

In addition, if you’ve enabled syncing customers subscribed to the Magento 2 Newsletter table, the sync should work as anticipated.

Additional setup needed

If you are using a headless setup, Klaviyo’s “Active on Site” JavaScript (also known as Klaviyo.js) which tracks when users are active on your site, and enables Klaviyo forms, will not be injected and must be added manually. Additionally, if you want to track when users view specific products on your site (which can be leveraged in a browse abandonment flow), you’ll need to add Klaviyo Viewed Product tracking JavaScript. You may also need to make some edits to enable your catalog syncing to Klaviyo, and can add a script to track users who log into your site.

Enable Active on Site tracking

Copy the snippet below and paste it in the header of your site to enable Active on Site tracking and Klaviyo forms. Make sure to replace PUBLIC_API_KEY with your Klaviyo public API key.

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

Enable Viewed Product tracking

Copy the snippet below and paste it on your product page template to enable Viewed Product tracking.

<script type="text/javascript">
var _learnq = _learnq || [];
var item = {
"ProductName": "Winnie the Pooh",
"ProductID": "1111",
"SKU": "WINNIEPOOH",
"Categories": ["Fiction", "Children"],
"ImageURL": "http://www.example.com/path/to/product/image.png",
"URL": "http://www.example.com/path/to/product",
"Brand": "Kids Books",
"Price": 9.99,
"CompareAtPrice": 14.99
 };
 _learnq.push(["track", "Viewed Product", item]);
 </script>

Make sure to update the values of the JSON properties in the snippet so that they dynamically pull from the relevant information needed for that property.

Product catalog

Your Magento 2 product catalog should sync normally with Klaviyo, though if you are using a custom URL structure you will need to add some rewrite rules to your codebase.

The default Magento 2 product URL follows the below structure:

https://[YOUR STORE]/catalog/product/view/id/[PRODUCT ID]

If your store is using a URL structure like

https://[YOUR STORE]/products/[Product Name]

Then you will need to add some rewrite rules to your codebase to redirect the standard Magento 2 product links to your custom URL structure

Track logged in users

If you have a login facility on your website, you can add some additional code to identify and track their activity. This code should be executed once the user has logged in.

Here is a script template to get you started:

<script> 
var _learnq = _learnq || [];
 {% if customer.is_logged_in %}
  _learnq.push(['identify', {
   '$email': 'person@email.com',
    '$first_name': 'First_name',
     '$last_name': 'Last_name'
      }]);
       {% endif %}
       </script>

Additional Resources

x
Was this article helpful?
1 out of 2 found this helpful