PAM Attention Tracking System

Overview

The PAM Attention Tracking System is designed to display attention items (popups, notifications, etc.) based on various user interaction conditions. The system uses IndexedDB for persistent storage and tracking of user interactions.

Tracking Conditions

1. Revisit Count

{
  type: "revisit_count",
  revisit_count: number,      // Number of visits required before showing
  max_display_count: number,  // Maximum times the item can be shown
  display_again_in_hours: number  // Hours to wait before showing again
}

• Tracks number of times a user visits a specific URL
• Shows attention item after specified number of visits
• Respects max display count and display again hours
• Example: Show after 3 visits, max 10 times, wait 24 hours between shows

2. Page Scrolling

{
  type: "page_scrolling" | "scroll",
  percent: number,           // Scroll percentage to trigger (0-100)
  max_display_count: number,
  display_again_in_hours: number
}

• Triggers when user scrolls to specified percentage of page
• Only triggers once per page load
• Example: Show at 50% scroll, max 10 times, wait 24 hours between shows

3. Page Inactivity

{
  type: "page_inactive",
  inactive_duration_seconds: number,  // Seconds of inactivity required
  max_display_count: number,
  display_again_in_hours: number
}

• Monitors user activity (mouse, keyboard, touch)
• Shows after specified seconds of inactivity
• Resets timer on any user interaction
• Example: Show after 5 seconds of inactivity, max 10 times, wait 24 hours

4. Element Click

{
  type: "element_click",
  css_selector: string,      // CSS selector for target element
  max_display_count: number,
  display_again_in_hours: number
}

• Triggers when user clicks specified element
• Supports direct and nested element clicks
• Example: Show when user clicks ".signup-button", max 10 times, wait 24 hours

5. Exit Intent

{
  type: "exit_intent",
  max_display_count: number,
  display_again_in_hours: number
}

• Detects when user moves mouse towards browser edges
• Triggers before user leaves the page
• Example: Show when user moves to exit, max 10 times, wait 24 hours

6. Time Spent

{
  type: "time_spend",
  second: number,            // Seconds to wait before showing
  max_display_count: number,
  display_again_in_hours: number
}

• Shows after specified time on page
• Example: Show after 30 seconds, max 10 times, wait 24 hours

7. Combined Conditions

Click and Inactivity

{
  type: "element_click_and_page_inactive",
  css_selector: string,
  inactive_duration_seconds: number,
  max_display_count: number,
  display_again_in_hours: number
}

• Requires both element click AND inactivity
• Example: Show after clicking ".product" AND 5 seconds of inactivity

Click and Exit Intent

{
  type: "element_click_and_exit_intent",
  css_selector: string,
  max_display_count: number,
  display_again_in_hours: number
}

• Requires both element click AND exit intent
• Example: Show after clicking ".cart" AND moving to exit

Storage and Tracking

IndexedDB Structure

• Database Name: pam_attention_db
• Store Name: attention_records
• Key Structure: [attention_id, contact_id, url]

Visit Tracking

• Each visit is stored with a unique UUID
• Format: visit_${contactId}_${url}_${uuidv4()}
• Tracks:
  • Visit count per URL
  • Last visit timestamp
  • Contact ID
  • URL

Display Tracking

• Tracks:
  • Number of times shown
  • Last display time
  • Display conditions met
  • Contact ID
  • URL

Usage Example

const attentionItem = {
  id: "welcome_popup",
  options: {
    type: AttentionType.POPUP,
    display_after: {
      type: "revisit_count",
      revisit_count: 3,
      max_display_count: 10,
      display_again_in_hours: 24
    }
  }
};

Debugging

The system provides detailed logging for:

• Visit counts
• Display conditions
• Trigger events
• Storage operations

Check browser console for:

• Visit tracking logs
• Display condition checks
• Event trigger logs
• Storage operation logs

For a plain Javascript alternative, check out js-library-boilerplate-basic.

⭐️ Features

• Webpack 5
• Babel 7
• Hot reloading (npm start)
• Automatic Types file generation (index.d.ts)
• UMD exports, so your library works everywhere.
• Jest unit testing
• Customizable file headers for your build (Example 1) (Example2)
• Daily dependabot dependency updates

📦 Getting Started

git clone https://github.com/hodgef/ts-library-boilerplate-basic.git myLibrary
npm install

💎 Customization

Before shipping, make sure to:

1. Edit LICENSE file
2. Edit package.json information (These will be used to generate the headers for your built files)
3. Edit library: "MyLibrary" with your library's export name in ./webpack.config.js

🚀 Deployment

1. npm publish
2. Your users can include your library as usual

npm

import MyLibrary from 'my-library';
const libraryInstance = new MyLibrary();
...

self-host/cdn

<script src="build/index.js"></script>

const MyLibrary = window.MyLibrary.default;
const libraryInstance = new MyLibrary();
...

✅ Libraries built with this boilerplate

Made a library using this starter kit? Share it here by submitting a pull request!

• simple-keyboard - Javascript Virtual Keyboard
• react-simple-keyboard - React Virtual Keyboard
• simple-keyboard-layouts - Keyboard layouts for simple-keyboard
• atlas-monaco - AtlasHCL for monaco editor