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.

note

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:

<script>
window.Tribe.on('pageView', function(route) {
console.log('Page changed', route.page, route.previousPage);
});
</script>

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

Ready#

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:

<script>
window.Tribe.on('ready', function() {
console.log('Tribe is now ready!');
});
</script>

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.

Event#

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:

<script>
window.Tribe.on('event', function(event) {
console.log('New event', event);
});
</script>

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:

NounVerbQuery/Mutation
Network Events
networkupdatedupdateNetwork
Space Events
spacecreatedcreateSpace
spaceupdatedupdateSpace
spacedeleteddeleteSpace
spacejoinedjoinSpace
spaceleftleaveSpace
Collection Events
collectioncreatedcreateCollection
collectionupdatedupdateCollection
collectiondeleteddeleteCollection
Post Events
postcreatedcreatePost/createReply
postupdatedupdatePost
postdeleteddeletePost
posthiddenhidePost
postunhiddenunhidePost
postdeleteddeletePost
Member Post Notification Settings Events
memberPostNotificationSettingsupdatedupdateMemberPostNotificationSettings
Reaction Events
reactionaddedaddReaction
reactionremovedremoveReaction