> ## Documentation Index
> Fetch the complete documentation index at: https://docs.navattic.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Segment

> Send demo events to Segment for advanced analytics and data routing.

export const MediaCard = ({title = '', url, type = 'demo'}) => {
  const attributes = type === 'demo' ? {
    'data-navattic-open': url,
    'data-navattic-title': title
  } : {
    'data-video': url
  };
  return <div {...attributes} className="hidden md:inline-block w-auto cursor-pointer overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
<div className="flex items-center gap-3 bg-white dark:bg-gray-800 px-3 py-2">
<div className={`flex h-7 w-7 items-center justify-center rounded-md ${type === 'video' ? 'bg-blue-100 dark:bg-blue-900' : 'bg-orange-100 dark:bg-orange-900'}`} style={{
    backgroundColor: type === 'video' ? 'var(--video-bg)' : 'var(--demo-bg)'
  }}>
<Icon icon={type === 'video' ? 'circle-play' : 'square-mouse-pointer'} color={type === 'video' ? 'var(--video-icon)' : 'var(--demo-icon)'} />
</div>
<div>
<div className="text-sm font-medium text-gray-900 dark:text-gray-100">
{type === 'video' ? 'Watch video' : 'Try a demo'}
</div>
<div className="text-sm text-gray-500 dark:text-gray-400">{title}</div>
</div>
</div>
<style jsx>{`
  :root {
    --video-bg: #dbeafe;
    --video-icon: #2563eb;
    --demo-bg: #ffedd5;
    --demo-icon: #ea580c;
  }
  :global(.dark) {
    --video-bg: #1e3a8a;
    --video-icon: #60a5fa;
    --demo-bg: #7c2d12;
    --demo-icon: #fb923c;
  }
`}</style>
</div>;
};

<Frame>
  <img className="overflow-hidden rounded-xl border" src="https://mintcdn.com/navattic-app/Wym34-C-snZlIePn/images/segment.png?fit=max&auto=format&n=Wym34-C-snZlIePn&q=85&s=151bc6255bcaa143bac38db6074268ec" alt="Segment integration" width="1736" height="768" data-path="images/segment.png" />
</Frame>

Integrating with **Segment** allows you to process the raw event data from Navattic in any way you want. Navattic strives to minimize the changes to the Segment integration, and if necessary will provide ample notice for any breaking changes.

Events will be sent to your Segment setup whenever a Visitor session in your demo is marked as closed. The timestamp in each respective event will be an ISO-8601 formatted date-time string that signifies the closing time of the session. The event will also contain information about the session, including a list of the recorded events associated with the session, as well as the corresponding end-user the session relates to, and the company account, if any (company account can be null).

<MediaCard url="https://www.loom.com/embed/2978ceea6b674b27a90b09dba2cab312?sid=f5aa0602-6ac8-49a1-9385-07f7c6818f98" type="video" title="Segment and Webhook" />

### Event Types

Segment supports two different types of events: track and identify. **Track** events contain information about how a visitor interacted with your demo (e.g. viewed a flow step) while **Identify** events contain identification information for the associated visitor and company account.

<Expandable title="Segment Example Track Event">
  ```json theme={null}
  {
    event: 'Session Closed',
    userId: 'abc123',
    properties: {
      timestamp: '2024-07-24T21:21:21.389Z',
      session: {
        closed_at: '2024-07-24T21:21:21.389Z',
        closed_by: 'PAGE_LEAVE',
        recorded_events: [
          {
            id: 'clz0czwjs000008m54x5mbzbp',
            created_at: '2024-07-24T21:21:21.389Z',
            updated_at: '2024-07-24T21:21:21.389Z',
            type: 'VIEW_STEP',
            recorded_step_id: 'clz0d3sq7000608m52n529l9k',
            recorded_step_index: 5,
            recorded_step_common_id: 'clz0d3x7y000708m5bzlwfll2',
            recorded_step_name: 'step name',
            recorded_flow_id: 'clz0d40v5000808m58evb8g7j',
            recorded_flow_name: 'flow name',
            recorded_project_id: 'clz0d45gc000908m5207lhziy',
            recorded_project_name: 'project name',
            recorded_checklist_id: 'clz0d49n2000a08m56936629p',
            recorded_checklist_name: 'checklist name',
            recorded_task_id: 'clz0d4cuu000b08m50rf86gqz',
            recorded_task_name: 'task name',
            url_navigated: '/',
            workspace_id: 'clz0d53sj000c08m5gjn2259r',
            project_id: 'clz0d5acx000d08m5hz4gbxqr',
            project_share_link_id: 'clz0d5m14000e08m599mb3qtl',
            flow_id: 'clz0d5xv5000f08m58grzam4a',
            checklist_id: 'clz0d64g3000g08m5fxdzd6v7',
            project_version_id: 'clz0d6i2i000h08m5hajn057b',
            project_language: 'EN',
            guide_id: 'clz0d7qsh000i08m58mpp9vka',
            session_id: 'clz0d7ufl000j08m583hzej1n',
            end_user_id: 'clz0d7xye000k08m55wos3qra',
            mobile_id: 'clz0d817k000l08m511at4wdx',
            mobile_version_id: 'clz0d84ik000m08m5cr8x1juy'
          },
          ...
        ]
      },
      company_account: {
        total_sessions: 5,
        total_steps: 50,
        total_time: 600,
        total_visitors: 3
      },
      end_user: {
        total_sessions: 2,
        total_steps: 20,
        total_time: 300,
        custom_attributes: [
          {
            id: 'clz0dbz6k000o08m59ouc2ss1',
            created_at: '2024-07-24T21:21:21.389Z',
            updated_at: '2024-07-24T21:21:21.389Z',
            end_user_id: 'clz0dc7ea000q08m54tz14g3u',
            created_by_event_id: 'clz0dcb0f000r08m5awp54t65',
            name: 'attribute name',
            attribute_source: 'OTHER',
            data_type: 'STRING',
            value_string: 'value',
            value_bool: null,
            value_number: null,
            value_json: null,
            value_date_time: null
          },
          ...
        ]
      }
    }
  }
  ```
