Solved

Chat GPT Klaviyo Event Listener Code

  • 23 April 2023
  • 4 replies
  • 341 views

Userlevel 2
Badge +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 -->

 

icon

Best answer by cbarley 24 April 2023, 00:47

View original

4 replies

Userlevel 2
Badge +5

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.
Userlevel 3
Badge +5

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

Userlevel 2
Badge +5

@cbarley This worked perfectly. Thanks again

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

 

Userlevel 7
Badge +58

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

Reply