CODEWITHSUNDEEP
javascriptjquerygoogle-analytics
SvbZ3r0
SvbZ3r0

Reputation: 638

jQuery script not working as expected when opening another page

I'm working on implementing Google Analytics in my website, which I'm currently building. I have a link in my page that opens a PDF file and I'm trying to track the number of file opens.

Using the javascript console in Chrome and because the alert box opens, I can determine that the following code works.

<a id="ga-link" href="path.to.my.file.com">Open PDF file</a>

<script>
(function( $ ) {
    $("#ga-link").on("click", function( event ){
        event.preventDefault();
        gtag('event', 'view', {
        'filetype':'pdf',
        'filename':'file1',
        'event_callback': function() {alert("1");}
        });
    });
})(jQuery);
</script>

But if I replace

'event_callback': function() {alert("1");}

with

'event_callback': function() {$(#ga-link).click();}

which is what I actually want to do, the script doesn't run. Instead, the file is directly opened (no tracking info sent to Analytics).

I also tried using the javascript code from the Google Analytics documentation:

var btn = document.getElementById('ga-link');
btn.addEventListener('click', function(event) {
    event.preventDefault();
    gtag('event', 'view', {
        'filetype':'pdf',
        'filename':'file1',
        'event_callback': function() {btn.click();}
    });
});

This straight up doesn't work at all, no matter what my 'event_callback' function is.

In both cases, I have tried opening the PDF in the same tab and in a new tab, with the same results.

Upvotes: 0

Views: 99

Answers (2)

SvbZ3r0
SvbZ3r0

Reputation: 638

The problem was that there was a circular call to the click event as pointed out by TejSoft in his comment.
Here's what I did.

(function( $ ) {
    $("#ga-link").on("click", function( event ){
        event.preventDefault();
        gtag('event', 'view', {
            'filetype':'pdf',
            'filename':'file1',
            'event_callback': function() {
                $('#ga-link').unbind('click');           /*to prevent repeat data from being sent to GA*/
                window.open($('#ga-link').attr('href'));/*opens file*/
                }
            });
        }
})(jQuery);

Upvotes: 0

Julius Dzidzevičius
Julius Dzidzevičius

Reputation: 11000

In Google example they used form as an example. So if you preventDefault()on form submit button - it prevents submition, but later you can submit form directly - form.submit(). In your case, button always prevents default - even in your callback function.

There are some ways to "cancel" preventDefault. One could be:

var btn = document.getElementById('ga-link');

var sendData = function() {
    this.preventDefault();
    gtag('event', 'view', {
        'filetype':'pdf',
        'filename':'file1',
        'event_callback': function() {
           $('#ga-link').unbind('click').click();
           // your code to open url etc.
           btn.addEventListener('click', sendData);
         }
    });
});

btn.addEventListener('click', sendData);

Upvotes: 1

Related Questions