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

# Glue Attributes Reference

> Complete reference guide for all DataGlue attributes, their purposes, storage mechanisms, and usage patterns.

This comprehensive reference covers all attributes captured and managed by DataGlue, including their storage locations, purposes, and practical usage examples.

## Attribute Overview

DataGlue captures and manages visitor attributes using a consistent `glue_` prefix for easy identification. All attributes are stored across multiple storage mechanisms for redundancy and accessibility.

```mermaid theme={null}
graph TB
    subgraph "Data Sources"
        URL[URL Parameters]
        COOK[Browser Cookies]
        TT[TikTok SessionStorage]
        FB[Facebook Cookies]
        GEO[Geolocation API]
        UA[User Agent]
    end

    subgraph "DataGlue Core"
        INIT[Initialization]
        ATTR[Attribution Module]
        STOR[Storage Module]
        FORM[Form Integration]
        DYN[Dynamic Content]
    end

    subgraph "Storage Mechanisms"
        LS[localStorage]
        SS[sessionStorage]
        CK[Cookies]
    end

    URL --> INIT
    COOK --> ATTR
    TT --> ATTR
    FB --> ATTR
    GEO --> ATTR
    UA --> ATTR

    INIT --> ATTR
    ATTR --> STOR
    STOR --> LS
    STOR --> SS
    STOR --> CK
```

### Storage Strategy

<Tabs>
  <Tab title="localStorage">
    **Persistent storage** - Survives browser restarts

    * User identification data
    * Attribution history
    * First-visit information
    * Geolocation data
  </Tab>

  <Tab title="sessionStorage">
    **Session-only storage** - Cleared when tab closes

    * Current session data
    * URL tracking
    * Browser information
    * Temporary values
  </Tab>

  <Tab title="Cookies">
    **Cross-tab persistent** - Available to server-side code

    * User ID with expiration
    * Attribution data with TTL
    * Third-party integration data
  </Tab>
</Tabs>

## User Identification Attributes

### `glue_user_id`

<ParamField path="glue_user_id" type="string" required>
  Unique identifier for each visitor using UUID v7 format
</ParamField>

**Storage**: localStorage, cookies (365 days)
**Auto-generated**: Yes, on first visit
**Example**: `01234567-89ab-cdef-0123-456789abcdef`

```javascript theme={null}
// Access user ID
const userId = window.glue.storage.get('glue_user_id');
console.log('Visitor ID:', userId);
```

### `glue_user_firstseen`

<ParamField path="glue_user_firstseen" type="string" required>
  ISO timestamp recording when the user first visited the site
</ParamField>

**Storage**: localStorage
**Auto-generated**: Yes, on first visit only
**Example**: `2024-01-15T10:30:00.000Z`

### `glue_session_start`

<ParamField path="glue_session_start" type="string" required>
  ISO timestamp recording when the current session started
</ParamField>

**Storage**: sessionStorage
**Auto-generated**: Yes, updates on each page load
**Example**: `2024-01-15T14:20:00.000Z`

## Attribution Tracking Attributes

DataGlue captures both initial and last-touch attribution for comprehensive tracking.

<Info>
  **First vs Last Touch**: DataGlue preserves both the first touchpoint (how they originally found you) and the last touchpoint (what brought them back) for accurate attribution.
</Info>

### UTM Parameters

