Skip to main content
Solved

Custom event + Subscribe to list


Forum|alt.badge.img+2
  • Problem Solver I
  • 4 replies

Hi all,


Maybe a super simple question but we got the following situation:

Customer can take a test to find the right product, at the end they get a result with best matching products. They can leave there email behind which we are gonna use within Klaviyo to send them the test results and more information about the products that best matched.

On filling in the form and clicking send, the even “customer-info” shoots with some variables like the email they left behind and the advicedproducts.

We want to make sure that the event is linked to the email thats left behind and if the email is not within Klaviyo, its added and subscribed to a list.

How could we do this?
​​

// AIDEN TO KLAVIYO
      var _learnq = _learnq || [];
    // Listen for events on the webpage
    window.addEventListener("message", function (event) {
    // Check if the event is from Aiden and if it is the 
    // customer info submission event
    if (event.data.advisorId && event.data.type === "customer-info") {
    // Access the event data using event.data
    var email = event.data.data.email
    var checkboxChecked = event.data.data.checkboxChecked
    var advicedproducts = event.data.data.advice

    // Custom Klaviyo Event
    var item = {
    "AdvicedProducts": advicedproducts
    };
    _learnq.push(['track', 'Adviced Products',{
    "Adviced Products": advicedproducts
    }]);
    console.log("Adviced Products:", advicedproducts);
    console.log('Adviced Products triggered :)');
   }
 });
// END AIDEN TO KLAVIYO

 

I appreciate the help!

Kind regards,
Marc​​​​​​​

Best answer by MarcD

// AIDEN LOVES KLAVIYO

    // Listen for events on the webpage
    window.addEventListener("message", function (event) {
      // Check if the event is from Aiden and if it is the customer info submission event
      if (event.data.advisorId && event.data.type === "customer-info") {
        // Access the event data using event.data
        var email = event.data.data.email;
        var checkboxChecked = event.data.data.checkboxChecked;
        var advicedproducts = event.data.data.advice;
        
        var SalesChannel = document.querySelector('input[name=salesChannel]').value;
        var Language = document.querySelector('input[name=klaviyoLanguage]').value;

        const eventOptions = {
          method: 'POST',
          headers: {
            accept: 'application/json',
            revision: '2024-07-15',
            'content-type': 'application/json'
          },
          body: JSON.stringify({
            data: {
              type: 'event',
              attributes: {
                properties: {
                  AdvicedProducts: advicedproducts,
                  SalesChannel: SalesChannel,
                  Language: Language
                },
                metric: { data: { type: 'metric', attributes: { name: 'Adviced Products' } } },
                profile: {
                  data: {
                    type: 'profile',
                    attributes: {
                      email: email
                    }
                  }
                }
              }
            }
          })
        };

        fetch('https://a.klaviyo.com/client/events/?company_id=COMPID', eventOptions)
          .then(response => response.json())
          .then(response => console.log(response))
          .catch(err => console.error(err));



        if (checkboxChecked) {
        // Mapping SalesChannel to corresponding list IDs
        var listIds = {
          'EN': 'LISTIDHERE_EN',
          'NL': 'LISTIDHERE_NL',
          'DE': 'LISTIDHERE_DE'
        };
        
        var listId = listIds[SalesChannel] || listIds['EN']; // Default to 'EN' if no match
        // Define the subscriptionOptions with dynamic email and other data
        const subscriptionOptions = {
          method: 'POST',
          headers: {
            revision: '2024-07-15',
            'content-type': 'application/json'
          },
          body: JSON.stringify({
            data: {
              type: 'subscription',
              attributes: {
                custom_source: 'Aiden signup form',
                profile: {
                  data: {
                    type: 'profile',
                    attributes: {
                      email: email
                    }
                  }
                }
              },
              relationships: { list: { data: { type: 'list', id: listId } } }
            }
          })
        };

        fetch('https://a.klaviyo.com/client/subscriptions/?company_id=COMPID', subscriptionOptions)
          .then(response => response.json())
          .then(response => console.log(response))
          .catch(err => console.error(err));
        }
      }
    });
  

 

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

3 replies

Forum|alt.badge.img+2
  • Author
  • Problem Solver I
  • 4 replies
  • July 17, 2024

I adjusted it to:

// AIDEN TO KLAVIYO
      var _learnq = _learnq || [];
    // Listen for events on the webpage
    window.addEventListener("message", function (event) {
    // Check if the event is from Aiden and if it is the 
    // customer info submission event
    if (event.data.advisorId && event.data.type === "customer-info") {
    // Access the event data using event.data
    var email = event.data.data.email
    var checkboxChecked = event.data.data.checkboxChecked
    var advicedproducts = event.data.data.advice

    //KLAVIYO

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/x-www-form-urlencoded");

var urlencoded = new URLSearchParams();
urlencoded.append("g", "LISTID");
urlencoded.append("$fields", "email");
urlencoded.append("email", email);

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: urlencoded,
  redirect: 'follow'
};

fetch("https://manage.kmail-lists.com/ajax/subscriptions/subscribe", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

  // Custom Klaviyo Event
    var item = {
    "AdvicedProducts": advicedproducts
    };
    _learnq.push(['track', 'Adviced Products',{
    "Adviced Products": advicedproducts
    }]);
    console.log("Adviced Products:", advicedproducts);
    console.log('Adviced Products triggered :)');
   }
 });
// END AIDEN TO KLAVIYO


