Tracking Virtual Pageviews

[Sean]

Hi,

Because the calendar’s search and filtering is based on AJAX (vs full page reloads), submitting search queries via the Tribe Events Bar and the Filter Bar do not trigger page views in Google Analytics. Same goes for the page navigation in calendar (“Previous Events” and “Next Events”). Thus, we need to track these as Virtual Pageviews in Google Analytics to account for the pageviews that occur when users perform searches for events as well as when the navigate through the pages of search results.

In researching Virtual Pageviews, it appears the syntax is:
ga(‘send’, ‘pageview’, ‘name of virtual page’);

For example:
<a href=”https://www.example.com/some-file.pdf” onClick=”ga(‘send’, ‘pageview’, ‘/virtual/some-file.pdf’);“> An Example Title</a>

We want to generate a Virtual Pageview whenever a user clicks the Find Events button in the Tribe Events bar, as well as when a user navigates the search results via the “Previous Events” or “Next Events” links at the bottom of the calendar views. My understanding is that we’ll need to add ga(‘send’, ‘pageview’, ‘name of virtual page’); to those respective elements. Which core Events Calendar files contain the code for these?

Thank you,
Karly

PS – If anyone else has added this type of tracking on their calendar via another method that does not require editing a core file, I would love to hear how you achieved that (I do not have experience with Virtual Pageviews and am not sure which alternative methods might work with this other than editing the files that contain the button and pagination link elements).

[George]

Hey Karly,

This is indeed an interesting problem—your proposed solution does look promising. To modify the next- and previous-event action links’ HTML, you would have to modify the code in template files labeled nav.php.

There are a few different instances of nav.php files for the different calendar views—though they’re all quite similar, and are easy to customize.

The views are as follows:

• /the-events-calendar/src/views/day/nav.php
• /the-events-calendar/src/views/list/nav.php
• /the-events-calendar/src/views/month/nav.php

Best of luck with your customizing!
George

PS

1. I do not know of another way to do this without modifying core files. If you can do it with pure JavaScript, then you could write that JavaScript in a JavaScript file on your site somewhere and just load it on event pages. So this wouldn’t require modifying core plugin files…just a thought!

2. To find the location of any markup you are curious about, or would like to modify, I would recommend getting a text editor like Sublime Text. Any good text editor like this will have a “Find in Folder” feature that lets you search for code like this in a folder—so you could search all of the plugin code for The Events Calendar by searching the folder /wp-content/plugins/the-events-calendar, for example. A query on this folder for “next” or “prev” would lead you to the files I listed above. 🙂 It’s a huge help! I highly recommend looking into this.

[Sean]

Good afternoon George,

Thanks for your suggestion on the Javascript and for letting me know where the “Next and “Prev” files are! I tried searching for keywords in a folder/directory and it worked nicely. This was a feature I wasn’t aware of, so thank you for making me aware of it!

It looks like the code for the Find Events buttons is located in \the-events-calendar\src\views\modules\bar.php for the main search bar, while if I am using the Filter Bar with a horizontal alignment the code for that button is located in \the-events-calendar-filterbar\src\views\filter-bar\filter-view-horizontal.php

Would you be able to confirm if editing filter-view-horizontal.php will effect the Submit button not only on desktop, but also on the mobile layout?

Thanks again and best regards,
Karly

[George]

Glad to hear it, Karly!

I unfortunately cannot confirm your last question, which is as follows:

Would you be able to confirm if editing filter-view-horizontal.php will effect the Submit button not only on desktop, but also on the mobile layout?

It would depend on what edits you make, specifically. So unfortunately for this question the best I can recommend is to make your edits and see how they affect things.

(Although generally speaking, yes, your edits will be applied the same way in both the mobile layout and desktop layout.)

— George

[Sean]

Okay sounds good George. Thanks again for the info and tips!

Best regards,
Karly

[George]

No problem—best of luck with your customizing and tinkering! 🙂

— George

[Author]

Posts