Best way to add a script in a guided landing page

[Grégoire_Miche2]

Guided landing pages do not make it easy to add a script, for instance if you need to add some Google adwords or any other type of conversion code "on the fly".

Here are the methods I have found so far, with some pros-and cons.

Method	Using	Pros	Cons
Add the script to the LP template with some variables to activate it and set parameters	Variables	Robust	Not flexible at all (if you want another script, you need a different LP template)
Add the script to a web file (stored in Marketo if necessary), then add a variable to the LP template and implement a <script src="${scripturl}"> within the template.	Variables	Quite robust Flexible Can be set at asset level	Only 1 script possible No <noscript> version of the tag. But is this an issue? IF JS does not work on the browser, the Marketo form will not display anyway.
Add the script to a web file (stored in Marketo if necessary), then add a token to the LP template and implement a <script src="{{my.token}}"> within the template.	Tokens	Quite robust Flexible	Can only be set at program token
Add a snippet container at right place in the LP template, Create a snippet that includes the script (one snippet per different script or series of scripts) and let the users add the snippet script to the LP as needed	Snippet	Safe as you can control tightly who can create/edit snippets Very flexible (our tests show you can freely add some JS scripts to snippets) Can be set at asset level Can also contain the <noscript> version of the tag	The script and <noscript> will necessarily be renderred within a <DIV>, since the mktoSnippet takes a div. But is this a problem?
Create a variable on the LP, set it to "allowHTML=true" and let the user paste the script into it	Variables	Very flexible Asset level	Error prone
Add one or more scripts to web files (stored in Marketo if necessary), then add a variable to the LP template. Have the user to add the URI of the web files in this variable. Then have a JS code that injects the code from the files in the landing page at runtime.	Variables	Very flexible Enable many scripts if necessary Can be made to control the source of the files and therefore very secure Can be set at asset level	Is there a security issue with JS code injection? In this case, will need a secure server on which posting the injected files
Add one or more scripts to web files (stored in Marketo if necessary), then add a program / folder token. Have the user to add the URI of the web files in this token. Then have a JS code that injects the code from the files in the landing page at runtime	Tokens	Very flexible Enable many scripts if necessary Can be made to control the source of the files and therefore very secure	Cannot be set at asset level Is there a security issue with JS code injection? In this case, will need a secure server on which posting the injected files

I would love to read some feedbacks, ideas and experience. We will run some tests on the best ideas and summarize it here.

-Greg

[Justin_Norris1]

Greg, what about a program token?

Pros: can be added at the folder level to flexibly update multiple programs at a time, no extraneous code added, fast and flexible, could be parameterized if you want to (i.e., hardcode specific script and use tokens to populate certain parameters etc.)

Cons: only works with LPs in programs, not design studio. Wouldn't be an issue for me as I very rarely see a use case for having a landing page live in design studio instead of a program. May be some other cons I'm missing.

[Grégoire_Miche2]

Hi Justin,

You are fully right, I overlooked the possibility to use tokens here. I'll add it in the table with 2 versions:

• Pasting the code directly in the token. Quite dangerous, IMHO, since the users can really do anything they want
• Using Sanford's proposal to just insert script URI's in the token and have a JS code that injects these scripts in the page.

Thx

-Greg

[Justin_Norris1]

Should we also consider the possibility for use of a tag manager here?

[Grégoire_Miche2]

Hi Justin,

Yes, that seems a natural solution. Although this means getting out of Marketo.

And not all teams we meet have implemented GTM or can have access to it.

And I understand Sanford Whiteman finds some drawbacks to GTM and similar products in conjunction with Marketo.

-Greg

[SanfordWhiteman]

Think you're overworrying about <noscript>... unless you have alternate content that needs to be shown only if scripts are disabled, there's no need for <noscript> tags.

Otherwise kinda hard to say. Your options represent different actual functionality/user control, so I can't weigh in on what's "best". I definitely don't want end-users adding arbitrary code (that's what they seemingly dream of, to be able to break templates) and don't seek to make it any easier!

In your chart, one option allows a single arbitrary script ("let the user paste the script"). By including only 1 box, you're saying you're sure you'll never want 2 or more (yes, they could add more than one <script> tag in the box, but that's even more prone to error). I tilt toward the Z in ZOI, but are you sure you don't want I here?

Anyway, my preference, if forced, is to allow user-provided variables (or, as Justin suggests, tokens) that only include a URI or list or URIs (i.e. not an actual HTML <script> tag). Then pass that token or variable through a validation step (perhaps it can only be certain whitelisted hostnames/paths) and inject a new script element using JS.

[Grégoire_Miche2]

Hi Sanford,

Thx for your contribution, always extremely accurate and useful!

The <noscript> version is more about making sure we capture conversions even when the visitor is navigating from a browser without JS enabled. I do not know what is the real percentage of web site visitors that have disabled JS...

I also fully agree that being able to add 2 or more scripts is also a must.

I do agree that the more admins can control what users are doing, the better. But I know cases of worldwide roll outs where each country will need to have the possibility to add their own scripts and the central admins will just not have the bandwidth to control everything, so we need to rely on local super users to do it. I like the idea of a variable or token containing a list of URIs that are then injected, although I do not known how to code some JS to inject JS

-Greg

[Grégoire_Miche2]

And also, if we want to be able to control the codes, this means that we need to have another server, in the same domain (to make sure it will work in private browsing), that will not be Marketo, since anyone can add a script to Marketo image/file space in the design studio.

-Greg

[Grégoire_Miche2]

Hi again Sanford,

could we even make the code injection capable to inject the <noscript> version of the tag?

For instance, a google adwords conversion tag will have the form of:

<!-- Google Code for NEW - Awareness - contact us Conversion Page -->

<script type="text/javascript">

/* <![CDATA[ */

var google_conversion_id = XXXXXXXXXX;

var google_conversion_language = "en";

var google_conversion_format = "3";

var google_conversion_color = "ffffff";

var google_conversion_label = "CsUYTzm5hzskjlqsn";

var google_remarketing_only = false;

/* ]]> */

</script>

<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">

</script>

<noscript>

<div style="display:inline;">

<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/999999999/?label=CsUYTzm5hzskjlqsn&amp;guid=ON&amp;script=0"/>

</div>

</noscript>

-Greg

[SanfordWhiteman]

JS can't be used to inject no-JS.

I admit I'm not concerned about end users needing to add <noscript> for unmanaged functionality. I can be convinced that LPs shouldn't require JS (accepting that forms will have varying degrees of not-working, from simply not validating input to worse, and also accepting that you must disable tracking on any links to those LPs). But users adding noscript? Meh, let them go through channels...