Load More button and google analytics

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to trigger a Google Analytics event when anyone clicks a pagination link.

Solution: Use a CSS classname and jQuery's "on" function like so:

jQuery(document).ready(function(jQuery){
    jQuery(document).on("click", ".js-wpv-pagination-next-link", function(e){
        alert("I am an alert box!");
        return true; 
    }); 
});

Relevant Documentation:
https://api.jquery.com/on/

This support ticket is created 5 years, 8 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Views plugin, WordPress Archives

This topic contains 7 replies, has 2 voices.

Last updated by Christian Cox 5 years, 8 months ago.

Assisted by: Christian Cox.

Author

Posts

July 27, 2019 at 1:30 pm #1301961

arisG

Hello,

We would like to track Load More button clicks and sent an event to google analytics. We have set up a WordPress Archive with the load more button

[wpv-pager-next-page][wpml-string context="wpv-views"]Load More[/wpml-string][/wpv-pager-next-page]

How is this possible?

Thank you

July 28, 2019 at 3:29 pm #1302323

Christian Cox

Hi, I'm not a Google Analytics expert so I'm not exactly sure. How would you set this up without Toolset? For example, if you had a basic text link and you wanted to track clicks on that link, how would you set that up in HTML / JavaScript?

July 29, 2019 at 12:15 pm #1302843

arisG

Hello Christian,

For example, when we track Tabs click we have added the following code in our child theme javascript.js

jQuery(document).ready(function(jQuery){
    jQuery("#fusion-tab_One").on("click", function(e){
        gtag('event', 'Our_event ',{'event_category': '  Our_category ','event_label': 'Our_Label',});
        return true; 
    });

We need the id of the Tab to track. So, in our case, we need id of Load More button but i can see any

<a class="wpv-filter-next-link js-wpv-pagination-next-link page-link " href="/?wpv_view_count=62151&wpv_paged=2" data-viewnumber="62151" data-page="2">Load More</a>

Thank you

July 29, 2019 at 2:32 pm #1302949

Christian Cox

You should be able to use the CSS classname instead:

jQuery(document).ready(function(jQuery){
    jQuery(".js-wpv-pagination-next-link").on("click", function(e){
        gtag('event', 'Our_event ',{'event_category': '  Our_category ','event_label': 'Our_Label',});
        return true; 
    });

July 29, 2019 at 6:12 pm #1303083

arisG

Hello,

I have added the code and its working but only the first time where the load more button is triggered

jQuery(document).ready(function(jQuery){
    jQuery(".js-wpv-pagination-next-link").on("click", function(e){
		alert("I am an alert box!");
        return true; 
    });	
});

July 29, 2019 at 9:41 pm #1303201

Christian Cox

Ah okay. Let's try this alternative:

jQuery(document).ready(function(jQuery){
    jQuery(document).on("click", ".js-wpv-pagination-next-link", function(e){
        alert("I am an alert box!");
        return true; 
    }); 
});

That should keep the event listener working even after updates.

July 30, 2019 at 8:27 am #1303395

arisG

Hello Christian,

It works. You may close the ticket.

Thank you!

July 30, 2019 at 2:26 pm #1303965

Christian Cox

Great!