Skip to main content
Solved

New api, submitting an event to track


Forum|alt.badge.img

Hello, 

I’m helping on a site that has 2 fetch calls in the legacy format. For the first one, we are tracking an event that will trigger an email showing the customer their form results for later use. The fetch code looks like this:
 

fetch('https://a.klaviyo.com/api/track', {
body: d,
method: 'POST',
referrer: document.URL,
referrerPolicy: 'strict-origin-when-cross-origin',
credentials: 'omit',

})

“d” in the body above is a new FormData object, with this appended:

const data = {
    token: window.themeVariables.settings.klaviyoId,
    event: "Save Color Quiz Results",
    customer_properties: {
    $email: this.email,
    $consent: "['email']",
  },

  properties: {
    quizActivity: this.activity,
    quizCondition: this.weather,
    quizItemRecommendations: [],
  }
}


(the array of data.properties.quizItemRecommendations gets populated before the following JSON.stringify)

const d = new FormData();
d.append('data', JSON.stringify(data));



Then if they have also opted in for the newsletter, there is this code, which is similar, but has a different endpoint and doesn’t JSON.stringify the body (formData) first:

const listId = window.themeVariables.settings.klaviyoColorQuizListId;
const formData = new FormData();
formData.append('g', listId);
formData.append('$email', this.email);
formData.append('$consent', "['email']");
const subscribePromise = fetch('https://a.klaviyo.com/ajax/subscriptions/subscribe', {
  referrer: document.URL,
  referrerPolicy: 'no-referrer-when-downgrade',
  body: formData,
  method: 'POST',
  mode: 'cors',
  credentials: 'omit',
});

Here is the formData:
const formData = new FormData();
formData.append('g', listId);
formData.append('$email', this.email);
formData.append('$consent', "['email']");

So, my question is how to update these for the new APIs?
For instance, I noticed on this page:
https://developers.klaviyo.com/en/reference/create_client_event
that most of the data is in an ‘attributes’ object. For the first code above, would I put the customer_properties and the properties in an attributes object, or leave them as they are? Code on Klaviyo’s end is using those values to populate the email that gets sent.

For the 2nd part (the newsletter sub) do I just use the JS here:
https://developers.klaviyo.com/en/reference/create_client_subscription
but with most of the info not listed, or blank (we’re only using the listId, email and consent here)?

Best answer by Maxbuzz

Hello @mroberts  Yes, you are correct.

You will have to use the attributes object for first use case and Subscription APi for newsletter sub

View original
Did this topic or the replies in the thread help you find an answer to your question?

2 replies

Forum|alt.badge.img+31
  • Partner
  • 252 replies
  • Answer
  • June 12, 2024

Hello @mroberts  Yes, you are correct.

You will have to use the attributes object for first use case and Subscription APi for newsletter sub


Forum|alt.badge.img
  • Author
  • Contributor I
  • 1 reply
  • June 12, 2024

Thanks Maxbuzz - yes, I read the docs more carefully and got it working!