JavaScript Quick Start
This tutorial demonstrates how to integrate Journium with your JavaScript application.
Installation
Choose the installation method that best fits your project:
Ideal for websites without build tools.
<script>
!function(j,o,u,r,n,i,u,m){
if(!o.__JV){
window.journium=o;
o._q=[];
o._i=null;
o.init=function(c,n){o._i=[c,n]};
var methods="track identify reset capturePageview startAutocapture stopAutocapture flush getEffectiveOptions onOptionsChange destroy".split(" ");
for(var k=0;k<methods.length;k++){
!function(method){
o[method]=function(){o._q.push([method].concat(Array.prototype.slice.call(arguments)));return o}
}(methods[k])
}
o.__JV=1;
(m=j.createElement("script")).type="text/javascript";
m.async=!0;
m.src="https://cdn.jsdelivr.net/npm/@journium/js@1/dist/journium.min.js";
m.onerror=function(){console.warn("Journium: Failed to load SDK from CDN")};
(i=j.getElementsByTagName("script")[0]).parentNode.insertBefore(m,i);
}
}(document,window.journium||[]);
</script>Perfect for:
- Static HTML websites
- Shopify stores
- WordPress sites
- No-code platforms
For detailed CDN usage including e-commerce tracking examples and advanced configurations, see the CDN Usage Guide.
Recommended for modern web applications with build tools.
npm install @journium/jsPerfect for applications using:
- Webpack, Vite, or other bundlers
- TypeScript projects
- Modern JavaScript frameworks
Set your Journium Publishable Key
-
Sign up for a Journium account for free at journium.app/signup
-
Create an application in your Journium dashboard
-
Copy your Publishable Key from the Developers | API Keys section
Dashboard URLs automatically navigate to your app - just click!
Initialize Journium
Initialize the Journium SDK with your publishable key to start tracking events.
<script>
/* Journium snippet from above */
journium.init({
publishableKey: 'YOUR_PUBLISHABLE_KEY'
});
</script>import { init } from '@journium/js';
const journium = init({
publishableKey: 'your-journium-publishable-key'
});Track a Custom Event
Track user actions and business events with custom properties.
<script>
journium.track('button_clicked', {
button_name: 'signup',
page: 'homepage',
user_type: 'visitor'
});
</script>journium.track('button_clicked', {
button_name: 'signup',
page: 'homepage',
user_type: 'visitor'
});Identify a User
Identify users when they log in or sign up to connect their actions across sessions.
<script>
journium.identify('user_12345', {
name: 'John Doe',
email: 'john@example.com',
plan: 'premium'
});
</script>journium.identify('user_12345', {
name: 'John Doe',
email: 'john@example.com',
plan: 'premium'
});Reset User Identity
Reset user identity when they log out to ensure privacy and accurate tracking.
<script>
journium.reset();
</script>journium.reset();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
When you create an app in Journium, a default Insight Tracker is automatically created. This tracker helps you test data ingestion and insight generation.
- Go to your Developers | Insight Trackers page
- Click the
Analyze nowbutton for the tracker titled "User Engagement" - Monitor the job status in Developers | Jobs
- Wait for the job to complete (usually takes 1-2 minutes)
- View your generated insights at Dashboard | Insights
Done
Congratulations! You've successfully created your first insight with Journium!
Troubleshooting
Platform-Specific Guides
Shopify Integration
Track product views, cart events, and purchases on your Shopify store
WordPress Integration
Add analytics to your WordPress site and track blog engagement
API Documentation
Configuration Options
Complete guide to all configuration options and settings
API Methods
All methods, parameters, and usage examples
TypeScript Types
Complete type definitions for TypeScript projects
What's next?
Last updated on