<Tabs>
  <Tab title="UTM Source">
    #### `glue_initial_utm_source` / `glue_last_utm_source`

    <ParamField path="utm_source" type="string">
      Tracks traffic source (google, facebook, newsletter, etc.)
    </ParamField>

    **Storage**: localStorage, cookies (365 days)
    **Examples**: `google`, `facebook`, `newsletter`, `linkedin`

    ```html theme={null}
    <!-- Form integration -->
    <input type="hidden" glue="glue_initial_utm_source" name="first_touch_source" />
    <input type="hidden" glue="glue_last_utm_source" name="last_touch_source" />
    ```
  </Tab>

  <Tab title="UTM Medium">
    #### `glue_initial_utm_medium` / `glue_last_utm_medium`

    <ParamField path="utm_medium" type="string">
      Tracks marketing medium (cpc, email, social, etc.)
    </ParamField>

    **Storage**: localStorage, cookies (365 days)
    **Examples**: `cpc`, `email`, `social`, `organic`
  </Tab>

  <Tab title="UTM Campaign">
    #### `glue_initial_utm_campaign` / `glue_last_utm_campaign`

    <ParamField path="utm_campaign" type="string">
      Tracks campaign name
    </ParamField>

    **Storage**: localStorage, cookies (365 days)
    **Examples**: `summer_sale`, `product_launch`, `retargeting_q1`
  </Tab>

  <Tab title="UTM Term">
    #### `glue_initial_utm_term` / `glue_last_utm_term`

    <ParamField path="utm_term" type="string">
      Tracks search keywords or ad targeting
    </ParamField>

    **Storage**: localStorage, cookies (365 days)
    **Examples**: `data analytics`, `tracking software`, `crm integration`
  </Tab>

  <Tab title="UTM Content">
    #### `glue_initial_utm_content` / `glue_last_utm_content`

    <ParamField path="utm_content" type="string">
      Tracks content variation or A/B test version
    </ParamField>

    **Storage**: localStorage, cookies (365 days)
    **Examples**: `header_cta`, `sidebar_ad`, `banner_v2`
  </Tab>

  <Tab title="UTM ID">
    #### `glue_initial_utm_id` / `glue_last_utm_id`

    <ParamField path="utm_id" type="string">
      Unique campaign identifier for advanced tracking
    </ParamField>

    **Storage**: localStorage, cookies (365 days)
    **Examples**: `camp_12345`, `promo_summer_2024`
  </Tab>
</Tabs>

### Platform-Specific Attribution

#### Facebook Click ID

<ParamField path="glue_initial_fbclid" type="string">
  Facebook click identifier for ad attribution
</ParamField>

**Storage**: localStorage, cookies (365 days)
**Example**: `IwAR0Kg4h2k3j5l6m7n8o9p0q1r2s3t4u5v6w7x8y9z`

#### Google Click ID

<ParamField path="glue_initial_gclid" type="string">
  Google Ads click identifier for conversion tracking
</ParamField>

**Storage**: localStorage, cookies (365 days)
**Example**: `CjwKCAjw_b-WBhAb123Example`

#### TikTok Tracking ID

<ParamField path="glue_initial_ttid" type="string">
  TikTok tracking identifier for ad attribution
</ParamField>

**Storage**: localStorage, cookies (365 days)
**Example**: `tt_abc123def456`

## Session Tracking Attributes

### URL Tracking

<Tabs>
  <Tab title="Current URL">
    #### `glue_url_current`

    <ParamField path="glue_url_current" type="string">
      Current page URL
    </ParamField>

    **Storage**: sessionStorage
    **Auto-generated**: Yes, updates on each page load
    **Example**: `https://example.com/product/details`
  </Tab>

  <Tab title="Previous URL">
    #### `glue_url_last`

    <ParamField path="glue_url_last" type="string">
      Previous page URL (referrer)
    </ParamField>

    **Storage**: sessionStorage
    **Auto-generated**: Yes, if referrer exists
    **Example**: `https://google.com/search?q=example`
  </Tab>

  <Tab title="Landing Page">
    #### `glue_url_first`

    <ParamField path="glue_url_first" type="string">
      First landing page URL on the domain
    </ParamField>

    **Storage**: localStorage
    **Auto-generated**: Yes, stored only once
    **Example**: `https://example.com/landing-page`
  </Tab>

  <Tab title="Referrer Domain">
    #### `glue_user_referrer`

    <ParamField path="glue_user_referrer" type="string">
      Domain of the referring site
    </ParamField>

    **Storage**: localStorage
    **Auto-generated**: Yes, if referrer exists and not set
    **Example**: `google.com`, `facebook.com`, `linkedin.com`
  </Tab>
</Tabs>

### Browser Information

#### `glue_user_browser`

<ParamField path="glue_user_browser" type="object">
  Browser detection results in JSON format
</ParamField>

**Storage**: sessionStorage
**Auto-generated**: Yes
**Example**:

```json theme={null}
{
  "browser": "Chrome",
  "version": "120",
  "os": "macOS",
  "device": "desktop"
}
```

## Form Data Attributes

### Personal Information

<Tabs>
  <Tab title="First Name">
    #### `glue_fname`

    <ParamField path="glue_fname" type="string">
      First name from forms or URL parameters
    </ParamField>

    **Storage**: localStorage, sessionStorage, cookies (30 days)
    **Sources**: URL params (`?fname=John`), form inputs, manual API calls

    ```html theme={null}
    <input type="text" glue="glue_fname" placeholder="First Name" />
    ```
  </Tab>

  <Tab title="Last Name">
    #### `glue_lname`

    <ParamField path="glue_lname" type="string">
      Last name from forms or URL parameters
    </ParamField>

    **Storage**: localStorage, sessionStorage, cookies (30 days)
    **Sources**: URL params (`?lname=Doe`), form inputs, manual API calls
  </Tab>

  <Tab title="Email">
    #### `glue_email`

    <ParamField path="glue_email" type="string">
      Email address from forms or URL parameters
    </ParamField>

    **Storage**: localStorage, sessionStorage, cookies (30 days)
    **Sources**: URL params (`?email=john@example.com`), form inputs, manual API calls

    ```html theme={null}
    <input type="email" glue="email" placeholder="Email Address" />
    <!-- Note: Can use 'email' or 'glue_email' as glue attribute -->
    ```
  </Tab>

  <Tab title="Mobile">
    #### `glue_mobile`

    <ParamField path="glue_mobile" type="string">
      Phone number from forms or URL parameters
    </ParamField>

    **Storage**: localStorage, sessionStorage, cookies (30 days)
    **Sources**: URL params (`?mobile=+1234567890`), form inputs, manual API calls

    ```html theme={null}
    <input type="tel" glue="mobile" placeholder="Phone Number" />
    ```
  </Tab>
</Tabs>

### Special Parameters

#### Calendly Integration

<ParamField path="calendly" type="string">
  Calendly meeting or scheduling parameter
</ParamField>

**Storage**: localStorage, sessionStorage, cookies (30 days)
**Example**: `scheduled`, `completed`, `cancelled`

```html theme={null}
<!-- Automatically captured from URL -->
<!-- example.com/?calendly=scheduled -->
```

## Third-Party Integration Attributes

### TikTok Attribution

DataGlue automatically captures TikTok attribution data from sessionStorage:

<Tabs>
  <Tab title="App Info">
    #### `glue_tt_appInfo`

    <ParamField path="glue_tt_appInfo" type="string">
      TikTok application information
    </ParamField>

    **Source**: TikTok sessionStorage (`tt_appInfo`)
    **Storage**: localStorage, sessionStorage, cookies (30 days)
  </Tab>

  <Tab title="Session Index">
    #### `glue_tt_pixel_session_index`

    <ParamField path="glue_tt_pixel_session_index" type="string">
      TikTok pixel session tracking index
    </ParamField>

    **Source**: TikTok sessionStorage (`tt_pixel_session_index`)
    **Storage**: localStorage, sessionStorage, cookies (30 days)
  </Tab>

  <Tab title="Session ID">
    #### `glue_tt_sessionId`

    <ParamField path="glue_tt_sessionId" type="string">
      TikTok session identifier
    </ParamField>

    **Source**: TikTok sessionStorage (`tt_sessionId`)
    **Storage**: localStorage, sessionStorage, cookies (30 days)
  </Tab>
</Tabs>

### Facebook Attribution

DataGlue automatically captures Facebook attribution data from cookies:

<Tabs>
  <Tab title="Browser Pixel">
    #### `glue_fb_fbp`

    <ParamField path="glue_fb_fbp" type="string">
      Facebook browser pixel identifier
    </ParamField>

    **Source**: Facebook cookie (`_fbp`)
    **Storage**: localStorage, sessionStorage, cookies (30 days)
    **Example**: `fb.1.1640995200000.1234567890`
  </Tab>

  <Tab title="Click ID">
    #### `glue_fb_fbc`

    <ParamField path="glue_fb_fbc" type="string">
      Facebook click identifier
    </ParamField>

    **Source**: Facebook cookie (`_fbc`)
    **Storage**: localStorage, sessionStorage, cookies (30 days)
    **Example**: `fb.1.1640995200000.AbCdEf123456`
  </Tab>
