Skip to main content

Frontend Listeners

You can use window.Tribe.on (or in short Tribe.on) to listen for certain frontend actions and events such as page views, new events/actions, and readiness of the Tribe app.


Please note that you have access to window.Tribe in the Custom Snippet App as well. This means for basic use-cases you don't need to create an app to access the frontend listeners and actions.

Page View#

Tribe is a single-page app, therefore, it does not reload the whole page when you navigate to different pages.

As a result, Tribe provides a listener that is triggered whenever member navigates to a new page. This can be useful when you want to do a certain action on every page view (e.g. sending page views to Google Analytics), or modifying a DOM object on certain pages.

You can use the Tribe.on('pageView') like this:

window.Tribe.on('pageView', function(route) {
console.log('Page changed',, route.previousPage);

Please note that route.previousPage is undefined when the page is loaded initially or is reloaded.

The above script will log the following when a member navigates from the homepage to spaces page:

Page changed / /spaces


In many cases when you want to perform a certain action, you want to make sure the Tribe app is ready. As an example, you cannot perform Tribe frontend actions before the whole app is loaded.

You can use Tribe.on('ready') listener to achieve this:

window.Tribe.on('ready', function() {
console.log('Tribe is now ready!');

This will console log Tribe is now ready! once Tribe app is loaded. At this point, you can use all Tribe frontend actions. You can learn more about Tribe frontend actions in the next section.


In some cases, you may want to do a certain action when another action happens. As an example, maybe you want to show a toast when a new post is created, or you want to track number of times members reacted to posts and send them to an analytic tool.

You can simply listen on new Events using the following snippet:

window.Tribe.on('event', function(event) {
console.log('New event', event);

The above script will log the following when a new post is created:

New event {
noun: "post",
verb: "created",
object: {
id: "ZdnlDxqtgmZD270",
title: "Hello World!",
// The rest of post object
variables: {
spaceId: "GH4aeYWbyGXM",
input: {
// The input sent to Tribe GraphQL API

The events are triggered when certain API calls are made. An event object has 4 main attribute noun, verb, object, and variables.

  1. noun corresponds to the object that was affected.
  2. verb shows the action that affected the noun.
  3. object is the response of the API call.
  4. variables is the data sent in the API call.

Here is a list of all events available on Tribe:

Network Events
Space Events
Collection Events
Post Events
Member Post Notification Settings Events
Reaction Events