Correct Parameter Name to Set a Hidden Form Field Value

[Colby_Schwartz]

Edit:

Hi All,

Our team is looking to capture javascript cookie information on our landing pages using hidden fields in forms 2.0. The fields we are looking to populate are the standard: Search Engine, Search String (when available), PayPerClick Keyword, UTM_Campaign, UTM_Medium, UTM_Source, UTM_term, AdGroup and Landing Page URL. I've reviewed the help article to "Set a Hidden Form Field Value" (https://community.marketo.com/MarketoArticle?id=kA050000000LH7uCAG) but am having issues finding/entering the correct Parameter Name. I am attempting to pull this information from "Cookie Value" from "Get Value From." I understand the Parameter Name has to map directly to the JS cookie but I don't know what values from the cookies to put them into the hidden fields. I have included bits of the JS cookie below. Thank you for your help.


            
              // The URL parameter that has your pay-per-click info.
              // Typically "kw" or "keyword" (depends on how you set up your PPC URLs)
              var payPerClickParameter = "keyword";
              var utmSourceParameter = "utm_source";
              var utmMediumParameter = "utm_medium";
              var utmCampaignParameter = "utm_campaign";
              var utmTermParameter = "utm_term";
              var adGroupParameter = "AdGroup";
              var landingPageUrlParameter = "LP_URL";
         
  
              // IDs for the fields to be updated. these are the form fields
              var searchStringField = "#SearchString";
              var searchEngineField = "#SearchEngine";
              var payPerClickKeywordField = "#PayPerClickKeyword";
              var utmSourceField = "#UTM_source";
              var utmMediumField = "#UTM_medium";
              var utmCampaignField = "#UTM_campaign";
              var utmTermField = "#UTM_term";
              var adGroupField = "#AdGroup";
              var landingPageUrlField = "#LandingPageURL";
    
  
                // Get the values from the cookies and put them into the hidden fields. this is where it reads the cookies.
            
            // we do this below, I don't think this is necessary
            //$jQ(searchStringField).attr("value", SearchString);
            //$jQ(searchEngineField).attr("value", searchEngine);
            //$jQ(payPerClickKeywordField).attr("value", payPerClickWord);
            //$jQ(utmSourceField).attr("value", utmSource);
            //$jQ(utmMediumField).attr("value", utmMedium);
            //$jQ(utmCampaignField).attr("value", utmCampaign);
            //$jQ(utmTermField).attr("value", utmTerm);
            //$jQ(adGroupField).attr("value", adGroup);
            //$jQ(landingPageUrlField).attr("value", landingPageUrl);
          
            // need to use Marketo forms 2.0 to get the form fields
            
            MktoForms2.whenReady(function(){
              // not sure what form to use, so we'll loop through all forms and set values
              
              var forms = MktoForms2.allForms();
              
              for(var i = 0; i < forms.length; i++) {
                var form = forms[i];
                setFormValuesFromCookie(form, {
                  'SearchString': 'SearchString',
                  'SearchEngine':'SearchEngine',
                  'PayPerClickKeyword': 'PPCKeyword',
                  'UTM_source': 'utm_source',
                  'UTM_medium': 'utm_medium',
                  'UTM_campaign': 'utm_campaign',
                  'UTM_term': 'utm_term',
                  'AdGroup': 'AdGroup',
                  'LandingPageURL': 'LandingPageURL'"
   

[SanfordWhiteman]

That's way too much code to post on this forum (which has no code handling to speak of).

Can you please narrow that down to just the part that is giving you trouble?

And try to rephrase your question.  "I don't know what in the cookie..." doesn't really make sense.  Each cookie is a <name>=<value> pair.  So you want to extract the <name> and map that to  a field on your form.  And you want to set the form field's value to <value>.

[Colby_Schwartz]

Sorry... I went in and edited the original post based on your feedback...

But  I don't know what <values> from the cookies to put them into the "Parameter Name" in the hidden fields. Is the <name>=<value> equal to search "utmSourceField = '#UTM_source'" or is the <name>=<value> equal to 'UTM_source': 'utm_source'?

[SanfordWhiteman]

The cookie "my_simple_cookie=12345" is expressed in a JS object as:
 

{ my_simple_cookie : '12345' }

Note the name is not in quotes.

[Guy_Goldstein6]

I've actually run into a very similar challenge recently when trying to extract the data from the infamous utmz cookie (I figured I'd let google do the heavy lifting).

I've done it in PHP/JS before and it's easy enough, but when trying to identify the name of the cookie, there's really no clear guidance as to how to isolate the specific cookie I'm looking for.

So if I wanted the cookie utm_source and I know that it's in the __utmz cookie and that it's value is utmcsr=XXXX

How exactly would you go about instructing the hidden field to pull that specific value?

[SanfordWhiteman]

Let's use precise terminology.

__utmz is the cookie name you are seeking.  The cookie value is something like (to give a real-work example from a site I just visited):

     69008525.1433101382.1.1.utmcsr=yahoo|utmccn=(organic)|utmcmd=organic|utmctr=(not%20provided)

utmcsr, utmccn, etc. are not cookie names.  They are simply strings of characters within the __utmz cookie's value.  There no such thing as a cookie name & value inside a cookie value.  Ever.

However, you may choose to interpret the contents of a consistently structured cookie (like Google's __utmz and Marketo's _mkto_trk) as another series of name-value pairs.

For __utmz, you are understandably led to interpret the string as a pipe-delimited series of equal-sign-delimited names and values: name1=value1|name2=value2|name3=value3

For __mkto_trk, on the other hand, it appears to be an ampersand-delimited series of colon-delimited names and values: name1:value1&name2:value2&name3:value3

Regardless of the formatting rule you assume was used to assemble the cookie (and therefore how you'll parse it to get at individual name-value pairs) the name-values inside a cookie are not themselves cookies.  You can parse them out into a nicely-structured JavaScript object: { name1:"value1",name2:"value2" } that you can play with from the browser, but that's still not a cookie/set of cookies.

I hope now it's becoming clear why Marketo Forms' very cool ability to read data from a cookie into a hidden field does not apply to the arbitrary contents of a cookie. You can set a hidden field to the value of __utmz easily, but you can't set it to parse out a non-cookie value that appears to be embedded within __utmz.

[SanfordWhiteman]

Assuming my post above has been read and digested, now here's an example of parsing the sub-components of a cookie (remember, these are not "cookies"!) and then inserting them into a form as hidden fields: MktoForms2 :: Parse Hidden Name-Value from Single Cookie - JSFiddle

[Guy_Goldstein6]

Thanks Sanford!

As a reluctant self-taught coder at best, the semantics of it all get a little complex at times.

It's a very neat little script you've got there... very elegant as a workaround.

I've implemented workarounds in JS and PHP in the past and hijacking the form is a relatively legitimate workaround, I was just hoping that since the __utmz is pretty standard, and that it does provide the pipedream of clean and accessible information, that marketo's read from cookies function would allow me to extract said useful information in a form that a marketing end-user can use without having to wrap the embed code in the processing code.

2 quick questions about your script though:

1. <script src="https://cdnjs.cloudflare.com/ajax/libs/Cookies.js/1.2.1/cookies.min.js"></script>

<script src="//app-sj01.marketo.com/js/forms2/js/forms2.min.js"></script>

<form id="mktoForm_245"></form>

Is the cloudflare script necessary?

2. When you use the instrcution:T

    // now add to form as hidden fields

    form.addHiddenFields(__utmzComponents);

How do you determine which field each component is mapped to?

[SanfordWhiteman]

Well, the "relatively legitimate workaround" is the only way to expand to a non-standard functionality.  It's not hijacking because the Forms 2.0 API is an API.

If Marketo wanted to treat __utmz (and __utmz only) in a special way that redefined the meaning of "cookie" then they could do that, but they're not doing anything wrong.   I'd call it a slippery slope if you start assuming that name-value-​like ​strings are going to be parsed in addition to the standard document.cookie.  What do you do if there's a naming collision (and eventually, there would be) between a cookie name and an embedded name?  How many levels of recursion do you go through?  Does this same automatically apply to the query param source (which also can have levels of name-value-​like ​strings)? 

Anyway...

1. The Cookies helper script hosted on CloudFlare isn't necessary: if you feel like writing your own cookie parsing script, use that instead!  But it's a very respected li'l plugin that I think should be in everyone's toolkit.  Another way to get the same data is to set up a hidden field for the full __utmz string (unparsed) and then read out its data.  That way you don't have to ever look up the cookie as Marketo does it for you.  But that means a field in Mkto that you expressly won't use.

2. The cookie is assumed to use the format name1=1value|name2=value2|name3=value3.  So the Mkto field names are name1, name2, name3.  For example, the __utmzComponents object might be { utmcsr : '(hello)', utmabc : '(there)' }.  Your Marketo database wants to have `utmscr` and `utmabc`.  If you want to "massage" (remap) field names to some other names before they're added you can use the function I just added to the demo.

[Guy_Goldstein6]

It is a slippery slope, but I'd settle for the ability to have a "default form wrapping" so that when people tried to embed forms using the "embed form" functionality, they'd get the code the way I want them to get it and not just the Marketo part of it.

Is there a way to leverage the ability to insert custom CSS into the form to have these scripts as part of the form that gets embedded rather than needing to wrap it every time you put it on a page. The former would put the onus of making it run on the Admin while the later is the end-user and i feel as though that could do a good job of reducing human error.

Guy