Version Tracking

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:

<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:

Semantic Versioning (Recommended)

<!-- 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

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

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

Calendar Versioning

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

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

Custom Format

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

Use a consistent format across your organization. Semantic versioning (1.2.3) is widely understood and integrates well with CI/CD pipelines.

Automated Version Injection

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

Next.js
Vite
Webpack
Create React App
Plain HTML

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} />
    </>
  )
}

Configure Vite

Define the version in your Vite config:

vite.config.js

import { defineConfig } from 'vite'
import { readFileSync } from 'fs'

const packageJson = JSON.parse(
  readFileSync('./package.json', 'utf-8')
)

export default defineConfig({
  define: {
    '__APP_VERSION__': JSON.stringify(packageJson.version)
  }
})

Use in HTML

index.html

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

Vite replaces __APP_VERSION__ at build time with the actual version from package.json.

Configure Webpack

Use DefinePlugin to inject the version:

webpack.config.js

const webpack = require('webpack')
const packageJson = require('./package.json')

module.exports = {
  // ... other config
  plugins: [
    new webpack.DefinePlugin({
      'process.env.APP_VERSION': JSON.stringify(packageJson.version)
    })
  ]
}

Use in HTML Template

If using html-webpack-plugin:

index.html

<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="YOUR_PROJECT_KEY"
        data-version="<%= process.env.APP_VERSION %>"></script>

Or dynamically:

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', process.env.APP_VERSION)
document.head.appendChild(script)

Using Environment Variables

Create React App exposes environment variables at build time:

.env

REACT_APP_VERSION=$npm_package_version

Or set in package.json scripts:

package.json

{
  "scripts": {
    "build": "REACT_APP_VERSION=$npm_package_version react-scripts build"
  }
}

Use in HTML

public/index.html

<script>
  const script = document.createElement('script')
  script.src = 'https://seggwat.com/static/widgets/v1/seggwat-feedback.js'
  script.defer = true
  script.setAttribute('data-project-key', '%REACT_APP_SEGGWAT_PROJECT_KEY%')
  script.setAttribute('data-version', '%REACT_APP_VERSION%')
  document.head.appendChild(script)
</script>

CRA replaces %REACT_APP_*% placeholders only in HTML files, not in JavaScript. For JS-based injection, use process.env.REACT_APP_VERSION.

Using Build Scripts

For static sites, use a build script to inject the version:

build.js

const fs = require('fs')
const packageJson = require('./package.json')

// Read template
let html = fs.readFileSync('./index.html', 'utf-8')

// Replace placeholder
html = html.replace('__VERSION__', packageJson.version)

// Write output
fs.writeFileSync('./dist/index.html', html)

HTML Template

index.html

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

Package Script

package.json

{
  "scripts": {
    "build": "node build.js"
  }
}

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

Combine git tags with semantic versioning for production releases, and use commit hashes for development/staging deployments.

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:

Feedback list - Each feedback entry shows the version badge
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:

// 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:

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:

// 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

Version not appearing in dashboard

Check these issues:

Ensure data-version attribute is set on the script tag
Verify the version string is not empty or undefined
Check browser DevTools Network tab to confirm version is sent in the API request
Clear browser cache and test with a fresh feedback submission

Debug:

// Check if version is set correctly
const script = document.querySelector('[data-project-key]')
console.log('Version:', script.getAttribute('data-version'))

Build replacement not working

Common causes:

Placeholder string doesn’t match (check case sensitivity)
Build script runs before HTML is generated
Cache preventing new build from deploying

Solution:

# Verify placeholder exists
grep "__VERSION__" index.html

# Test replacement manually
sed -i 's/__VERSION__/1.2.3/g' index.html
grep "1.2.3" index.html

Version shows 'undefined' or placeholder

This means your build process isn’t replacing the placeholder:For Webpack/Vite:

Check that DefinePlugin is configured correctly
Verify environment variables are accessible at build time
Ensure you’re using the built files, not source files

For CI/CD:

Verify sed or replacement command ran successfully
Check file paths are correct (relative vs absolute)
Confirm the file is modified before deployment

Getting git commit hash in CI/CD

GitHub Actions:

- run: echo "VERSION=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
- run: sed -i "s/__VERSION__/$VERSION/g" index.html

GitLab CI:

- export VERSION=$(git rev-parse --short $CI_COMMIT_SHA)

Jenkins:

def version = sh(returnStdout: true, script: 'git rev-parse --short HEAD').trim()

React environment variable not working

Create React App:

Environment variables must start with REACT_APP_
Use %REACT_APP_VAR% in HTML, process.env.REACT_APP_VAR in JS
Restart dev server after changing .env files

Next.js:

Client-side variables must start with NEXT_PUBLIC_
Server-side variables don’t need prefix
Import package.json directly for version number

Vite:

Environment variables must start with VITE_
Use import.meta.env.VITE_VAR in JS
Define custom variables in vite.config.js

Advanced Usage

Dynamic Version Updates

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

// 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:

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

React Integration

Version tracking in React applications

API Reference

View the feedback submission API endpoint

Need help setting up version tracking? Contact us at [email protected]. We can help integrate version tracking with your specific deployment pipeline.

General

Widgets

Features

​Overview

​Quick Start

​Version Format

​Semantic Versioning (Recommended)

​Git Commit Hash

​Calendar Versioning

​Custom Format

​Automated Version Injection

​App Router (Next.js 13+)

​Pages Router

​Configure Vite

​Use in HTML

​Configure Webpack

​Use in HTML Template

​Using Environment Variables

​Use in HTML

​Using Build Scripts

​HTML Template

​Package Script

​CI/CD Integration

​Using Git Commit Hash

​Using Package Version + Build Number

​Using Git Tags

​Dashboard Integration

​Viewing Feedback by Version

​Filtering by Version

​Analytics

​Common Patterns

​Multiple Environments

​Canary Deployments

​Feature Flags + Versions

​Mobile App Versions

​Best Practices

Automate version injection

Use consistent format

Include build metadata

Different keys per environment

Document version scheme

Monitor version distribution

​Troubleshooting

​Advanced Usage

​Dynamic Version Updates

​Version from Server

​Version Matrix Testing

​Next Steps

Widget Installation

Customization

React Integration

API Reference

Overview

Quick Start

Version Format

Semantic Versioning (Recommended)

Git Commit Hash

Calendar Versioning

Custom Format

Automated Version Injection

App Router (Next.js 13+)

Pages Router

Configure Vite

Use in HTML

Configure Webpack

Use in HTML Template

Using Environment Variables

Use in HTML

Using Build Scripts

HTML Template

Package Script

CI/CD Integration

Using Git Commit Hash

Using Package Version + Build Number

Using Git Tags

Dashboard Integration

Viewing Feedback by Version

Filtering by Version

Analytics

Common Patterns

Multiple Environments

Canary Deployments

Feature Flags + Versions

Mobile App Versions

Best Practices

Troubleshooting

Advanced Usage

Dynamic Version Updates

Version from Server

Version Matrix Testing

Next Steps