SSE | Sygnal Site Engine
Community ForumSupport Us!Micro-Consulting
  • Sygnal Site Engine ( SSE )
  • The SSE Architecture
  • What's New
  • Feature Roadmap
    • Component Architecture
    • File Copy & Augmented Builds
    • SA5 Integration
  • Installation & Setup
    • Setup Github Repository
    • Setup Netlify
      • jsDelivr
    • Setup Webflow
    • Advanced Install Notes
      • Creating a Persistent Test Env
      • Add SSE to an Existing Repo
  • Usage Notes
    • Developing with SSE
    • Building & Deploying Code
    • Code Structure
    • Page Router
    • Components
      • Components Future Notes
    • Source Structure & Key Files
      • Utilities
      • Route Dispatcher
      • Infrastructure
      • Usage Notes
    • SCSS
    • Useful Library Additions
      • Adding Libraries
      • Luxon
      • Cookies
      • Core Libraries
      • Extending Capabilities
    • Best Practices
    • Unit Testing
      • Using Google Sheets as a Unit Test Data Source
      • Datetime & Timezone Tests
      • Best Practices
      • Page 1
  • Sygnal Devproxy
    • What is Devproxy?
    • Devproxy Setup
    • Cloudflare Setup
    • Webflow Site Configuration
    • Configurations
      • Controlling deployment flow
    • Future
  • Tech Stack
    • Source Code Repository
    • Visual Studio Code
    • Developer IDE
    • Dev Hosting
    • Code CDN
    • Devproxy
  • Further Development
    • Dev Team Notes
      • Engine Mode
    • Reference Project
    • Future
      • Component Development
      • Reactive State Management
      • Expand Script Loading
    • Devmode
    • CI/CD Discussions
      • Page 2
    • SA5
  • Tools
    • Webflow Designer Notation
  • SPECIAL ENHANCEMENTS
    • cookie.js
    • PostHog
Powered by GitBook
On this page
  • Installing
  • Install the package;
  • Initalize site-wide in your site.ts
  • Usage Notes
  • Feature Flags
  • Experiments (A/B tests)
  1. SPECIAL ENHANCEMENTS

PostHog

Installing

Install the package;

npm install posthog-js

Initalize site-wide in your site.ts

At the top under imports, add;

import posthog from 'posthog-js'

In the setup() method, use the posthog.init code given to you;

e.g.;

posthog.init('phc_YOUR_KEY', { api_host: 'https://us.i.posthog.com', person_profiles: 'identified_only' })

Note; you can choose to initialize only on production sites, e.g.;

// Init Posthog
// Only on non-staging pages 
if (!window.location.host.endsWith('.webflow.io')) {
  posthog.init('phc_YOUR_KEY', { api_host: 'https://us.i.posthog.com', person_profiles: 'identified_only' })
}

Usage Notes

In the exec() method, you'll perform your actual tests.

Feature Flags

Good for;

  • Switching on or off specific features

  • Doing a limited deployment of a feature to a smaller audience

if (posthog.isFeatureEnabled('flag-key') ) {
    // Do something differently for this user

    // Optional: fetch the payload
    const matchedFlagPayload = posthog.getFeatureFlagPayload('flag-key')
}

Experiments (A/B tests)

  • Good for handling variants

if (posthog.getFeatureFlag('flag-key')  == 'variant-key') { // replace 'variant-key' with the key of your variant
    // Do something differently for this user
    
    // Optional: fetch the payload
    const matchedFlagPayload = posthog.getFeatureFlagPayload('flag-key')
}

Previouscookie.js

Last updated 7 months ago