This makes the subscription to a List working, only the Custeom event “ADVICED PRODUCTS” is attributed to the an other person (active cookie).


Forum|alt.badge.img+2
  • Author
  • Problem Solver I
  • 4 replies
  • July 22, 2024

For those wondering, below was the solution:

// AIDEN LOVES KLAVIYO

    // Listen for events on the webpage
    window.addEventListener("message", function (event) {
      // Check if the event is from Aiden and if it is the customer info submission event
      if (event.data.advisorId && event.data.type === "customer-info") {
        // Access the event data using event.data
        var email = event.data.data.email;
        var checkboxChecked = event.data.data.checkboxChecked;
        var advicedproducts = event.data.data.advice;
        
        var SalesChannel = document.querySelector('input[name=salesChannel]').value;
        var Language = document.querySelector('input[name=klaviyoLanguage]').value;

        const eventOptions = {
          method: 'POST',
          headers: {
            accept: 'application/json',
            revision: '2024-07-15',
            'content-type': 'application/json'
          },
          body: JSON.stringify({
            data: {
              type: 'event',
              attributes: {
                properties: {
                  AdvicedProducts: advicedproducts,
                  SalesChannel: SalesChannel,
                  Language: Language
                },
                metric: { data: { type: 'metric', attributes: { name: 'Adviced Products' } } },
                profile: {
                  data: {
                    type: 'profile',
                    attributes: {
                      email: email
                    }
                  }
                }
              }
            }
          })
        };

        fetch('https://a.klaviyo.com/client/events/?company_id=COMPID', eventOptions)
          .then(response => response.json())
          .then(response => console.log(response))
          .catch(err => console.error(err));

 

        if (checkboxChecked) {
        // Mapping SalesChannel to corresponding list IDs
        var listIds = {
          'EN': 'LISTIDHERE_EN',
          'NL': 'LISTIDHERE_NL',
          'DE': 'LISTIDHERE_DE'
        };
        
        var listId = listIds[SalesChannel] || listIds['EN']; // Default to 'EN' if no match
        // Define the subscriptionOptions with dynamic email and other data
        const subscriptionOptions = {
          method: 'POST',
          headers: {
            revision: '2024-07-15',
            'content-type': 'application/json'
          },
          body: JSON.stringify({
            data: {
              type: 'subscription',
              attributes: {
                custom_source: 'Aiden signup form',
                profile: {
                  data: {
                    type: 'profile',
                    attributes: {
                      email: email
                    }
                  }
                }
              },
              relationships: { list: { data: { type: 'list', id: listId } } }
            }
          })
        };

        fetch('https://a.klaviyo.com/client/subscriptions/?company_id=COMPID', subscriptionOptions)
          .then(response => response.json())
          .then(response => console.log(response))
          .catch(err => console.error(err));
        }
      }
    });
  


Forum|alt.badge.img+2
  • Author
  • Problem Solver I
  • 4 replies
  • Answer
  • July 22, 2024
// AIDEN LOVES KLAVIYO

    // Listen for events on the webpage
    window.addEventListener("message", function (event) {
      // Check if the event is from Aiden and if it is the customer info submission event
      if (event.data.advisorId && event.data.type === "customer-info") {
        // Access the event data using event.data
        var email = event.data.data.email;
        var checkboxChecked = event.data.data.checkboxChecked;
        var advicedproducts = event.data.data.advice;
        
        var SalesChannel = document.querySelector('input[name=salesChannel]').value;
        var Language = document.querySelector('input[name=klaviyoLanguage]').value;

        const eventOptions = {
          method: 'POST',
          headers: {
            accept: 'application/json',
            revision: '2024-07-15',
            'content-type': 'application/json'
          },
          body: JSON.stringify({
            data: {
              type: 'event',
              attributes: {
                properties: {
                  AdvicedProducts: advicedproducts,
                  SalesChannel: SalesChannel,
                  Language: Language
                },
                metric: { data: { type: 'metric', attributes: { name: 'Adviced Products' } } },
                profile: {
                  data: {
                    type: 'profile',
                    attributes: {
                      email: email
                    }
                  }
                }
              }
            }
          })
        };

        fetch('https://a.klaviyo.com/client/events/?company_id=COMPID', eventOptions)
          .then(response => response.json())
          .then(response => console.log(response))
          .catch(err => console.error(err));



        if (checkboxChecked) {
        // Mapping SalesChannel to corresponding list IDs
        var listIds = {
          'EN': 'LISTIDHERE_EN',
          'NL': 'LISTIDHERE_NL',
          'DE': 'LISTIDHERE_DE'
        };
        
        var listId = listIds[SalesChannel] || listIds['EN']; // Default to 'EN' if no match
        // Define the subscriptionOptions with dynamic email and other data
        const subscriptionOptions = {
          method: 'POST',
          headers: {
            revision: '2024-07-15',
            'content-type': 'application/json'
          },
          body: JSON.stringify({
            data: {
              type: 'subscription',
              attributes: {
                custom_source: 'Aiden signup form',
                profile: {
                  data: {
                    type: 'profile',
                    attributes: {
                      email: email
                    }
                  }
                }
              },
              relationships: { list: { data: { type: 'list', id: listId } } }
            }
          })
        };

        fetch('https://a.klaviyo.com/client/subscriptions/?company_id=COMPID', subscriptionOptions)
          .then(response => response.json())
          .then(response => console.log(response))
          .catch(err => console.error(err));
        }
      }
    });