We are using embedded Klaviyo forms on our marketing landing pages built with Zipify in Shopify. I want to pass UTMs from the inbound URL via hidden fields in a Klaviyo embedded form to Klaviyo. The reason for doing this is for marketing source attribution for a Profile. However, Klaviyo support tells me that this is not supported. They say the best way to accomplish this is to use javascript to get the UTMs parameters and push them into Klaviyo via their API.
I have a script that gets the UTMs (Source, Campaign, Medium, Content, Term) and then pushes those to Klaviyo. I need to activate this upon Button Submit for the Klaviyo Embedded Form. Can anyone tell me how best to trigger the script upon Button Submit?
Thanks!
Roy
Best answer by Walid
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:
I’d recommend updating the line var _learnq = _learnq || []; to var _learnq = window._learnq || []; It looks like it’s being re-set to an empty array (you can see this when it prints in the console as [] 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.
The line that sets the utm_id variable, utm_id = kevyal[1];, 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!:
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.
A
Anonymous
0 replies
January 5, 2022
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?
Of course, glad I could help and thank you for sharing all of this!
Roy J. wrote:
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?
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.
Would you mind also sharing the identify call being made so we can have a look?
Thanks.
A
Anonymous
0 replies
January 12, 2022
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 || [];
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...
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:
I’d recommend updating the line var _learnq = _learnq || []; to var _learnq = window._learnq || []; It looks like it’s being re-set to an empty array (you can see this when it prints in the console as [] 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.
The line that sets the utm_id variable, utm_id = kevyal[1];, 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!:
A
Anonymous
0 replies
January 25, 2022
Hi Walid,
Setting var _learnq = window._learnq || [] worked great, thank you very much!
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.
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.
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.
By clicking “Accept All Cookies,” you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.
Privacy Preference Center
Your Privacy
Strictly Necessary Cookies
Performance Cookies
Functional Cookies
Targeting Cookies
Site Analytics
Your Privacy
When you visit any website, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.
Privacy Notice
Strictly Necessary Cookies
Always Active
These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms. You can set your browser to block or alert you about these cookies, but some parts of the site will not then work. These cookies do not store any personally identifiable information.
Performance Cookies
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site. All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies we will not know when you have visited our site, and will not be able to monitor its performance.
Functional Cookies
These cookies enable the website to provide enhanced functionality and personalisation. They may be set by us or by third party providers whose services we have added to our pages. If you do not allow these cookies then some or all of these services may not function properly.
Targeting Cookies
These cookies may be set through our site by our advertising partners. They may be used by those companies to build a profile of your interests and show you relevant adverts on other sites. They do not store directly personal information, but are based on uniquely identifying your browser and internet device. If you do not allow these cookies, you will experience less targeted advertising.
Site Analytics
These cookies record your visit to our website, and are used to track your visit including information such as: web page interactions (clicks, hovers, focus, mouse movements, browsing, zooms and other interactions), referring web page/source through which you accessed the Sites, heatmaps and scrolls, screen resolution, ISP, and statistics associated with the interaction between device or browser and the Sites. If you are accessing our Services with a European IP address, you have been asked to consent to the use of these cookies (you are free to deny your consent).