Skip to main content
Solved

Chat GPT Klaviyo Event Listener Code


Forum|alt.badge.img+5

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

 

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

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

4 replies

Forum|alt.badge.img+5
  • Author
  • Problem Solver II
  • 23 replies
  • April 23, 2023

Just for reference:

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

cbarley
Klaviyo Employee
Forum|alt.badge.img+5
  • Klaviyo Employee
  • 18 replies
  • Answer
  • April 23, 2023

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


Forum|alt.badge.img+5
  • Author
  • Problem Solver II
  • 23 replies
  • April 23, 2023

@cbarley This worked perfectly. Thanks again

For anyone interested, on Shopify the Login ID Form is #CustomerLoginForm

 


retention
Partner - Platinum
Forum|alt.badge.img+62
  • 2025 Champion
  • 920 replies
  • September 21, 2023

Somebody call Skynet… they have a few bots that are lost. 😅