Wasp-lang•5mo ago

can I implement another analytics tool like posthog?

I want to use posthog for product analytics, can I use the npm package and where should i initialize posthog. both on the frtonend and backend

5 Replies

kapa.ai•5mo ago

Hi @haarismian. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, it's not explicitly mentioned how to integrate PostHog with Wasp. However, there is a mention of a telemetry function in a GitHub issue that uses PostHog's API key and sends data to PostHog's capture endpoint. This suggests that it might be possible to use PostHog with Wasp. Here is the relevant code snippet from the GitHub issue:

send_telemetry() {
    POSTHOG_WASP_PUBLIC_API_KEY='CdDd2A0jKTI2vFAsrI9JWm3MqpOcgHz1bMyogAcwsE4'
    DATA='{ "api_key": "'$POSTHOG_WASP_PUBLIC_API_KEY'", "type": "capture", "event": "install-script:run", "distinct_id": "'$RANDOM$(date +'%s%N')'", "properties": { "os": "'$(get_os_info)'" } }'
    URL="<https://app.posthog.com/capture">
    HEADER="Content-Type: application/json"

    if [ -z "$WASP_TELEMETRY_DISABLE" ]; then
        if has_curl; then
            curl -sfL -d "$DATA" --header "$HEADER" "$URL" > /dev/null 2>&1
        elif has_wget; then
            wget -q --post-data="$DATA" --header="$HEADER" "$URL" > /dev/null 2>&1
        fi
    fi
}

send_telemetry() {
    POSTHOG_WASP_PUBLIC_API_KEY='CdDd2A0jKTI2vFAsrI9JWm3MqpOcgHz1bMyogAcwsE4'
    DATA='{ "api_key": "'$POSTHOG_WASP_PUBLIC_API_KEY'", "type": "capture", "event": "install-script:run", "distinct_id": "'$RANDOM$(date +'%s%N')'", "properties": { "os": "'$(get_os_info)'" } }'
    URL="<https://app.posthog.com/capture">
    HEADER="Content-Type: application/json"

    if [ -z "$WASP_TELEMETRY_DISABLE" ]; then
        if has_curl; then
            curl -sfL -d "$DATA" --header "$HEADER" "$URL" > /dev/null 2>&1
        elif has_wget; then
            wget -q --post-data="$DATA" --header="$HEADER" "$URL" > /dev/null 2>&1
        fi
    fi
}

This function sends telemetry data to PostHog. You might be able to modify this function to send the data you want to track. However, for a more detailed guide on how to integrate PostHog with Wasp, you might want to check the official documentation of both Wasp and PostHog, or ask in the Wasp community. Source: GitHub Issue (https://github.com/wasp-lang/wasp/issues/1455) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @haarismian, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

haarismianOP•5mo ago

@kapa.ai where does the frontend app start, how can I add something to when the app initializes

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In a Wasp application, the frontend app starts in the main.js file in the src directory. This is where the main React component is rendered. To add something when the app initializes, you can modify the main.js file. For example, if you want to initialize an analytics tool like PostHog, you can import the PostHog library and initialize it in this file. Here is a general example of how you might do it:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import posthog from 'posthog-js';

// Initialize PostHog
posthog.init('YOUR_POSTHOG_API_KEY', { api_host: '<https://app.posthog.com'> });

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import posthog from 'posthog-js';

// Initialize PostHog
posthog.init('YOUR_POSTHOG_API_KEY', { api_host: '<https://app.posthog.com'> });

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Please replace 'YOUR_POSTHOG_API_KEY' with your actual PostHog API key. Remember, this is a general example and might need adjustments based on your specific needs and the actual API of the library you are using. For the backend, you can initialize or configure things in the server.js file or in the serverSetup.js file as shown in the Wasp documentation (https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @haarismian, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

miho•5mo ago

Did you check out the Wasp docs? https://wasp-lang.dev/docs There are parts on client config and sever config that might be useful for you 😊

Introduction | Wasp

If you are looking for the installation instructions, check out the Quick Start section.

martinsos•5mo ago

Yup you can do it as you like, there shoudln't be anything wasp specific here, just follow posthog's instructions.

Gaming

Programming

can I implement another analytics tool like posthog?