Templates
Product Analytics
Capturing Page View Events

Capturing Page View Events

In this section, you will learn how to capture page view events from a web application and send them to Moose for processing.

The analytics template includes a helper script that sends PageViewRaw data to the ingest/PageViewRaw API endpoint on your local dev server. This script automatically triggers and sends new events and sets all properties defined in the PageViewRaw Data Model.

Locating the Script

The script.js file can be found in the /public folder of the next project. When you run the NextJS Dashboard, it serves this tracking script so you can import it into your web app.

        • script.js

    • Start NextJS Dev Server

    Open a new terminal window to start your NextJS dashboard application. First, navigate to the next directory and install dependencies:

    terminal
    cd moose-product-analytics/next && npm install

    Then, start the NextJS development server:

    terminal
    npm run dev
    💡

    Note the port number used (typically 3000), as it is needed for setting up event tracking in the following steps.

    Adding the Script to Your Application

    To add the tracking script to your web application, insert the following script tag into the <head> section of your web application's HTML:

    <script
  data-host="<http://localhost:4000>"
  data-event="PageViewRaw/0.0"
  src="<http://localhost:3000/script.js>"
></script>

    Here are the key points to note:

    • data-host Attribute: This should point to the URL of your Moose ingestion web server, which is typically http://localhost:4000 when running locally. This ensures that all captured data is sent to the correct endpoint.
    • src Attribute: This should point to the URL where your tracking script is served, which is typically http://localhost:3000/script.js when running the Next.js server locally. Replace 3000 with the port number your Next.js server is running on, if different.

    With this script tag now included, your web application should be all set up to send PageViewRaw data to Moose.

    Test it Out!

    Run your web app locally and navigate the pages. In the browser's developer console, check the network tab for POST requests to http://localhost:4000/ingest/PageViewRaw.

    To confirm Moose received these events, look for Success messages in the terminal where you started the Moose server.

    To check the data in the PageViewRaw table in Clickhouse, connect to the database using credentials in moose.project.toml under [clickhouse config]. For more details, follow these instructions (opens in a new tab).

    Next Steps

    Congratulations! You have successfully integrated data into Moose. Here are some potential next steps you can explore:

    QuickstartProcessing Events