Documentation/Demos/Components

Interactive Component Demos

Explore the AI-powered components that make up the TagAssistant.ai experience. Click on any component to see how it works with real data.

Hi, I'm Tessa! 👋

Your Tag Service Assistant

These are the actual components you'll see when using TagAssistant.ai! Each one is powered by AI to give you smart, personalized recommendations. Click 'Show Annotations' to learn what each part does.

Quick Tips

  • •All data shown here is demo data - try scanning your own site to see real results
  • •Click 'Show Component Data' to see the JSON structure
  • •These same components appear in your scan timeline

Scan Results Card

The main results card that appears after scanning a website. Shows detected tracking scripts, website classification, and AI recommendations.

Website Scan Complete

example-store.com

3
Scripts Found

Scan Results Summary

Comprehensive scan detected Google Analytics 4, GTM, and Facebook Pixel. E-commerce tracking is partially configured with product views and add-to-cart events active.

3
Scripts Found
3
Active
0
Tracking Requests

Page Title

Example E-commerce Store - Home

📊 DataLayer Events Detected

Found 2 events being tracked

page_view
view_item
item_id, item_name
These events were used to categorize your website and will be verified during the tracking verification scan.

Recommendations

  • Add enhanced e-commerce tracking for purchase events
  • Implement consent management for GDPR compliance
  • Set up conversion tracking for checkout funnel

Detected Scripts

Google Analytics 4
G-DEMO12345

Implementation: gtag.js

Source: https://www.googletagmanager.com/gtag/js?id=G-DEMO12345

active
Google Tag Manager
GTM-DEMO123

Implementation: gtm.js

Source: https://www.googletagmanager.com/gtm.js?id=GTM-DEMO123

active
Facebook Pixel
1234567890

Implementation: fbevents.js

Source: https://connect.facebook.net/en_US/fbevents.js

active

Scan Progress Indicator

Real-time progress display shown while Tessa is scanning your website. Updates every few seconds with current status.

Scanning example-store.com

65%

Analyzing page structure and detecting tracking scripts...

Step 3 of 5: Detecting tracking scripts

Website Type Selector

After scanning, Tessa suggests your website type. You can confirm or change it to get more accurate recommendations.

Loading tracking setup options...

Google Analytics Authorization

OAuth2 connection card that appears when you want to connect your GA4 property for enhanced features and verification.

Checking connection status...

Tracking Verification Results

Shows which recommended events are firing correctly, which are misconfigured, and which are missing entirely.

Tracking Implementation Verification

Ecommerce Template Analysis

65%

Implementation Score

Executive Summary

E-commerce tracking is partially configured

Key Findings:

  • •Page views tracking correctly
  • •Add to cart missing value parameter
  • •Purchase event not firing

Business Impact:

Unable to track revenue and complete conversion funnel

Recommended Next Steps:

  • →Implement purchase event
  • →Add value parameter to add_to_cart

Verification Actions Performed (2 total):

1.Homepage Load✓ 1 event
2.Add to Cart✓ 1 event
Scan Reliability:High
Partial Implementation
1

Fully Implemented

1

Partial

1

Not Implemented

0

Misconfigured

3

Total Checked

Score Breakdown

Critical Events
50%
High Priority
70%
Parameter Completeness
60%

Event Implementation Status

Implementation Gaps

PurchaseCannot measure revenue or conversion rate impact2-4 hours effort

Purchase completion event not implemented

2 interactions • 4 dataLayer events capturedVerification ID: demo-verification-123

Google Analytics Data Overview

Real-time GA4 metrics shown after connecting your Google Analytics account. Displays events, users, and sessions from the last 7 days.

See Your Own Components

These demos show dummy data. Want to see how these components look with YOUR website's actual tracking setup? Run a free scan now!

🚀

All Available Components

TagAssistant.ai uses chapter-based AI interactions. Each user action or AI response creates a new "chapter" in your timeline, rendered as a React component. Here are the main ones:

ScanResultsCard

Main scan results with tracking detection

TrackingSetupSelector

Website type selection and confirmation

ConsentAnalysisCard

Privacy and consent system analysis

GAAuthorizationCard

Google Analytics OAuth connection

TrackingVerificationCard

Template analysis and recommended events

CompactProgressIndicator

Real-time scan progress updates