🧠 Using Scout with JavaScript

This guide covers common approaches to sending events to Scout using JavaScript in different environments and frameworks.

Scout accepts events via a simple HTTP POST request, so any method of making an HTTP request from the browser or your frontend framework will work.

Vanilla JavaScript (Fetch)

You can send events using the built-in fetch API:

const event = {
  source_id: "my-source-id",
  type: "page_view",
  payload: {
    url: window.location.href,
  },
};

fetch("https://api.usescout.io/api/events", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(event),
})
  .then((res) => {
    if (!res.ok) {
      console.error("Failed to send Scout event");
    }
  })
  .catch((err) => console.error("Error sending Scout event", err));

React

You can send events inside a useEffect or a custom tracking hook:

import { useEffect } from "react";

function useScoutEvent(type, payload) {
  useEffect(() => {
    const event = {
      source_id: "my-source-id",
      type,
      payload,
    };

    fetch("https://api.usescout.io/api/events", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(event),
    });
  }, [type, payload]);
}

// Usage
useScoutEvent("page_view", { url: window.location.href });

Vue

You can send an event using the mounted() lifecycle hook or inside a method:

export default {
  mounted() {
    const event = {
      source_id: "my-source-id",
      type: "page_view",
      payload: {
        url: window.location.href,
      },
    };

    fetch("https://api.usescout.io/api/events", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(event),
    });
  },
};

You may also register a global method or use a Vue plugin for reuse.

Svelte

In Svelte, you can use the onMount lifecycle function:

<script>
  import { onMount } from "svelte";

  onMount(() => {
    const event = {
      source_id: "my-source-id",
      type: "page_view",
      payload: {
        url: window.location.href,
      },
    };

    fetch("https://api.usescout.io/api/events", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(event),
    });
  });
</script>

jQuery

You can use $.ajax() to send events:

const event = {
  source_id: "my-source-id",
  type: "page_view",
  payload: {
    url: window.location.href,
  },
};

$.ajax({
  url: "https://api.usescout.io/api/events",
  type: "POST",
  contentType: "application/json",
  data: JSON.stringify(event),
  success: () => {
    // Success
  },
  error: (xhr, status, error) => {
    console.error("Scout event error:", error);
  },
});

Next.js

In Next.js, you might send events client-side in useEffect or on route change:

import { useEffect } from "react";
import { useRouter } from "next/router";

export default function PageTracker() {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url) => {
      fetch("https://api.usescout.io/api/events", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          source_id: "my-source-id",
          type: "page_view",
          payload: { url },
        }),
      });
    };

    router.events.on("routeChangeComplete", handleRouteChange);
    return () => router.events.off("routeChangeComplete", handleRouteChange);
  }, [router]);
}

Nuxt (Vue-based)

In Nuxt, you can use the mounted hook in components or a plugin:

export default {
  mounted() {
    fetch("https://api.usescout.io/api/events", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        source_id: "my-source-id",
        type: "page_view",
        payload: {
          url: window.location.href,
        },
      }),
    });
  },
};