Journey Tracking

DataGlue now tracks complete user journeys - every session, every event, every step from first visit to conversion. All data is stored in localStorage as a backup, and optionally synced to your server.

Features

✅ Complete history - Every session and event from first visit
✅ Offline-first - Works without server, data stored in localStorage
✅ JSON format - Two simple collections: users and events
✅ Auto-identification - Detects email from forms or URL params
✅ First & last touch - Attribution tracking built-in
✅ Form-friendly - Works with native forms, Fillout, Typeform, etc.

Quick Start

Step 1: Add Profile Endpoint

<script
  src="https://api.dataglue.io/glue.min.js"
  profile-endpoint="https://your-api.com/glue"
  auto-identify="true"
  track-events="pageview,form_submit,click"
></script>

Step 2: That’s It!

DataGlue automatically:

Tracks page views, clicks, form submits
Stores everything in localStorage (3 keys):
- glue_user_profile - User info
- glue_sessions - All sessions
- glue_events - All events
Auto-identifies users when they fill email fields
Sends data to your API endpoint

How It Works

User Journey Flow

Day 1:
  → User lands from Google (utm_source=google)
  → DataGlue generates glue_user_id: "abc-123"
  → Tracks: page_view (/landing)
  → User leaves

Day 3:
  → User returns directly
  → Same glue_user_id: "abc-123" (from localStorage)
  → Tracks: page_view (/blog)
  → User leaves again

Day 5:
  → User clicks email link (utm_source=email)
  → Lands on /promo
  → Fills form with email: john@example.com
  → DataGlue auto-identifies: links "abc-123" → "john@example.com"
  → Form redirects to /thank-you?email=john@example.com&glue_user_id=abc-123
  → Your server receives identify() call
  → Journey complete!

Data Structure

localStorage Keys

`glue_user_profile`

{
  "glue_user_id": "abc-123-uuid",
  "email": "john@example.com",
  "traits": {
    "fname": "John",
    "lname": "Doe"
  },
  "first_seen": "2024-01-15T10:30:00Z",
  "last_seen": "2024-01-20T16:20:00Z",
  "identified": true
}

`glue_sessions`

[
  {
    "session_id": "session-001",
    "session_start": "2024-01-15T10:30:00Z",
    "landing_page": "/landing",
    "referrer": "https://google.com",
    "utm": {
      "utm_source": "google",
      "utm_campaign": "summer"
    },
    "pages_viewed": 3,
    "events_count": 5,
    "converted": false
  },
  {
    "session_id": "session-002",
    "session_start": "2024-01-20T16:00:00Z",
    "landing_page": "/promo",
    "utm": {
      "utm_source": "email"
    },
    "pages_viewed": 4,
    "converted": true
  }
]

`glue_events`

[
  {
    "event_id": "evt-001",
    "session_id": "session-001",
    "event": "page_view",
    "timestamp": "2024-01-15T10:30:00Z",
    "properties": {
      "url": "/landing",
      "title": "Landing Page"
    }
  },
  {
    "event_id": "evt-002",
    "session_id": "session-001",
    "event": "button_click",
    "timestamp": "2024-01-15T10:32:15Z",
    "properties": {
      "button_text": "Learn More"
    }
  },
  {
    "event_id": "evt-003",
    "session_id": "session-002",
    "event": "form_submit",
    "timestamp": "2024-01-20T16:05:00Z",
    "properties": {
      "form_id": "signup"
    }
  }
]

JavaScript API

View Journey Data

// Get complete user journey
const data = glue.journey.getCompleteData();
console.log(data);
/* Returns:
{
  profile: {...},
  sessions: [...],
  events: [...],
  summary: {
    total_sessions: 3,
    total_events: 16,
    converted_sessions: 1,
    attribution: {
      first_touch: { utm_source: "google" },
      last_touch: { utm_source: "email" }
    }
  }
}
*/

// Get just the profile
const profile = glue.journey.getProfile();

// Get all sessions
const sessions = glue.journey.getSessions();

// Get all events
const events = glue.journey.getEvents();

// Export as JSON (for download/debugging)
const json = glue.journey.exportData();
console.log(json); // Pretty-printed JSON string

Manual Tracking

// Track custom event
glue.journey.track('video_played', {
  video_id: '123',
  duration: 45
});

