10 Replies Latest reply on Dec 17, 2016 1:19 AM by Grégoire Michel

    Best way to add a script in a guided landing page

    Grégoire Michel

      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.

       

      MethodUsing
      ProsCons
      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

        • Re: Best way to add a script in a guided landing page
          Justin Norris

          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.

          3 of 3 people found this helpful
          • Re: Best way to add a script in a guided landing page
            Sanford Whiteman

            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.

             

            3 of 3 people found this helpful
              • Re: Best way to add a script in a guided landing page
                Grégoire Michel

                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

                • Re: Best way to add a script in a guided landing page
                  Grégoire Michel

                  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

                    • Re: Best way to add a script in a guided landing page
                      Sanford Whiteman

                      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...

                  • Re: Best way to add a script in a guided landing page
                    Grégoire Michel

                    Found JS injection code from Facebook that can be tuned by a developper.

                     

                    (function(d, s, id){
                      
                    var js, fjs = d.getElementsByTagName(s)[0];
                      
                    if (d.getElementById(id)){ return; }
                      js
                    = d.createElement(s); js.id = id;
                      js
                    .onload = function(){
                      
                    // remote script has loaded
                      
                    };
                      js
                    .src = "${scriptURI}";
                      fjs
                    .parentNode.insertBefore(js, fjs);
                    }(document, 'script', '${ScriptID}'));

                    -Greg