Tracking a Modal Event

Question

I am facing a problem in a analytics project I am developing.

I want to trigger a event when any type of modal opens on a specific page, the page is unknown, the type of modal can be anything in a page.

I do not want to use Google Analytics.

I am trying to find a solution for this since a long time.

I have tried for window.open, but I do not want only for window.open. It should Work for all type of libraries and modals out there.

This is what I have done so far,

    <script type="text/javascript">
        var windowOpen = window.open;

        window.open = function(url, name, features, replace) {
            alert("opening a window");
            // do other stuff here
            windowOpen(url, name, features, replace);  
        }

        document.getElementById("myBtn").addEventListener("click", function() {
            window.open("http://www.w3schools.com");
        });

    </script>   

Any help would be appreciated, thanks in advance.

EDIT1 : I thought of one thing we could do, that is we could look for some changes in the DOM. Because usually a pop up adds a DOM into the existing DOM to enable popups (but not always necessary).

Answer 1

If you're using PHP or an equivalent, you can do it with an ajax POST request, and then let the server trigger the tracking call. Generally ajax requests need to target the same server that they're running on (though there are workarounds), so I got around it by using PHP. My javascript code looks like this:

<script type="text/javascript">
    $(document).ready(function() {
        $('#yourModalId').on('shown.bs.modal', function (e) {  //this event applies to bootstrap 3+ modals
            var dd = new Date();
            var trackingtime = Math.round(Math.abs(Math.sin(dd.getTime()))*1000000000)%10000000;
            $.post("myApp/myTrackingPage",
                    { "id" : "1234567",
                      "trackingtime": trackingtime
                    },
                    function(data){
                        console.log(data);
                    }
            );
        });
    });
</script>