Your Achievements
Level 1
0% to
Level 2
Next /
to gain points, level up, and earn exciting badges like the new Applaud 5 BadgeLearn more!
View All BadgesSign in to view all badges
Open Alert Bar
SOLVED

Setting the value of an input in the parent window (the LP Editor) using JS on the page itself

Go to solution
Thorsten
Level 4
Level 4
‎02-16-2023 05:55 AM
‎02-16-2023 05:55 AM

Setting the value of an input in the parent window (the LP Editor) using JS on the page itself

Hi everyone,

I am using a custom namespace in my (guided) landing page template. Is it somehow possible to leverage some of it in the landing page editor as well?

It seems like it's not even possible to do a 

 

 

var td = {};

 

 

Is the editor filtering this out?

My goal would be to auto-fill a string template variable with the landing page URL and adding some UTM tags, which will then be used as the OG URL when sharing the page, so it's rendered with the page already.

Kind regards,

Thorsten

 

Labels:
Tags (5)
0 Likes
2,107
Reply
1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator
Level 10 - Community Moderator
‎02-17-2023 01:40 PM
‎02-17-2023 01:40 PM

Re: Javascript - Using Custom Namespace in Landing Page Editor

Oh wait, you mean setting the value of an input in the parent window (the LP Editor) using JS on the page itself. Certainly possible — or used to be when I wrote something similar to hook up a color picker in the editor.

View solution in original post

2,071
Reply
12 REPLIES 12
SanfordWhiteman
Level 10 - Community Moderator
Level 10 - Community Moderator
‎02-16-2023 10:55 AM
‎02-16-2023 10:55 AM

Re: Javascript - Using Custom Namespace in Landing Page Editor

Are you asking if you can include a local <script> element in an editable content area using the HTML source editor? Not sure what this has to do with namespaces — do you mean namespaced HTML elements? Please provide more info here.

0 Likes
2,096
Reply
Thorsten
Level 4
Level 4
‎02-17-2023 02:22 AM
‎02-17-2023 02:22 AM

Re: Javascript - Using Custom Namespace in Landing Page Editor

Ok, maybe I shouldn't have gotten hung up on the word "namespace".

 

To clarify what I am trying to do:

  • I have a guided template, with a string-type variable (like that)
  • I have some JS code that will be part of the template that aims to set the value of this string variable when the user is in the landing page editor
  • I fail to even create a variable on the window object, like in my example above - as my intention was to put my function into that object, so just to have my custom code neat and tidy under window.td.fillThatVariable()
  • It looks like it doesn't let me create the JS variable at window.td and initialise with an empty object to start with
  • I currently try to set this variable within a <script> block in the <HEAD>, but some other test variable in <BODY> didn't work either for that matter, they just don't exist when I create a new LP in the editor and go to the browser console

 

0 Likes
2,087
Reply
Thorsten
Level 4
Level 4
‎02-17-2023 05:43 AM
‎02-17-2023 05:43 AM

Re: Javascript - Using Custom Namespace in Landing Page Editor

It's starting to dawn on me that I need to dig a level deeper into the window of the iFrame.

0 Likes
2,083
Reply
SanfordWhiteman
Level 10 - Community Moderator
Level 10 - Community Moderator
‎02-17-2023 01:19 PM
‎02-17-2023 01:19 PM

Re: Javascript - Using Custom Namespace in Landing Page Editor

What IFRAME? It sounds like there’s a lot you’re not mentioning here!

0 Likes
2,072
Reply
SanfordWhiteman
Level 10 - Community Moderator
Level 10 - Community Moderator
‎02-17-2023 01:40 PM
‎02-17-2023 01:40 PM

Re: Javascript - Using Custom Namespace in Landing Page Editor

Oh wait, you mean setting the value of an input in the parent window (the LP Editor) using JS on the page itself. Certainly possible — or used to be when I wrote something similar to hook up a color picker in the editor.

2,072
Reply
Thorsten
Level 4
Level 4
‎02-20-2023 07:23 AM
‎02-20-2023 07:23 AM

Re: Javascript - Using Custom Namespace in Landing Page Editor

Exactly! Thanks for wording it properly, Sanford 😀

 

Well, I got as far as solving my initial problem with a simple

if (/.marketodesigner.com$/.test(document.location.hostname)) {
parent.td = td;
}

only to then get into a CORS issue... I'll drop the plan here, it's becoming way to much effort for a little nifty nice-to-have convenience.

 

@SanfordWhiteman & all, if anyone of you like a challenge - give it a try! 😁 The goal would be the set the template variable ("the value of an input in the parent window") with the URL of the landing page and populate the OG meta tag for the URL like:

<!-- MARKETO VARIABLES -->
...
<meta class="mktoString" mktoName="[OG] Url" id="og_url" default="https://example.com/" />
...
<!-- OG Meta Tags -->
...
<meta property="og:url" content="${og_url}" />
...

So one could also set some default UTMs on that OG URL like 

?utm_source=marketo&utm_medium=pageshare&utm_id=the+program+name

in one go and save some manual work for the marketing staff.

 

As always, thanks for your help - even if this goes nowhere, I have learned a lot trying 😂

0 Likes
2,038
Reply
SanfordWhiteman
Level 10 - Community Moderator
Level 10 - Community Moderator
‎02-20-2023 11:13 AM
‎02-20-2023 11:13 AM

Re: Javascript - Using Custom Namespace in Landing Page Editor

Isn’t there a more immediate problem that the URL of the approved LP isn’t readable from the child IFRAME nor from the parent? Have you found that value?

0 Likes
2,027
Reply
Thorsten
Level 4
Level 4
‎02-20-2023 11:06 PM
‎02-20-2023 11:06 PM

Re: Javascript - Using Custom Namespace in Landing Page Editor

Well, this code on StackOverflow I used to search the Window object says it is somewhere deep deep down in

Ext4.ClassManager.classes["Ext.ComponentMgr"].all.map["tbtext-1030"].ownerCt.ownerCt.items.map["lpEditor-1034"].items.map["lpEditorPredefinedLayout-1035"].items.map["lpPredefinedLayoutCanvas"].landingPage.raw.properties.destinationUrl

But i don't know how reliable or solid that is. So far, on different templates I tested in different instances (sandbox/production), it seems rock solid.

Before that I used the input with name=lpurl, which only exists when a form is present. But I was going to address that issue later...

0 Likes
2,019
Reply
Dave_Roberts
Level 10
Level 10
‎02-21-2023 06:06 AM
‎02-21-2023 06:06 AM

Re: Javascript - Using Custom Namespace in Landing Page Editor

Years ago I saw something like this put into a client instance and it was a real headache to work with the page in the editor. It did something a little differently and re-arranged the order of the Variables panel but used a similar approach.  I hated working with the pages that were setup this way and we ended up remaking a new template that didn't have all the "jazz" in there. All-in-all it made for a bit of an improvement to the User Experience but it came at a significant tradeoff with intermittent load lag and weird "in-between" states that really made the UX worse than unorganized (and stable) fields in the Variables panel.

 

I'd say something like this is pretty cool, and maybe a fun rabbit hole to run along but probably not worth it in the long run (yet). I think it'd be inviting stability issues until Marketo opens something like that up natively and might end up being more maintenance than you bargained for compared to just manually setting a color or URL variable value. If you're looking for job security tho, it might be a good way to ensure that you're busy in the future 😉

0 Likes
2,009
Reply
Home