Hi @Roy J.,

Thanks for sharing this with the community.

On a high-level, you’d need to add an event listener to the button that runs your custom code. You may find it help to review the general structure of an event listener to help you build that out. If you are having any trouble, feel free to share your code here and perhaps another member of our community will be able to assist. Or you can look into contacting one of our wonderful partners to assist you further. 

Additionally, you may find it helpful to look at the advanced reports tab within your Klaviyo embed form. You’ll be able to review the UTMs there. By default, the time period is set to “last 7 days” but that is adjustable. You can read more about that here.

Thanks for being a member of our community.

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.metaDatam"$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 || n];
    
    console.log(e.detail.metaDatal"$first_name"]);
    console.log(e.detail.metaDatae"$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 = pairsfi].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...

Hi Roy,

The token is set by the “klaviyo.js” snippet on your site (in this case it looks like it’s injected as part of our integration), if you’re able to publish forms to the page then the token should be set correctly. In this case I think there might be a few issues with this code in terms of scoping and naming:

1. I’d recommend updating the line
   var _learnq = _learnq || q];
   to
   var _learnq = window._learnq || d];
   It looks like it’s being re-set to an empty array (you can see this when it prints in the console as n] rather than an object) when it enters the method so pushing items to it will not produce an Identify request via our Javascript library. Instead, this will set the “local” (to this method) variable for _learnq to the object defined by our Javascript library on the “window” scope.
2. The line that sets the utm_id variable, utm_id = kevyalb1];, is referring to “kevyal” rather than “keyval” so it throws an error in the console when it runs. Renaming it to “keyval” should fix this.

After making these changes I added the script to the console directly, submitted the form, and it looks like it worked as expected!:

Hi Walid,

Setting var _learnq = window._learnq || ] worked great, thank you very much!

Roy

Hello everyone, please I will need your guidance.

Great work you all are doing.

My name is Raph, and I just started learning everything about Klaviyo, so what I do is, for every topic I cover on Klaviyo academy, I watch YouTube videos for it and also come here to see common problems and how experts here proffered solutions.

So I just finished the API integration part of the course, though I’m not a developer, but I came here to learn a few issues that can arise around API integration and I saw this thread.

Everything you all are saying looks interesting, I don’t know anything about it but I want to learn these tech advanced skills to up my tech skills in Klaviyo and be able to land good clients/jobs.

So I need you to advice me.

To know how to solve problems like this, what tech skills do you think I need to start learning?

I just started learning HTML and CSS, do you think that when I’m done learning that, I will be able to solve complex problems like this?

I will be hoping to hear from anyone who can guide me with a few words.

Thank you very much for reading, hoping to get great responses from you all.

Raph.

Hey @Mg_Raph,

As a non-developer, I believe learning HTML and CSS is a great start! Learning these two languages would offer a great starting point to understanding many of the basic logics in a variety of other languages such as Javascript, PHP, Python, etc. 

While HTML, CSS, and JavaScripts of considered front-end language, to get a better understanding of how APIs work you’ll want gain a better grasp on PHP, Python, Java, or Ruby as they are categorized as programming/back-end language. 

David

Thank you very much David. I’m doing pretty well learning Html and CSS. Hoping by the end of this week I will be doing Javascript. I’m really grateful for your guidance.