Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Tracking Modal Windows

Avatar

Level 1

Hi

I've got a site with some modal pop up windows that display after a user clicks a button.  I'd like to track a page-view for this when the page displays.  The page is a sign-up form for registering with the site as well as a follow-up email verification page.  Any help is appreciated here.

1 Accepted Solution

Avatar

Correct answer by
Level 2

Assuming you're not talking about a whole new page/window, and in fact a dynamic modal window that would not lend itself to adding the standard analytics code, you can just use the s.t() directly to "fire" a page view when the modal opens.  We have done this many times.  Let me know if you have any questions!

View solution in original post

0 Replies

Avatar

Level 2

Hi Brad,

You can implement the analytics code on the sign up page that comes as a modal pop up. This sign up page may be an html page, so you can implement the analytics variables at the page level and call the core js file (s_code.js).

You can use the jquery colorbox plug in.

At the page where you have the button/link to that modal window (the sign up page), just place this code just before </head> tag:

<link rel="stylesheet" href="colorbox.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="jquery.colorbox.js"></script>
        <script>
            $(document).ready(function(){
                //Examples of how to assign the Colorbox event to elements
                $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
            });
        </script>

Then add the href code with iframe to call your "Sign Up" page (The Modal Window) anywhere in the <body> tag, like this:

<a class='iframe' href="signup.htm">Sign Up</a>

You can see an example using Google Chrome web browser at the following test site:

http://analyticsawesomeness.bugs3.com/

Look at the page source for the code and "jquery.colorbox.js" file.

Hope that helps. smiley

Regards,
Ryan

Avatar

Correct answer by
Level 2

Assuming you're not talking about a whole new page/window, and in fact a dynamic modal window that would not lend itself to adding the standard analytics code, you can just use the s.t() directly to "fire" a page view when the modal opens.  We have done this many times.  Let me know if you have any questions!