// Manually identify user
glue.journey.identify('user@example.com', {
  fname: 'John',
  lname: 'Doe',
  plan: 'premium'
});

// Clear all journey data
glue.journey.clear();

Server Sync

// Manually send identify to server
await glue.sync.identify('user@example.com', {
  fname: 'John',
  subscription: 'pro'
});

// Manually track event to server
await glue.sync.track('purchase', {
  product_id: '123',
  amount: 99.00
});

// Sync all local data to server
await glue.sync.syncAll();

// Configure sync settings
glue.sync.config({
  autoSync: true,
  syncInterval: 30000 // 30 seconds
});

Server-Side API

Your server needs to handle these endpoints:

POST /glue/identify

Links glue_user_id to email address. Request:

{
  "glue_user_id": "abc-123-uuid",
  "email": "user@example.com",
  "traits": {
    "fname": "John",
    "lname": "Doe"
  },
  "context": {
    "session_id": "session-456",
    "utm_source": "google",
    "utm_campaign": "summer",
    "page": {
      "url": "https://example.com/landing",
      "title": "Landing Page"
    },
    "visitor": {
      "user_agent": "Mozilla/5.0...",
      "geolocation": "US | New York",
      "timezone": "America/New_York"
    }
  }
}

Example Handler (Node.js):

app.post('/glue/identify', async (req, res) => {
  const { glue_user_id, email, traits, context } = req.body;

  // Save to database (MongoDB example)
  await db.users.updateOne(
    { glue_user_id },
    {
      $set: {
        email,
        traits,
        last_seen: new Date(),
        'attribution.last_touch': {
          utm_source: context.utm_source,
          utm_campaign: context.utm_campaign,
          timestamp: new Date()
        }
      },
      $setOnInsert: {
        glue_user_id,
        first_seen: new Date(),
        'attribution.first_touch': {
          utm_source: context.utm_source,
          utm_campaign: context.utm_campaign,
          timestamp: new Date()
        }
      }
    },
    { upsert: true }
  );

  res.json({ success: true });
});

POST /glue/track

Records individual events. Request:

{
  "glue_user_id": "abc-123-uuid",
  "session_id": "session-456",
  "email": "user@example.com",
  "event": "button_click",
  "properties": {
    "button_text": "Get Started",
    "page": "/landing"
  },
  "timestamp": 1704376800000,
  "context": {
    "utm_source": "google"
  }
}

Example Handler:

app.post('/glue/track', async (req, res) => {
  const { glue_user_id, event, properties, timestamp } = req.body;

  // Insert event
  await db.events.insert({
    glue_user_id,
    event,
    properties,
    timestamp: new Date(timestamp)
  });

  // Update user last_seen
  await db.users.updateOne(
    { glue_user_id },
    { $set: { last_seen: new Date() } }
  );

  res.json({ success: true });
});

POST /glue/sync

Receives complete user data (all sessions + events). Request:

{
  "glue_user_id": "abc-123-uuid",
  "data": {
    "profile": {...},
    "sessions": [...],
    "events": [...],
    "summary": {...}
  },
  "synced_at": "2024-01-20T16:30:00Z"
}

Example Handler:

app.post('/glue/sync', async (req, res) => {
  const { glue_user_id, data } = req.body;

  // Save complete user data
  await db.users.updateOne(
    { glue_user_id },
    { $set: { ...data.profile, last_synced: new Date() } },
    { upsert: true }
  );

  // Bulk insert events
  if (data.events.length > 0) {
    await db.events.insertMany(data.events, { ordered: false });
  }

  res.json({ success: true });
});

Configuration Options

Script Tag Attributes

<script
  src="https://api.dataglue.io/glue.min.js"
  profile-endpoint="https://api.example.com/glue"
  auto-identify="true"
  auto-sync="false"
  track-events="pageview,click,form_submit"
></script>

Attribute	Default	Description
`profile-endpoint`	-	Your API base URL
`auto-identify`	`true`	Auto-identify from email fields/URL params
`auto-sync`	`false`	Automatically sync data to server
`track-events`	`pageview,form_submit`	Events to auto-track (comma-separated)

Event Types

Auto-trackable events:

pageview - Page views
click - Link and button clicks
form_submit - Form submissions

Query Examples

Get User Journey

// Client-side
const journey = glue.journey.getCompleteData();

