PRODUCT - Marketo RTP dialog pop up

[Betsy_Chen]

Passing along a question I got from my web team -

We have a business requirement to track Marketo RTP dialog pop-up's LOAD and CLICK events. We are trying to achieve this by calling two java script functions of the parent window. But, it is not working and also pop-up stops loading on the page.

This is what we are trying to do -

• Call parent window's function on pop-up load -  onLoadEventDatalayer(parentPageURL)

• Call parent window's function on pop-up click - onClickEventDatalayer(parentPageURL)

The actual code is like this -

<script>
var parentURL = window.parent.location;

$( document ).ready(function() {

    if(typeof window.parent.onLoadEventDatalayer(parentURL) === 'function') {                   

            window.parent.onLoadEventDatalayer(parentURL);

    }

    $('#trwDialog > div > a').click(function(){

        if(typeof window.parent.onClickEventDatalayer() === 'function') {

           window.parent.onClickEventDatalayer();

        }

    });

});

</script>

Can someone please help us to get this resolved or guide us about the implementation approach.

[SanfordWhiteman]

You must supply your URL: it's not possible to troubleshoot this without more context, especially as you may have a simple reference error causing JS to error out.

Ensure that the RTP dialog will show on the URL you provide.

[Betsy_Chen]

Thanks for the quick response, Sanford. Please see below. Hope this gives you more insight ~

================================

Following is the URL where currently we have Marketo RTP dialog pop up. Please note, the pop-up appears after a delay and creates cookie. When you hit the URL next time, it checks the cookie first and appears only if cookie is not there.

https://www.purestorage.com/products.html

Cookie - purestorage.com: trwsa.sid

Once you analyze this page, we will deploy this again with our script inside the pop-up code and share the URL again. Please note, the script code which we put inside the pop-up's HTML stops pop-up to appear on the site.

Script Code

<script>
var parentURL = window.parent.location;

$( document ).ready(function() {

    if(typeof window.parent.onLoadEventDatalayer(parentURL) === 'function') {  

            window.parent.onLoadEventDatalayer(parentURL);

    }

    $('#trwDialog > div > a').click(function(){

        if(typeof window.parent.onClickEventDatalayer() === 'function') {

           window.parent.onClickEventDatalayer();

        }

    });

});

</script>

[SanfordWhiteman]

References to window.parent here are strange (if harmless) because your popup is in the top-level document (hence the parent doc is also the same as the current doc).  Was this code originally used in an IFRAME or something?

But since onLoadEventDatalayer/onClickEventDatalayer functions don't exist in your page now I can't tell you what might be wrong with them.  And do those functions really expect a Location object as a parameter, or are they stringifying it implicitly (in which case you should be passing it the location.href, not the location, for clarity).

[Betsy_Chen]

Thanks again for your prompt response, Sanford. Please find response inline below -

References to window.parent here are strange (if harmless) because your popup is in the top-level document (hence the parent doc is also the same as the current doc).  Was this code originally used in an IFRAME or something? >>>>> I was using window.parent because I was not sure if the parent document is the same as the current document. Yes, this code was used in an IFRAME originally.

But since onLoadEventDatalayer/onClickEventDatalayer functions don't exist in your page now I can't tell you what might be wrong with them.  And do those functions really expect a Location object as a parameter, or are they stringifying it implicitly (in which case you should be passing it the location.href, not the location, for clarity). >>>>>We have not yet deployed our changes to the prod environment that's why you don't see these functions. Yes, these functions really except a location object.

As, per your suggestion above, I will pass 'location.href' for the page url and now script code is going to look like this. Please take a look and confirm.

<script>
var pageURL = location.href;

$( document ).ready(function() {

    if(typeof window.onLoadEventDatalayer(pageURL ) === 'function') {  

            window.onLoadEventDatalayer(pageURL );

        if(typeof window.onClickEventDatalayer(pageURL ) === 'function') {

           window.onClickEventDatalayer(pageURL);

        }

    });

});

</script>

[SanfordWhiteman · Accepted solution]

There is nothing inherently wrong with the way these functions are called. You wait for ready() and then do something, fine.

Neither I nor anybody else could tell you what happens after they're called.

This isn't the way to troubleshoot code -- your development team should know this.  What could someone say about code when they only know the function name?

And you shouldn't change what you're passing to the functions if the developers say they expect a Location.  Location.href is a String, not a Location.

[Betsy_Chen]

Thanks Sanford.  I've relayed your message to our dev team.