Autofill with Cookie Value

[Anonymous]

Any thoughts on how to modify the script so it will update the UTM values if a user returns with another UTM value.  For example, if the initial visit includes utm_source=linkedin and the second visit is utm_source=facebook.  The current script records utm_source=linkedin, but does not update to utm_source=facebook. How can I adjust the script, so it would update to utm_source=facebook?

[SanfordWhiteman]

If you want people's most recent touch on a single origin only (not across origins like pages.example.com and www.example.com, but only on www.example.com) then you don't even need to use cookies. In this blog post I provided an ultra-slim alternative.

Otherwise, I'd use an attribution library that can maintain multiple historical sources, translate referrers into friendly names, stuff like that.

[jbeats_ohhhhh]

Hi Sandford,

I liked your blog post solution which fit my companies needs very well.  I have my test form set up to only trigger when a utm parameter is present, so the trigger is 'fills out form' and the 'query string' contains testUTM.  When I navigate to the form page using a real UTM link the campaign trigger works, and your code does not alter the URL because a UTM is present.  When I navigate to the form page without a UTM your code works, and attaches the stored UTM part of the URL, however the campaign trigger does not fire.  The trigger is set to fire every time so there should be no complications there.

I thought I must have put your code in the wrong JS sequence, but when I checked the dev tools the MKTO form had taken the values your code appended onto the base URL and put them in the hidden fields correctly, yet the campaign trigger still did not fire.  How is this possible?  What did I do wrong to achieve this result?

[SanfordWhiteman]

So if you look at the details of the Filled Out Form activity, you see the expected fields were posted?

[jbeats_ohhhhh]

Yes both form details are exactly the same except for mktoReferrer.  The form submission that works is:

_mktoReferrer: https://www.gtt.com/test-form-page/?utm_source=bing_ads&utm_medium=cpc&utm_campaign=testUTMcampaign

The form submission that doesn't work is : 

_mktoReferrer: https://www.gtt.com/test-form-page/

In the form I have the auto fill for the UTM parameters to pull from URL Parameters and they do so just fine.  Is the querystring filter in the campaign trigger based off the referrer URL and not the URL of the page the form is on?

[SanfordWhiteman]

The Query String constraint is based on the URL the form is on.

The _mktoReferrer is the URL the form is on. (Don't be confused by the word "referrer", as the referrer of a form post is the page hosting the form, not the page before that.)

[jbeats_ohhhhh]

It appears that when the form loads it reads the page as a test page with no UTM information tagged onto the URL, but when certain fields go through autofill they do grab the parameters from the URL with the tagged on UTM information supplied by local storage. 

I am trying to have a form fill trigger fire only when the querystring constraint contains a certain utm campaign.  So is this simply a timing issue?

Will using filled out form with a querystring constraint simply not work in this situation because the URL is changed after an event that reads the URL for any querystrings?  Here is the code I used:

<script src="//pages.gtt.com/js/forms2/js/forms2.min.js"></script>
<script>
        (function(opts){
  var current = {
        state : document.location.href,
        query : document.location.search.substring(1),
        time : new Date().getTime()
      },
      storage = {
        area : window.localStorage,
        key : 'last_utm_query'
      },
      restored, 
      updated = {};

  if (/(^|&)utm_/.test(current.query)) {
    storage.area[storage.key] = JSON.stringify({ time:current.time, query:current.query });
  } else if (restored = JSON.parse(storage.area[storage.key] || '""')) {    
    if ( window.MktoForms2 && ( current.time - restored.time <= opts.expireDays * 864E5 ) ) {
      updated.state = document.createElement('a');
      updated.state.href = current.state;
      updated.state.search += (updated.state.search ? '&' : '') + restored.query + '&restored=' + restored.time;
      history.replaceState('', {}, updated.state);
    }
  }
})({
  expireDays : 30
});
</script>
<form id="mktoForm_1261"></form>
<script>
    MktoForms2.loadForm("XXXXXX", "XXXXXXX, 1261);
</script>

Thanks for any help.

[jbeats_ohhhhh]

Hey @SanfordWhiteman ,

So at this point I have looked through quite a few posts and I get the feeling that Marketo Forms does a querystring check on the referrer URL before your code appends stored UTM data.  I am using this post as reference: https://nation.marketo.com/t5/product-discussions/manually-pass-query-string-vs-hidden-fields/td-p/2... .

I would prefer to use the querystring constraint in the trigger but my work around is below.  I am concatenating UTM Campaign with a Timestamp which allows me to trigger on the form fill and filter on the UTM Campaign data change.  If there is no UTM present my UTMCampaignTimestamp field should be blank.  My question is if I wanted to shorten or lengthen the time the UTM data was stored for a user would a cookie or your local storage technique be better?  Do you see any issue with this setup?

<script src="//pages.gtt.com/js/forms2/js/forms2.min.js"></script>
<script>
        (function(opts){
  var current = {
        state : document.location.href,
        query : document.location.search.substring(1),
        time : new Date().getTime()
      },
      storage = {
        area : window.localStorage,
        key : 'last_utm_query'
      },
      restored, 
      updated = {};

  if (/(^|&)utm_/.test(current.query)) {
    storage.area[storage.key] = JSON.stringify({ time:current.time, query:current.query });
  } else if (restored = JSON.parse(storage.area[storage.key] || '""')) {    
    if ( window.MktoForms2 && ( current.time - restored.time <= opts.expireDays * 864E5 ) ) {
      updated.state = document.createElement('a');
      updated.state.href = current.state;
      updated.state.search += (updated.state.search ? '&' : '') + restored.query + '&restored=' + restored.time;
      history.replaceState('', {}, updated.state);
    }
  }
})({
  expireDays : 30
});
</script>

<form id="mktoForm_1283"></form>
<script>MktoForms2.loadForm("//pages.gtt.com", "xxxxxxx", 1283);</script>
<script>
MktoForms2.whenReady(function(form){
  form.onSubmit(function(form){    

var utmcampaigncheck = form.getValues().mktoUTMCampaign;
var timestamp = new Date().toISOString();
var utmcampaignTimestamp = utmcampaigncheck+timestamp;

if (utmcampaigncheck.value=null) {
return
}
else
{
form.addHiddenFields({mktoUTMCampaignTimestamp:utmcampaignTimestamp})
}
});
});
</script>

[SanfordWhiteman]

---

So at this point I have looked through quite a few posts and I get the feeling that Marketo Forms does a querystring check on the referrer URL before your code appends stored UTM data. 

---

To be clear, you're speaking of the current document URL, not the referrer URL.

The current URL only is the referrer URL of sub-resources like the form post. The referrer of the main resource (the outer document) remains the previous full document.

In any case, yes, the forms library now caches the the current document URL immediately. It didn't do this when my original blog post was published! But you certain don't need any elaborate workarounds for the library to see the modified URL.

Just change this line:

if ( window.MktoForms2 && ( current.time - restored.time <= opts.expireDays * 864E5 ) ) {

to this:

if ( current.time - restored.time <= opts.expireDays * 864E5 ) {

and make sure you run the custom code before you load forms2.min.js.

I updated the blog post:

[jbeats_ohhhhh]

Yeap that worked and now I don't need any additional filters, just the trigger constraint.  Thank you so much, this is a great solution.