SeggWat LogoSeggWat
Dashboard

Version Tracking

Track user feedback against specific application releases to identify version-specific bugs and correlate issues with deployments

Overview

Version tracking helps you correlate user feedback with specific application releases. By tagging feedback with version information, you can:

  • Identify version-specific bugs - See which versions are generating the most issues
  • Track regression patterns - Detect when new releases introduce problems
  • Prioritize fixes - Focus on versions with the most user impact
  • Correlate with deployments - Connect feedback trends with release history
  • Monitor feature adoption - Track user response to new features across versions

The version is displayed in your dashboard alongside each feedback entry, making it easy to filter and analyze feedback by release.

Quick Start

Add the data-version attribute to your feedback widget script tag:

html
<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"
        data-version="1.2.3"></script>

That's it! All feedback submitted will now include the version 1.2.3.

Version Format

The data-version parameter accepts any string value, giving you flexibility in how you track versions:

html
<!-- Release version -->
<script data-version="1.2.3"></script>

<!-- Pre-release version -->
<script data-version="2.0.0-beta.1"></script>

<!-- Version with prefix -->
<script data-version="v1.2.3"></script>

Git Commit Hash

html
<!-- Full commit hash -->
<script data-version="a3f5b2c"></script>

<!-- Commit with date -->
<script data-version="a3f5b2c-20251118"></script>

Calendar Versioning

html
<!-- Year.Month.Day format -->
<script data-version="2025.11.18"></script>

<!-- Year.Month format -->
<script data-version="2025.11"></script>

Custom Format

html
<!-- Any format that works for your team -->
<script data-version="sprint-42"></script>
<script data-version="release-2025Q4"></script>

Automated Version Injection

Manual version updates are error-prone. Automate version injection during your build process to ensure accuracy.

App Router (Next.js 13+)

Import version directly from `package.json`:
app/layout.tsx
import Script from 'next/script'
    import packageJson from '../package.json'

    export default function RootLayout({ children }) {
      return (
        <html lang="en">
          <head>
            <Script
              src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
              data-project-key={process.env.NEXT_PUBLIC_SEGGWAT_PROJECT_KEY}
              data-version={packageJson.version}
              strategy="lazyOnload"
            />
          </head>
          <body>{children}</body>
        </html>
      )
    }

Pages Router

pages/_app.tsx
import Script from 'next/script'
    import packageJson from '../package.json'

    export default function App({ Component, pageProps }) {
      return (
        <>
          <Script
            src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
            data-project-key={process.env.NEXT_PUBLIC_SEGGWAT_PROJECT_KEY}
            data-version={packageJson.version}
            strategy="lazyOnload"
          />
          <Component {...pageProps} />
        </>
      )
    }

CI/CD Integration

Inject version information during your deployment pipeline for maximum accuracy.

Using Git Commit Hash

name: Deploy
on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Inject version
        run: |
          SHORT_SHA=$(git rev-parse --short HEAD)
          BUILD_DATE=$(date +%Y%m%d)
          VERSION="${SHORT_SHA}-${BUILD_DATE}"

          # Replace placeholder in HTML
          sed -i "s/__VERSION__/${VERSION}/g" index.html

      - name: Build and deploy
        run: npm run build && npm run deploy

Using Package Version + Build Number

GitHub Actions
- name: Set version with build number
  run: |
    PACKAGE_VERSION=$(node -p "require('./package.json').version")
    VERSION="${PACKAGE_VERSION}+build.${{ github.run_number }}"
    sed -i "s/__VERSION__/${VERSION}/g" index.html

Output: 1.2.3+build.142

Using Git Tags

