Leverage external css and js in Marketo Landing page?

[Anonymous]

Hi,

I want to utilize the look/feel/functions of my company's web site. At the same time I want to utilize Marketo's landing pages. I have built a Marketo LP template calling out external CSS and JS files so the look and feel is identical. I already know that if the files change, my landing pages will be affected. 

I basically started with the standard page template so it has all Marketo required tags in the HTML, and then referenced the external CSS and JS flies.

Are there other implications I am not aware of? Does anyone else do this?

[Edward_Unthank_]

We do exactly this all the time! 

Fun things to consider:

• Old Marketo templates referencing external CSS (non-mobile friendly) don't pull in external CSS into the WYSIWYG editor unless they're https calls. This breaks your WYSIWYG pretty considerably, but the approved pages look great. 
• New Marketo templates (mobile friendly) referencing external CSS DO pull in externall CSS into the WYSIWYG, even as normal http calls. 
• Expect the JS not to work in the WYSIWYG but be totally functional on the approved page.
• Custom fonts hosted on your WWW likely won't work on your Marketo-native pages in some primary browsers included Chrome. If you want those custom fonts to show, either use an external font hosting service or upload them to Marketo's Design Studio and change your CSS to reference these fonts. This is an issue with cross-domain font calls. 

 
I usually do at least two external CSS references:

1. The WWW stylesheet with all your normal branding
2. A Marketo-specific stylesheet with Marketo-specific tweaks and branding. 

 
Having a Marketo-specific stylesheet helps you not have to deal with your WWW site's development team and "will this have adverse effects on our primary domain" questions. There are also lots of really Marketo-specific tweaks that you'll have to make when you want to change things such as forms.

The order of where stylesheets/styling shows up in the landing page doesn't have much that you can change. Marketo likes to spit out lots of in-line CSS which becomes absurdly complicated to overwrite without really nailing the CSS hierarchy and slapping on some (awful webdev practice but unavoidable) !important attributes to your stylings.

Here's an example of using external CSS on this page. You can also see it's puking font errors in the Web Inspector Console. But that uses entirely external CSS on the page.

(And, like you mentioned, when your WWW site ever updates, it can unexpectedly break your formatting. When you're doing a new launch, usually the webdev team has Marketo landing page design as a low priority, so watch out for this ahead of time and know it's coming.)
 

Best,

Edward Unthank | Founder, Etumos

 

[SanfordWhiteman]

@Edward you can fix that webfont issue by sending Access-Control-Allow-Origin: * with WOFF2 resposnes. Your server is sending ACAO on WOFF responses, but you have WOFF2 listed first, which Chome understands, so Chrome tries for WOFF2 but sees an illegal CORS request.

Awesome looking work, by the way!

[Anonymous]

Edward mentions above that the inline CSS generated by Landing Pages is hard to override.  Here's a trick that makes it easy to do without having to resort to using CSS !important statements.  Copy the inline CSS declaration that you're wanting to override, and stick "html " in front of the selector.  That'll make your CSS selector more specific than the Marketo provided inline one, and so yours will be the one that gets applied, no matter where in the document your CSS file is loaded.

So if there's a statement providing a red backround color to one of your elements that you want to override:
div#lpeCDiv_58647 span.lpContentsItem { background-color:red; }
You could add to your stylesheet:
html div#lpeCDiv_58647 span.lpContentsItem { background-color:blue; }

This is much cleaner than using an !important statement.

[Edward_Unthank_]

Thanks, Sanford! I've never spent the time to fix the access control error for fonts—shall do! EDIT: Now fixed. Thanks, Sanford!

Ian— the problem with more specificity there is that the element containing div IDs change, AND the inline CSS uses IDs. If those were calculated on the back-end as classes, there'd be more flexibility to templatizing these without !important. Especially as the element IDs are dynamic (and, last I checked, increment every single time you approve a landing page).

- Edward

[SanfordWhiteman]

@Ian using the html element to increase specificity is fine, but just a type selector has very weak specificity and there's no guarantee it won't be overriden by something you guys add in the Marketo CSS. The (I hope correct) assumption that you won't use !important still makes that the safest bet I think.

[Anonymous]

Thanks all for your replies and input!!

Here's another issue I am having - I hardcoded some tokens into my LP template. When I put something in the token, it is outputting in ascii code on the page when I view source of the approved page. Why is this? See example.

Also, do you HAVE to have MktEditable areas in your LP? I am trying ot create a template with only 3 tokens - header image, body content, and form ID (so I can clone the template and put in the correct form ID that is embedded into the page). I'm hoping other users can just do all this at the token page and not have to go in to "edit" the landing page. Is this ok? I believe this would work, except I am having the ascii issue noted above.


 

[Edward_Unthank_]

Hey EM, 

I'm not sure if you "have" to have mktEditable regions in your LP. You might technically need them. But that really doesn't matter—you can just approve the LP without going into the editor itself. We bring all the content into tokens and never open the WYSIWYG on the LPs. Just clone the template program with approved LPs, change the URLs, and change the tokens. 

I'm not sure why you're getting ASCII in the output. I think I've seen this popping up in the community in other areas as well. Maybe contact Marketo support about it? I'd love to see why that's happening and how to fix it. 
 

Best,

Edward Unthank | Founder, Etumos

 

[Anonymous]

Thanks Edward. I logged a ticket with support. I will definitely upate this thread ot let you knwo what they say!

[Anonymous]

Hi Edward,

So I just spoke with Marketo and they told me you cannot hard-code the tokens into the actual template.

How do you do it? Did you place the editable areas on your landing page through marketing activites and then place the token into that area? 

In other words, on the template level, did you drag a rich text element onto your template and then code that with your token?