← TEKNKL :: Blog

Critical: Update to SimpleDTO 2.0 (the latest Form Pre-Fill JS) for compatibility with the latest Chrome & Edge

By Sanford Whiteman Tags: JS, FormsPlus, cookies, security, Marketo forms, Pre-Fill, document.domain, postmessage, pushable, SimpleDTO
💡
Please read the legendary post introducing SimpleDTO 1.0 first if you haven’t already. Due to time constraints, this post will concentrate on how to upgrade from 1.0 to 2.0 as opposed to documenting SimpleDTO from scratch.

SimpleDTO 2.0 makes two major advances over 1.0:

  1. It doesn’t try to update document.domain, which is read-only in the latest Chrome and Edge releases.
  2. Because it replaces document.domain with cross-origin postMessage, you’re no longer required to have your form and the Marketo-hosted DTP share a private domain suffix. Your form could be on https://www.example.info while your Marketo instance is https://pages.another.example. Cool, eh?

2.0 is deployed in the same way as 1.0: Marketo LP as Data Transfer Page (DTP), new SimpleDTO() on both DTP and your form page, etc.

Get the files (plural)

Rather than redundantly pasting functions from my FormsPlus library, SimpleDTO 2.0 relies on FormsPlus 1.0.8. Download the files here and load them in this order:

teknkl-formsplus-core-1.0.8.js
teknkl-simpledto-2.0.4.js

As before, you can put the JS files in Marketo Design Studio or on your main site or CDN, doesn’t matter. Just don’t run them directly from my server, please.😛

Make a new Data Transfer Page

Your new DTP will load the 2 JS files (FormsPlus 1.x + SimpleDTO 2.x). Use mode: "send" just like before, but with a few new config options. Just copy your current <script type="text/xml"> block, that doesn’t change at all!

Example:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>DTP</title>
  <script id="teknkl-FormsPlus-Core-1.x" src="https://pages.example.com/rs/954-TTG-937/teknkl-formsplus-core-1.0.8.js"></script>
  <script id="teknkl-SimpleDTO-2.x" src="https://pages.example.com/rs/954-TTG-937/teknkl-simpledto-2.0.4.js"></script>
  <script type="text/xml" class="dto-xml" data-field-collection="mktoPreFillFields_01">
    <mktoPreFillFields>
  	  <mktoField inputName="FirstName">{{Lead.First Name}}</mktoField>
  	  <mktoField inputName="LastName">{{Lead.Last Name}}</mktoField>
  	  <mktoField inputName="Email"><!--email_off-->{{Lead.Email Address}}<!--/email_off--></mktoField>
  	  <mktoField inputName="Country">{{Lead.Country}}</mktoField>
  	  <mktoField inputName="State">{{Lead.State}}</mktoField>
  	  <mktoField inputName="Phone">{{Lead.Phone Number}}</mktoField>
  	  <mktoField inputName="Title">{{Lead.Job Title}}</mktoField>
  	  <mktoField inputName="Unsubscribed">{{Lead.Unsubscribed}}</mktoField>
  	  <mktoField inputName="Score">{{Lead.Lead Score}}</mktoField>
  	  <mktoField inputName="commentCapture">{{Lead.Person Notes}}</mktoField>    
  	  <mktoField inputName="Industry">{{Company.Industry}}</mktoField>
  	  <mktoField inputName="Company">{{Company.Company Name}}</mktoField>
    </mktoPreFillFields>
  </script>
  <script>
    var DTO =  new SimpleDTO({
          debug: true,      
          mode: "send",
          transport: "message",
          messageSource: "https://pages.example.com",
          messageTarget: ["https://www.example.com"],
          dataSrc: "https://pages.example.com/dtp-2.0.0.html"
    });            
    DTO.parse('mktoPreFillFields_01');      
  </script>
</head>
<body>
</body>
</html>

Adjust the options passed to new SimpleDTO()

In SimpleDTO 2.0, you don’t use the domain option. That’s replaced by 3 new options, transport, messageSource, and messageTarget:

  • transport: The value is always "message" in this first release but other values might be supported in the future.
  • messageSource: This is the origin of the Marketo LP domain that’s serving the DTP. Origins are the protocol and full hostname in the location bar, like "https://pages.example.com" (that is, not a parent domain and not just the hostname). They’re always in lowercase, and they don’t include the path, querystring, hash or anything else.*
  • messageTarget: This is an array of origins that you authorize for pre-fill. If you’re only pre-filling forms on one site, use ["https://www.example.com"]. You can have a config covering multiple sites like ["https://www.example.net", "https://www.example.fr", "https://example.co.uk"] to have less to maintain.

All other options are the same as in 1.0.

Example usage on your form page

To run SimpleDTO 2.0 on the form page when...

  • the form page is https://www.example.com/request-demo
  • the Marketo LP domain is https://pages.example.com
  • the Marketo-hosted DTP is https://pages.example.com/dtp-2.0.0.html

… do this:

var DTO = new SimpleDTO({
  debug: true,
  mode: "receive",
  transport: "message",
  messageSource: "https://pages.example.com",
  messageTarget: ["https://www.example.com"],
  dataSrc: "https://pages.example.com/dtp-2.0.0.html",
  cb: function(instance,mktoFields){
     MktoForms2.whenReady(function(form) {
       form.setValuesCoerced(mktoFields);
     });
     DTO.cleanup();
  }
});

As you can see, it’s an easy upgrade as the overall rhythm of the solution is the same. Enjoy!

Notes

* OK, fine. The port if it’s non-well-known. I’m trying to keep it simple!