Using Meta Tag Information as a Hidden Field in Forms | Community
Skip to main content
Bryan_Epstein
Bryan_Epstein
New Participant
June 28, 2018
Solved

Using Meta Tag Information as a Hidden Field in Forms

  • June 28, 2018
  • 2 replies
  • 5170 views

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="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?

Best answer by SanfordWhiteman

<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);
});

2 replies

Gerard_Donnell4
Gerard_Donnell4
New Participant
June 28, 2018

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.

Bryan_Epstein
Bryan_EpsteinAuthor
New Participant
June 28, 2018

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.

Josh_Hill13
Josh_Hill13
New Participant
June 28, 2018

you should use UTMs, but if you have JS, you can prob manipulate the data into the hidden fields.

Bryan_Epstein
Bryan_EpsteinAuthor
New Participant
June 28, 2018

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)?

SanfordWhiteman
SanfordWhitemanAccepted solution
New Participant
June 28, 2018

<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);
});
    Terms & ConditionsAccessibility statement

    Loading footer...