Skip to main content
Problem Solver I
July 17, 2024
Solved

Custom event + Subscribe to list

  • July 17, 2024
  • 3 replies
  • 159 views

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

    This topic has been closed for replies.
    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));
            }
          }
        });
      

     

    3 replies

    MarcDAuthor
    Problem Solver I
    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).

    MarcDAuthor
    Problem Solver I
    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));
            }
          }
        });
      

    MarcDAuthorAnswer
    Problem Solver I
    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));
            }
          }
        });