</Expandable>

<Expandable title="Segment Example Visitor Identify Event">
  ```json theme={null}
  {
    "event": "Visitor Identified",
    "userId": "clzkcqncr000b58dedjgu4bug"
    "properties": {
      "email": "john.doe@acme.com",
      "full_name": "John Doe"
      "company": {
        "account_type": "ACCOUNT",
        "amount_raised": "5000000",
        "city": "San Francisco",
        "clearbit_confidence": "HIGH",
        "country": "United States",
        "created_at": "2024-08-07T21:19:10.011Z",
        "custom_property_values": [],
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula, nisi a commodo efficitur, eros turpis volutpat massa, vitae fermentum felis justo vel purus. Sed sit amet risus id elit bibendum hendrerit in id lacus.",
        "employee_count": 500,
        "engaged": true,
        "estimated_annual_revenue": "75000000",
        "founded_year": 1990,
        "hubspot_account_id": "",
        "id": "clzkcqncr000c58de22xichxv",
        "industry": "Internet Software & Services",
        "industry_group": "Software & Services",
        "linkedin_url": "linkedin.com/company/acme-corporation",
        "name": "acme.com",
        "postal_code": "",
        "salesforce_account_id": "",
        "sector": "Information Technology",
        "state": "California",
        "sub_industry": "Cloud Services",
        "technologies": "",
        "total_sessions": 1,
        "total_steps": 10,
        "total_time": 300,
        "total_visitors": 1,
        "traffic_rank": "very_high",
        "updated_at": "2024-08-07T21:19:10.011Z",
        "website_domain": "acme.com",
        "workspace_id": "clzd3d50a0000d8de3cc32ubs"
      }
  }
  ```
</Expandable>

<Expandable title="Segment Example Company Account Identify Event">
  ```json theme={null}
  {
    "event": "Account Identified",
    "userId": "clzkd1c5i002v58dea2dzc6zo",
    "properties": {
      "account_type": "ACCOUNT",
      "amount_raised": "5000000",
      "city": "San Francisco",
      "clearbit_confidence": "HIGH",
      "country": "United States",
      "created_at": "2024-08-07T21:27:28.711Z",
      "custom_property_values": [],
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula, nisi a commodo efficitur, eros turpis volutpat massa, vitae fermentum felis justo vel purus. Sed sit amet risus id elit bibendum hendrerit in id lacus.",
      "employee_count": 500,
      "engaged": true,
      "estimated_annual_revenue": "75000000",
      "founded_year": 1990,
      "hubspot_account_id": "",
      "id": "clzkd1c5i002w58de8qshfub0",
      "industry": "Internet Software & Services",
      "industry_group": "Software & Services",
      "linkedin_url": "linkedin.com/company/acme-corporation",
      "name": "acme.com",
      "postal_code": "",
      "salesforce_account_id": "",
      "sector": "Information Technology",
      "state": "California",
      "sub_industry": "Cloud Services",
      "technologies": "",
      "total_sessions": 1,
      "total_steps": 10,
      "total_time": 300,
      "total_visitors": 1,
      "traffic_rank": "very_high",
      "updated_at": "2024-08-07T21:27:28.711Z",
      "website_domain": "acme.com",
      "workspace_id": "clzd3d50a0000d8de3cc32ubs"
    }
  }
  ```
</Expandable>