Chat GPT Klaviyo Event Listener Code

Forum|Forum|3 years ago
April 23, 2023
4 replies
574 views

I asked Chat GPT to create a Klaviyo Event that every time a user logs in, Send the Event to Klaviyo. Doesn’t seem to work correctly. Perhaps someone could take a look at the code and see what is wrong:

<!-- Klaviyo User Login API Event -->
{% if customer %}

<script>

// Set your Klaviyo API key and event name
const klaviyoApiKey = "KLAVIYO_API_KEY_HERE";
const eventName = "KLAV USER LOGIN";

// Get the Shopify customer ID and email
const customerId = "{{ customer.id }}";
const customerEmail = "{{ customer.email }}";

// Send the event to Klaviyo
const sendKlaviyoEvent = () => {
  // Set the data for the event
  const eventData = {
    "token": klaviyoApiKey,
    "event": eventName,
    "customer_properties": {
      "$email": customerEmail,
      "shopify_customer_id": customerId
    }
  };

  // Send the event data to Klaviyo
  const xhr = new XMLHttpRequest();
  xhr.open("POST", "https://a.klaviyo.com/api/track");
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.send(JSON.stringify(eventData));
};

// Listen for the customer login event
document.addEventListener("login", () => {
  // Call the function to send the event to Klaviyo
  sendKlaviyoEvent();
});

</script>
    {% endif %}
  
<!-- Klaviyo User Login API Event -->

This topic has been closed for replies.

Best answer by cbarley

Hi @jmacman ,

This code utilizes Klaviyo’s V1 Server-side APIs which should not be used on the front-end because they require a private API key. Private keys should never be placed on a website since it exposes that in the browser under the hood and private keys can read sensitive information from your account. I’d recommend deleting the key from your Klaviyo account.

Since ChatGPT only knows about information on the web prior to 2021 and perhaps the prompt given wasn’t specific enough, it gave you information on our old APIs and gave you server-side code. Instead, you should utilize the klaviyo object using javascript and identify the user → track the login. This requires listening for the submission of the form and then sending Klaviyo the event once the login is complete

Here’s an example of what this might look like:

<script>
  function onIdentifyCompleteCallback () {
    klaviyo.push(["track", "Logged In", {}]);
  }

  var identityProperties = {
    '$email' : "{{ customer.email }}"
  }
  // Identify user then send custom event for the identified user

  var loginForm = document.querySelector("#whatever_the_id_of_the_form_is");

  loginForm.addEventListener("submit", function(e){
    klaviyo.identify(identityProperties, onIdentifyCompleteCallback);
  })
</script>

The script might not be perfect, but it should be a good start

J

jmacmanAuthor

Problem Solver II

Just for reference:

I placed the Shopify code in the theme.liquid template right above the </body> tag
I created a new API Key that only gave Read/Write access to the Event parameter.

cbarleyAnswer

Klaviyo Employee

Hi @jmacman ,

This code utilizes Klaviyo’s V1 Server-side APIs which should not be used on the front-end because they require a private API key. Private keys should never be placed on a website since it exposes that in the browser under the hood and private keys can read sensitive information from your account. I’d recommend deleting the key from your Klaviyo account.

Since ChatGPT only knows about information on the web prior to 2021 and perhaps the prompt given wasn’t specific enough, it gave you information on our old APIs and gave you server-side code. Instead, you should utilize the klaviyo object using javascript and identify the user → track the login. This requires listening for the submission of the form and then sending Klaviyo the event once the login is complete

Here’s an example of what this might look like:

<script>
  function onIdentifyCompleteCallback () {
    klaviyo.push(["track", "Logged In", {}]);
  }

  var identityProperties = {
    '$email' : "{{ customer.email }}"
  }
  // Identify user then send custom event for the identified user

  var loginForm = document.querySelector("#whatever_the_id_of_the_form_is");

  loginForm.addEventListener("submit", function(e){
    klaviyo.identify(identityProperties, onIdentifyCompleteCallback);
  })
</script>

The script might not be perfect, but it should be a good start

- Connor Barley, Klaviyo Solution Architect