// Server-side (MongoDB)
const user = await db.users.findOne({ email: "john@example.com" });
const events = await db.events.find({ glue_user_id: user.glue_user_id }).sort({ timestamp: 1 });

Conversion Funnel

// Server-side
const landed = await db.events.countDocuments({
  event: "page_view",
  "properties.path": "/landing"
});

const submitted = await db.events.countDocuments({
  event: "form_submit"
});

const converted = await db.events.countDocuments({
  event: "page_view",
  "properties.path": "/thank-you"
});

console.log(`Funnel: ${landed} → ${submitted} → ${converted}`);

Attribution Report

// Server-side
const sources = await db.users.aggregate([
  {
    $group: {
      _id: "$attribution.first_touch.utm_source",
      count: { $sum: 1 }
    }
  }
]);

Best Practices

Let forms redirect with query params - Easiest way to pass data between pages
Use meaningful event names - video_played not event_1
Keep properties simple - JSON-serializable values only
Implement server endpoints - Don’t rely solely on localStorage
Test with different form providers - Fillout, Typeform, native HTML

Troubleshooting

Check localStorage Data

// Open browser console
console.log(JSON.parse(localStorage.getItem('glue_user_profile')));
console.log(JSON.parse(localStorage.getItem('glue_sessions')));
console.log(JSON.parse(localStorage.getItem('glue_events')));

Debug Mode

// Enable detailed logging
localStorage.setItem('glue_dev_mode', 'true');
location.reload();

Export Journey

// Download complete journey as JSON file
const data = glue.journey.exportData();
const blob = new Blob([data], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'user-journey.json';
a.click();

FAQ

Q: Does this work with iframes? A: Yes! For embedded forms, they redirect with query params. DataGlue on the next page auto-identifies from URL. Q: What if my server is down? A: All data stays in localStorage. When server comes back up, call glue.sync.syncAll(). Q: How much localStorage space does this use? A: ~10-50KB per user. DataGlue limits to 1000 events and 100 sessions automatically. Q: Can I use this with Segment/Mixpanel? A: Yes! Use glue.journey.track() and send to both DataGlue and your analytics tool. Q: How do I handle multiple devices? A: Each device has its own glue_user_id. When email is captured, your server links all IDs to one user.

Get Started

Core Concepts

Features

Server Setup

Reference

Journey Tracking

Journey Tracking

Features

Quick Start

Step 1: Add Profile Endpoint

Step 2: That’s It!

How It Works

User Journey Flow

Data Structure

localStorage Keys

`glue_user_profile`

`glue_sessions`

`glue_events`

JavaScript API

View Journey Data

Manual Tracking

Server Sync

Server-Side API

POST /glue/identify

POST /glue/track

POST /glue/sync

Configuration Options

Script Tag Attributes

Event Types

Query Examples

Get User Journey

Conversion Funnel

Attribution Report

Best Practices

Troubleshooting

Check localStorage Data

Debug Mode

Export Journey

FAQ

Get Started

Core Concepts

Features

Server Setup

Reference

Documentation Index

​Journey Tracking

​Features

​Quick Start

​Step 1: Add Profile Endpoint

​Step 2: That’s It!

​How It Works

​User Journey Flow

​Data Structure

​localStorage Keys

​glue_user_profile

​glue_sessions

​glue_events

​JavaScript API

​View Journey Data

​Manual Tracking

​Server Sync

​Server-Side API

​POST /glue/identify

​POST /glue/track

​POST /glue/sync

​Configuration Options

​Script Tag Attributes

​Event Types

​Query Examples

​Get User Journey

​Conversion Funnel

​Attribution Report

​Best Practices

​Troubleshooting

​Check localStorage Data

​Debug Mode

​Export Journey

​FAQ

Journey Tracking

Features

Quick Start

Step 1: Add Profile Endpoint

Step 2: That’s It!

How It Works

User Journey Flow

Data Structure

localStorage Keys

`glue_user_profile`

`glue_sessions`

`glue_events`

JavaScript API

View Journey Data

Manual Tracking

Server Sync

Server-Side API

POST /glue/identify

POST /glue/track

POST /glue/sync

Configuration Options

Script Tag Attributes

Event Types

Query Examples

Get User Journey

Conversion Funnel

Attribution Report

Best Practices

Troubleshooting

Check localStorage Data

Debug Mode

Export Journey

FAQ