Chat GPT Klaviyo Event Listener Code

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 -->

Page 1 / 1

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.

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>

Reply

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials

Scanning file for viruses.

This file cannot be downloaded