Using javascript to pass UTMs from an inbound URL into Klaviyo via their API

Hi Dov,

Thank you very much your quick reply. I have created an event listener according to the help page that you linked.  However, I have one question.  This the event listener code is listed at the bottom of this reply.  I have replaced the formId, companyId, and g with the appropriate ids from our account.  It is unclear from the documentation how should I treat $email.  Obviously the email that I want to capture is the email supplied in the form. Do I leave $email set to ‘test@example.com’ in the event listener or replace with a variable designed to capture the form email?

You’re help is greatly appreciated, Thanks! Roy

var event = new CustomEvent("klaviyoForms", {
  detail: {
    type: 'submit',
    formId: 'F12345',
    companyId: 'C12345', 
    metaData: { 
    g: '12345',
    $email: 'test@example.com',
  } 
});
window.dispatchEvent(event);

Looks like I can access email from the form via e.detail.metaData[“$email”], which produced the email submitted by the form...

 window.addEventListener("klaviyoForms", function(e) {
  if (e.detail.type == 'submit') {
    console.log(e.detail.metaData["$email"]);
  }
});
 

Hi @Roy J.,

Of course, glad I could help and thank you for sharing all of this!

var event = new CustomEvent("klaviyoForms", {
  detail: {
    type: 'submit',
    formId: 'F12345',
    companyId: 'C12345', 
    metaData: { 
    g: '12345',
    $email: 'test@example.com',
  } 
});
window.dispatchEvent(event);

Hi again Dove,

I'm now using the Identity API by using _learnq.push to update custom properties when submit is clicked on the embedded form. I'm following the instructions in https://developers.klaviyo.com/en/docs/identify-api-reference and the push returns a value of success (1), but the pushed property data is not overwriting the default values for custom property in the form.

I’ve tested it using an embedded form with and without the custom property already created.  If the custom prop is already created, I only get the default value.  If it’s not created, I do not see the prop appear on the test profile.

I’m not sure what to try next…

Thanks!

Roy

Hi @Roy J.,

Thanks for sharing this update.

Would you mind also sharing the identify call being made so we can have a look? 

Thanks.

 Hi Dove,

I’m just trying to get the first UTM into the Profile, so I’m only trying insert the utm_id currently.  Here is the entire event listener (complete with console.log statements).

I have three screenshots but it doesn’t appear that I can attach them to this reply? 1.) Klaviyo form setup, 2.)  Console output for e.detail.metaData and _learnq &  3.) Custom properties on the resulting profile record after form submission.

Roy

window.addEventListener("klaviyoForms", function(e) {
  if (e.detail.type == 'submit') {
    var _learnq = _learnq || [];
    
    console.log(e.detail.metaData["$first_name"]);
    console.log(e.detail.metaData["$email"]);
    console.log(_learnq);
    
    var self = window.location.toString();
    var querystring = self.split("?");
    
    if (querystring.length > 1) {
      var pairs = querystring[1].split("&");
      var utm_id;
      
      for (i in pairs) {
        var keyval = pairs[i].split("=");
        
        switch (keyval[0]) {
          case 'utm_id':
            utm_id = kevyal[1];
            break;
        } // switch
      } // for

      _learnq.push(['identify', {
        '$email' : e.detail.metaData["$email"],
        '$first_name' : e.detail.metaData["$first_name"],
        'Campaign ID' : utm_id
      }]);

      console.log(_learnq);

    } // if
  } // if
}); // addEventListener
 

Here are the screenshots.

This is the referring URL → ​​https://jennifersgranola.com/pages/winone?utm_source=ArcaMax&utm_medium=email&utm_campaign=OneYearFreeGiveaway&utm_id=C0001&utm_term=Recipes&utm_content=2022-01-06-S1

Thanks!

Roy

Looks like I may not be setting my token correct?  A return value of 1 just indicates proper formatting, not actual success for the push, will try that now...