</Tabs>

## Geolocation Attributes

### `glue_user_geolocation`

<ParamField path="glue_user_geolocation" type="string">
  IP-based geolocation data in formatted string
</ParamField>

**Storage**: localStorage
**Source**: geojs.io API (asynchronous)
**Format**: `{country_code} | {country} | {city} | {latitude}, {longitude}`
**Example**: `US | United States | New York | 40.7128, -74.0060`

<Warning>
  Geolocation data is fetched asynchronously and may not be immediately available on the first page load.
</Warning>

```javascript theme={null}
// Check if geolocation data is available
const geoData = window.glue.storage.get('glue_user_geolocation');
if (geoData) {
    const [countryCode, country, city, coords] = geoData.split(' | ');
    console.log('User location:', { countryCode, country, city, coords });
}
```

## Element Selectors & Form Integration

DataGlue uses sophisticated selector patterns to find and populate elements:

### Selector Patterns

<Tabs>
  <Tab title="Direct Glue Prefix">
    ```html theme={null}
    <!-- Direct glue_ prefix in ID -->
    <input id="glue_email" />
    <input id="glue_fname" />
    <input id="glue_user_id" />
    ```
  </Tab>

  <Tab title="Contains Pattern">
    ```html theme={null}
    <!-- Contains _glue_ pattern -->
    <input id="contact_glue_email" />
    <input class="_glue_fname" />
    <input name="billing_glue_phone" />
    ```
  </Tab>

  <Tab title="Field Pattern">
    ```html theme={null}
    <!-- Field pattern -->
    <div class="field_email">Content</div>
    <div class="field_glue_fname">
        <input /> <!-- Will be populated -->
    </div>
    ```
  </Tab>

  <Tab title="Glue Attribute">
    ```html theme={null}
    <!-- Direct glue attribute -->
    <input glue="email" />
    <input glue="glue_fname" />
    <div glue="utm_source">Content</div>
    ```
  </Tab>

  <Tab title="Data Attribute">
    ```html theme={null}
    <!-- Data field reference -->
    <div data-field-reference="email">
        <input /> <!-- Will be populated -->
    </div>
    ```
  </Tab>
</Tabs>

### Fillout Form Integration

For Fillout forms, DataGlue automatically adds data attributes:

```html theme={null}
<!-- Before DataGlue -->
<div data-fillout-id="abc123"></div>

<!-- After DataGlue processing -->
<div data-fillout-id="abc123"
     data-glue_user_id="01234567-89ab-cdef-0123-456789abcdef"
     data-glue_email="john@example.com"
     data-glue_fname="John"
     data-glue_initial_utm_source="linkedin"
     data-glue_last_utm_campaign="summer_sale"
     data-custom_param="newsletter_signup"
     data-utm_medium="cpc">
</div>
```

#### Valid Prefixes for Fillout

<Tabs>
  <Tab title="Glue Attributes">
    All attributes starting with `glue_` are automatically added:

    * `data-glue_user_id`
    * `data-glue_email`
    * `data-glue_fname`
    * etc.
  </Tab>

  <Tab title="UTM Parameters">
    All UTM parameters are added with `data-utm_` prefix:

    * `data-utm_source`
    * `data-utm_campaign`
    * `data-utm_medium`
    * etc.
  </Tab>

  <Tab title="Query Parameters">
    All URL query parameters are added as data attributes:

    * `?custom_param=value` → `data-custom_param="value"`
    * `?lead_source=webinar` → `data-lead_source="webinar"`
  </Tab>
</Tabs>

## API Usage Examples

### Reading Attributes

