Forms - my.token in external thank you page

[Pavel_Ivanov]

Hi,

For the past few hours I've been reading and testing, but with no success.

I am preparing a setup for a Marketo global form to be embedded into 10 different landing pages for gated content. Form is working ok, I'm looking at the original referrer URL to make a difference between the downloaded content.

What I'm trying to do and failing so far is find a way to use a token instead of the thank you page URL so that I can redirect to the correct piece of content for download. The gated content is not hosted in Marketo but on an external site. I'll be creating a separate program for each of the 10 pieces of information and want to use a my.token in each program with the URL to each content.

Can anyone help with this?

[SanfordWhiteman]

You can't use the {{my.token}} with an embedded form. This is a security restriction.

[Pavel_Ivanov]

Hi Sanford,

Thank you for taking the time to read and reply.

The solutions I can think of are either:

- Create a Marketo LP template to use as a thank you page with a tokenized link to the gated content (we currently don't want to send the gated content as an email). We were hoping to have less clicks and directly display the document after form submission.

or

- Abandon the idea of a global form and have 10 different forms (for each document) and then use the proper external page URL to the gated content. That seems like too much unnecessary work though.

Since the global form can have only a single predefined thank you page, I can't think of anything else that can solve this.

[SanfordWhiteman]

Is there a specific reason why you can't keep all the Thank You URLs and their source Form URL pages in one place (say, in a JS file stored in Design Studio, with a list of Form URL → Downloadable URL mappings)?

Then the form looks up the current URL and redirects to the matching download.

Nothing needs to be duplicated and you can continue to use the global form.

[Pavel_Ivanov]

Hi,

Well, yes. The reason being that unfortunately I have no knowledge in JS and can only apply ready solutions. 😕

If I understand correctly the suggestion, this will require updating the JS every time there's a new gated content page and thank you page added. Is this correct?

If that's the case, using a dedicated tokenized thank you page for all form submissions and only changing the tokens on program level looks like easier.

[SanfordWhiteman]

---

If I understand correctly the suggestion, this will require updating the JS every time there's a new gated content page and thank you page added. Is this correct?

If that's the case, using a dedicated tokenized thank you page for all form submissions and only changing the tokens on program level looks like easier.

---

I don't see how that approach would be easier, though.

You'd have to create a new Marketo LP that corresponds to every form that way (a separate LP in every program).

In contrast, you'd only be adding one line to the central JS file for every new download.

[Pavel_Ivanov]

Of course, you are correct.

I've come to realize that not only is it harder, but the whole idea of it goes away if I want to do it with a tokenized thank you page. I'd either need to update where the form goes for each program or create another abomination.

So it's going to your initial suggestion with controlling what happens on success of the submission. Upon form submission we'll need to take the user directly to the download (let's say it's a .pdf) without going through a thank you page to save them 1 more click. Can you help with this?

[SanfordWhiteman · Accepted solution]

You can do it like this:

<script src="https://pages.example.com/rs/aaa-bbb-ccc/form-thank-you-urls.js"></script>
<script>
MktoForms2.whenReady(function(mktoForm){
   mktoForm.onSuccess(function(values,originalThankYouURL){
      const originalThankYouLoc = document.createElement("a"),
            finalThankYouLoc = document.createElement("a");            
      
      originalThankYouLoc.href = finalThankYouLoc.href = originalThankYouURL;
      
      if (window.thankYouURLMap) {
         window.thankYouURLMap.some(function(rule){
            if(document.location.href.indexOf(rule.formBaseURL) == 0) {
               finalThankYouLoc.href = rule.thankYouURL;
               finalThankYouLoc.search += finalThankYouLoc.search ? "&" : "";
               finalThankYouLoc.search += originalThankYouLoc.search;
               return true;
            }
         });
      }
                                    
      document.location = finalThankYouLoc;      
      return false;      
   });   
});
</script>

Where the file https://pages.example.com/rs/aaa-bbb-ccc/form-thank-you-urls.js is a file uploaded to your Design Studio with a set of rules like this:

window.thankYouURLMap = [
  {
    "formBaseURL" : "https://www.example.com/path/to/landingpage1.html",
    "thankYouURL" : "https://www.example.com/document1.pdf"
  },
  {
    "formBaseURL" : "https://www.example.com/path/to/landingpage2.html",
    "thankYouURL" : "https://www.example.com/document2.pdf"
  }
];

Include the scripts after the embed code.

Note the code does a simple prefix match between the rules and the current URL. In other words, if the current URL is https://www.example.com/path/to/landingpage2.html?utm_medium=whatever&someothervalue=whateverelse  then it matches the second rule. In my own work I would support more robust pattern matching.

[Pavel_Ivanov]

Thank you so much Sanford. I tested and as expected it's working and solving this issue.

I also tested with utms in the URL and there's no issue. In the campaign I'm looking for the original referrer to match the form submission to the right program.

Thank you!