GitHub Actions
on:
  push:
    tags:
      - 'v*'

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Extract version from tag
        run: |
          VERSION=${GITHUB_REF#refs/tags/}
          sed -i "s/__VERSION__/${VERSION}/g" index.html

      - name: Build and deploy
        run: npm run build && npm run deploy

Dashboard Integration

Once version tracking is configured, you can leverage it in your SeggWat dashboard:

Viewing Feedback by Version

The version appears in two places:

  1. Feedback list - Each feedback entry shows the version badge
  2. Feedback detail - Full version information in the detail view

Filtering by Version

Use the version filter to:

  • See all feedback for a specific release
  • Compare feedback volume across versions
  • Identify problematic releases quickly

Analytics

Version tracking enables powerful analytics:

  • Version distribution - Which versions users are running
  • Regression detection - Spike in feedback after a release
  • Feature adoption - Response to new features by version
  • Support prioritization - Focus on versions with most users

Common Patterns

Multiple Environments

Track different versions for different environments:

<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="PRODUCTION_PROJECT_KEY"
        data-version="1.2.3"></script>

Canary Deployments

Track which version users are experiencing during canary releases:

javascript
// Determine if user is in canary group
const isCanary = Math.random() < 0.1 // 10% canary

const version = isCanary ? '2.0.0-canary' : '1.9.5'

const script = document.createElement('script')
script.src = 'https://seggwat.com/static/widgets/v1/seggwat-feedback.js'
script.setAttribute('data-project-key', 'YOUR_PROJECT_KEY')
script.setAttribute('data-version', version)
document.head.appendChild(script)

Feature Flags + Versions

Combine version tracking with feature flag metadata:

javascript
const version = '1.2.3'
const enabledFeatures = ['new-dashboard', 'dark-mode']

const versionString = `${version}+features:${enabledFeatures.join(',')}`

// Result: "1.2.3+features:new-dashboard,dark-mode"

Mobile App Versions

For hybrid apps (web view in native app), track both app and web versions:

javascript
// Get native app version from bridge
const nativeVersion = window.NativeApp?.getVersion() || 'unknown'
const webVersion = '1.2.3'

const version = `app:${nativeVersion}-web:${webVersion}`

// Result: "app:2.1.0-web:1.2.3"

Best Practices

Automate version injection

Never manually update version strings. Use build tools or CI/CD to inject versions automatically from package.json or git.

Use consistent format

Stick to one version format across your organization. Semantic versioning is recommended for clarity and tool compatibility.

Include build metadata

For non-production environments, include commit hash or build number to precisely identify the deployed code.

Different keys per environment

Use separate project keys for dev, staging, and production. This keeps feedback organized and prevents cross-contamination.

Document version scheme

Document your versioning scheme in your team wiki so everyone understands what versions represent.

Monitor version distribution

Regularly check which versions users are running. Old versions may indicate deployment issues or users not updating.

Troubleshooting

Advanced Usage

Dynamic Version Updates

Update version after initial load (useful for SPAs with client-side routing):

javascript
// After deploying a new version via service worker
navigator.serviceWorker.addEventListener('controllerchange', () => {
  // Fetch new version from API or manifest
  fetch('/version.json')
    .then(res => res.json())
    .then(data => {
      // Update feedback widget version
      const script = document.querySelector('[data-project-key]')
      script.setAttribute('data-version', data.version)
    })
})

Version from Server

For server-rendered apps, inject version server-side:

Express.js
app.get('*', (req, res) => {
  const html = `
    <!DOCTYPE html>
    <html>
      <head>
        <script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
                data-project-key="${process.env.SEGGWAT_KEY}"
                data-version="${process.env.APP_VERSION}"></script>
      </head>
      <body>...</body>
    </html>
  `
  res.send(html)
})

Version Matrix Testing

Track feedback across multiple version combinations:

javascript
const appVersion = '1.2.3'
const apiVersion = '2.1.0'
const browserVersion = navigator.userAgent.match(/Chrome\/(\d+)/)?.[1] || 'unknown'

const versionString = `app:${appVersion},api:${apiVersion},browser:Chrome${browserVersion}`

// Result: "app:1.2.3,api:2.1.0,browser:Chrome120"

Next Steps

Widget Installation

Learn how to install the feedback widget

Customization

Customize colors, positioning, and behavior

Example projects

Complete examples for React, Vue, Next.js, Astro, and static HTML

API Reference

View the feedback submission API endpoint

Navigation