<CodeGroup>
  ```javascript Basic Access theme={null}
  // Get specific attribute
  const userEmail = window.glue.storage.get('glue_email');
  const utmSource = window.glue.storage.get('glue_initial_utm_source');

  // Check if attribute exists
  if (userEmail) {
      console.log('User email:', userEmail);
  }
  ```

  ```javascript Visitor Context theme={null}
  // Get complete visitor context
  const context = window.glue.getVisitorContext();
  console.log('Complete context:', context);

  // Get attribution data only
  const attribution = window.glue.getAttribution();
  console.log('Attribution:', attribution);
  ```

  ```javascript Multiple Attributes theme={null}
  // Get all glue attributes
  const allGlueData = Object.keys(localStorage)
      .filter(key => key.startsWith('glue_'))
      .reduce((acc, key) => {
          acc[key] = localStorage.getItem(key);
          return acc;
      }, {});

  console.log('All DataGlue attributes:', allGlueData);
  ```
</CodeGroup>

### Setting Attributes

<CodeGroup>
  ```javascript Basic Setting theme={null}
  // Set with localStorage only
  window.glue.storage.set('glue_custom_attr', 'value');

  // Set with cookie expiration (30 days)
  window.glue.storage.set('glue_user_tier', 'premium', 30);
  ```

  ```javascript Attribution Override theme={null}
  // Manual attribution setting
  window.glue.setAttribution({
      utm_source: 'manual_override',
      utm_campaign: 'special_promotion'
  });
  ```

  ```javascript Bulk Setting theme={null}
  // Set multiple attributes
  const userData = {
      'glue_company': 'Acme Corp',
      'glue_title': 'Marketing Manager',
      'glue_industry': 'Technology'
  };

  Object.entries(userData).forEach(([key, value]) => {
      window.glue.storage.set(key, value, 30);
  });
  ```
</CodeGroup>

### Clearing Attributes

<CodeGroup>
  ```javascript Single Attribute theme={null}
  // Clear specific attribute
  window.glue.storage.remove('glue_custom_attr');
  ```

  ```javascript All Attributes theme={null}
  // Clear all DataGlue storage
  window.glue.storage.clear();
  ```

  ```javascript Selective Clearing theme={null}
  // Clear only UTM data
  Object.keys(localStorage)
      .filter(key => key.includes('utm_'))
      .forEach(key => localStorage.removeItem(key));
  ```
</CodeGroup>

## Browser Compatibility

<Tabs>
  <Tab title="Storage APIs">
    | Feature        | Chrome | Firefox | Safari | Edge | IE11 |
    | -------------- | ------ | ------- | ------ | ---- | ---- |
    | localStorage   | ✅      | ✅       | ✅      | ✅    | ✅    |
    | sessionStorage | ✅      | ✅       | ✅      | ✅    | ✅    |
    | Cookies        | ✅      | ✅       | ✅      | ✅    | ✅    |
  </Tab>

  <Tab title="Modern APIs">
    | Feature          | Chrome | Firefox | Safari | Edge | IE11 |
    | ---------------- | ------ | ------- | ------ | ---- | ---- |
    | URL SearchParams | ✅      | ✅       | ✅      | ✅    | ❌\*  |
    | UUID v7          | ✅      | ✅       | ✅      | ✅    | ❌\*  |
    | Geolocation API  | ✅      | ✅       | ✅      | ✅    | ✅    |
    | CSS.escape()     | ✅      | ✅       | ✅      | ✅    | ❌\*  |

    \*Requires polyfill for IE11 support
  </Tab>
</Tabs>

## Best Practices

<Tip>
  **Naming Convention**: Use descriptive names for custom attributes and maintain the `glue_` prefix for consistency.
</Tip>

<Warning>
  **Data Privacy**: Ensure compliance with privacy regulations when collecting personal information. DataGlue respects `doNotTrack` browser settings.
</Warning>

### Recommended Patterns

1. **Consistent Prefixing**: Always use `glue_` prefix for custom attributes
2. **Descriptive Names**: Use clear, meaningful names like `glue_lead_source` instead of `glue_ls`
3. **Appropriate Expiration**: Set reasonable cookie expiration times based on data sensitivity
4. **Graceful Fallbacks**: Always check if data exists before using it

### Security Considerations

* DataGlue automatically sanitizes stored values to prevent XSS
* No sensitive data is stored without explicit configuration
* All data is stored client-side unless explicitly sent to servers
* Uses CSS.escape() to safely handle special characters in selectors