---
title: "Firing events from your website"
slug: "web-events"
updated: 2026-06-09T22:31:25Z
published: 2026-06-09T22:31:25Z
canonical: "docs.xtremepush.com/web-events"
stale: true
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.xtremepush.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Firing events from your website

Review how to fire events directly from your website or with Google Tag Manager

Triggered events can be added to your site very simply using the event method of the Xtremepush web SDK. Realtime events can be used to trigger campaigns in real-time.

## JavaScript

Once that you have configured your [website](/documentation/docs/website-integration) and integrated our SDK, events can be fired from your website directly by using the event method from our web SDK.

```javascript
xtremepush('event', 'EVENT_NAME');
```

Events can also include values similar to tags that can then be used to filter events from the [**Events**](/documentation/docs/campaign-events#filter-events) tab of campaigns.

```javascript
xtremepush('event', 'EVENT_NAME', 'EVENT_VALUE');
```

It is also possible to pass key-value pairs in JSON if required:

```javascript
xtremepush('event', 'product_add_to_basket', {'product_category':'Sports', 'product_name': 'Home Jersey'});
```

## Google Tag Manager

It is really easy to add events, especially if you use a tag manager like Google Tag Manager. In the examples below we will go through two sample events you might want to create, a page view event and an event related to form submission.

### Page view event

In our simple page view example we demonstrate how an event can be sent when a user views a page. We have a contact page for which we want to have a contact page viewed event:

![2484](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/763cd9e-contatct_page(1).png)

First we add a GTM trigger for a page view (navigate to **Triggers > New**). Click on the **pencil** icon to configure it. Select **Page view** > **Some page views** and include the URL of our contact page > **Save**.

![2382](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/76bc7c8-Screenshot_2021-04-13_at_17.20.01(1).png)

Then we create a tag that we link to this trigger by selecting **Tag**, from the left menu, **New**. Click on the **pencil** icon on the tag configuration section. Select **Custom HTML** tag type and include the following in the HTML:

```xml
<script type="text/javascript">xtremepush('event','contact_us_page_view');</script>
```

Next scroll down to link the trigger to this tag. Click on the **pencil** icon on Trigger and select the trigger we just created called Page view. Finally click on **Save**.

![2270](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/8818b52-Screenshot_2021-04-13_at_17.29.04(1).png)

Once the event has been fired for the first time, it will be visible in the [events tab](/documentation/docs/campaign-events) of campaign creation if you start typing the event name. You can also manually create it by navigating to **Data Manager > Events > Create event**.

![2732](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/8ccdaf0-Screenshot_2021-04-13_at_17.33.04(1).png)

Example of a web push campaign that is triggered whenever the client visits the "contact us" page.

### Form event

In our simple form submission example, we demonstrate how an event can be sent when a user inputs the name "Jane Doe" in a contact form.

First, we add a GTM trigger for forms:

Navigate to **Triggers > New**). Click on the **pencil** icon to configure it. Select **Form Submission** > **All forms** > **Save**.

![1686](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/16c9325-Screenshot_2021-04-13_at_17.39.09(1).png)

Next we create a tag that we link to this trigger by selecting **Tag** from the left menu > **New** > Click on the **pencil** icon on the tag configuration section. Select Custom HTML tag type and include the following in the HTML:

```xml
<script type="text/javascript"> if (getFormField("input[name=fname]")== "John" && getFormField("input[name=lname]")== "Doe"){
    xtremepush('event', 'john.doe');
  }
  
  
function getFormField(field_name){
  var field = {{Form Element}}.querySelector(field_name);
  console.log(field);
  return field ? field.value : undefined;
  }
</script>
```

Then scroll down to link the trigger to this tag. Click on the **pencil** icon on Trigger and select the trigger we just created called Form submission trigger. Finally click on **Save**.

![2206](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/87145cb-Screenshot_2021-04-13_at_17.50.20(1).png)

With this we are reviewing the first name and last name fields and check if they equal John and Doe:

When the event condition is fulfilled, we send the custom event `john.doe` using the Xremepush web SDK event method.

We can now use this event to trigger communications to our customers.
