I am looking to utilize meta tag information as a hidden field in an embedded Marketo form that is being shown outside of a Marketo LP. We were recommended by Marketo to utilize utm_content as a way to track where someone came from; however, the main issue with that is if someone organically comes to us from that page, we won't be able to track to that page.
Essentially, we want to use a global Marketo form across many pages on our website (i.e. for downloading infographics tied to different pieces of content). Does anyone have any recommendations on how we can pull any of these meta properties into a hidden field? As a second question, how would we be able to distribute the different infographics by email and on our website with the same global form?
Here are a few of the meta properties that would be ideal to pull from a form submission:
<meta name="title" content="Top 500 Chain Restaurant Report | Technomic" />
<meta property="og:url" content="http://www.technomic.com/available-studies/industry-reports/top-500" />
<meta property="og:title" content="Top 500 Chain Restaurant Report" />
<meta name="twitter:title" content="Top 500 Chain Restaurant Report" />
On a separate note, for those that use embedded forms on their website, what do you all use as your typical follow-up page?
Solved! Go to Solution.
<meta> tags are accessible from JS like any other HTML elements. There's nothing special about them in this context.
MktoForms2.whenReady(function(form) {
var fieldsFromPageEls = [
{
mktoField: "meta_title",
stor: "meta[name='title']",
prop: "content"
},
{
mktoField: "meta_og_url",
stor: "meta[property='og:url']",
prop: "content"
},
{
mktoField: "meta_twitter_title",
stor: "meta[name='twitter:title']",
prop: "content"
}
],
mktoFieldObj = {};
fieldsFromPageEls.forEach(function(desc) {
mktoFieldObj[desc.mktoField] = document
.querySelector(desc.stor)
.getAttribute(desc.prop);
});
form.addHiddenFields(mktoFieldObj);
});
you should use UTMs, but if you have JS, you can prob manipulate the data into the hidden fields.
How would you utilize UTM parameters if someone is organically going to a page from a direct link (i.e. Top 500 Chain Restaurant Report | Technomic)?
<meta> tags are accessible from JS like any other HTML elements. There's nothing special about them in this context.
MktoForms2.whenReady(function(form) {
var fieldsFromPageEls = [
{
mktoField: "meta_title",
stor: "meta[name='title']",
prop: "content"
},
{
mktoField: "meta_og_url",
stor: "meta[property='og:url']",
prop: "content"
},
{
mktoField: "meta_twitter_title",
stor: "meta[name='twitter:title']",
prop: "content"
}
],
mktoFieldObj = {};
fieldsFromPageEls.forEach(function(desc) {
mktoFieldObj[desc.mktoField] = document
.querySelector(desc.stor)
.getAttribute(desc.prop);
});
form.addHiddenFields(mktoFieldObj);
});
Thanks Sanford. Just to make sure that I understand everything right, here's what I would have to do in order to accomplish my end goal:
That's the process you would follow, right?
- Add these fields into Marketo admin > Field Management
- Insert these fields into the Marketo form
- Insert this script along with the rest of the embed code
That's the process you would follow, right?
You don't need #2. The code automatically adds the hidden fields.
Awesome, thanks so much for your help, Sanford!
Hi Bryan,
Are you trying to capture the page that the form is on or the referring page/link. The utm parameters would be catching the referring link if they were present. Programming the hidden fields to capture the meta information is only going to be grabbing the info of the page the form is embedded on. If the later is what you are trying to do then you could probably have a script to inject those values into the fields. I wouldn't be the man to create that though.
I would be trying to capture the page that the form is on. The reason I would be doing things this way is because they are embedded externally on our website rather than through using a Marketo LP. If someone doesn't actually get to our site from a link with UTM parameters like utm_source or utm_content, I would like to capture the page they are on. This way, I can set up the flow steps for what information is populated on the page along with the email that someone will get after filling their information out.
I ideally would like to do this in a way using global forms, but I know it may be easiest to have separate programs and forms that are local assets within a program.