Angular Quick Start

Install @journium/angular

The Journium Angular SDK gives you access to a JourniumService, Angular module, and provider functions to send events from your Angular application and get insights from your data.

Run the following command to install the SDK:

npm i @journium/angular

Set your Journium Publishable Key

1. Sign up for a Journium account for free at journium.app/signup

2. Create an application in your Journium dashboard

3. Copy your Publishable Key from the Developers | API Keys section

   Dashboard URLs automatically navigate to your app - just click!

4. Add your key to src/environments/environment.ts:

   export const environment = {
     production: false,
     journiumPublishableKey: 'your_publishable_key_here',
   };

   Development instances use pk_test_ keys. Production keys start with pk_live_.

Initialize Journium in your app

The Journium Angular SDK supports both standalone (Angular 15+) and NgModule patterns.

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { provideJournium, withJourniumRouter } from '@journium/angular';
import { environment } from './environments/environment';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    provideJournium({
      publishableKey: environment.journiumPublishableKey,
    }),
    provideRouter(routes),
    // Optional: automatically track pageviews on each route change
    withJourniumRouter(),
  ],
});

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { JourniumModule } from '@journium/angular/ngmodule';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    JourniumModule.forRoot({
      publishableKey: environment.journiumPublishableKey,
    }),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Use JourniumService in your components

Inject JourniumService to track events anywhere in your app:

import { Component } from '@angular/core';
import { JourniumService } from '@journium/angular';

@Component({
  selector: 'app-home',
  standalone: true,
  template: `
    <button (click)="handleClick()">Track Event</button>
  `,
})
export class HomeComponent {
  constructor(private journium: JourniumService) {}

  handleClick(): void {
    this.journium.track('button_clicked', {
      page: 'home',
      button_text: 'Track Event',
    });
  }
}

Run the Development Server

Start your application:

ng serve

Verify Your Setup

Open http://localhost:4200 in your browser. Interact with your app to generate events.

Send Events to Journium

Navigate around your app to automatically send events to Journium.

Then view your collected events at Developers | Events.

Success indicator: You should see events appearing in your dashboard within a few seconds.

Generate Your First Insight

1. Go to your Developers | Insight Trackers page
2. Click the Analyze now button for the tracker titled "User Engagement"
3. Monitor the job status in Developers | Jobs
4. Wait for the job to complete (usually takes 1-2 minutes)
5. View your generated insights at Dashboard | Insights

Done

Congratulations! You've successfully created your first insight with Journium!