Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions 404.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,15 @@
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

<!-- Google Tag Manager -->
<script src="js/google-tag.js"></script>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Main navigation">
<div class="container-fluid">
Expand Down Expand Up @@ -90,5 +97,6 @@ <h1 class="display-4">404 - Page Not Found</h1>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/lead-capture.js"></script>
<script src="js/floating-contact.js"></script>
</body>
</html>
8 changes: 8 additions & 0 deletions about-us.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,15 @@
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

<!-- Google Tag Manager -->
<script src="js/google-tag.js"></script>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Main navigation">
<div class="container-fluid">
Expand Down Expand Up @@ -109,5 +116,6 @@ <h5>Website Admin</h5>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/lead-capture.js"></script>
<script src="js/floating-contact.js"></script>
</body>
</html>
22 changes: 20 additions & 2 deletions buying.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,15 @@
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

<!-- Google Tag Manager -->
<script src="js/google-tag.js"></script>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Main navigation">
<div class="container-fluid">
Expand Down Expand Up @@ -65,8 +72,18 @@
<h1 class="display-4">Buy Your Dream Home in Dayton with Confidence</h1>
<p class="lead">Ready to buy? The Wamsley Group specializes in helping buyers find the perfect home throughout the Dayton, Ohio area. Our local expertise, personalized guidance, and commitment to your goals make your home buying journey smooth and successful.</p>
<p>Let our experienced team guide you through every step of the buying process with transparency, professionalism, and dedicated support tailored to your needs.</p>
<a href="https://jaredwamsley.matrix.daytonrealtors.org/Matrix/Public/?L=1&ap=SCH#1" class="btn btn-primary btn-lg me-2" aria-label="View Wamsley Group listings">View Listings</a>
<a href="index.html#contact" class="btn btn-outline-primary btn-lg consultbtn" role="button" aria-label="Schedule a consultation">Schedule Consultation</a>
<div class="d-flex flex-wrap gap-2 mb-3">
<a href="https://jaredwamsley.matrix.daytonrealtors.org/Matrix/Public/?L=1&ap=SCH#1" class="btn btn-primary btn-lg" aria-label="View Wamsley Group listings">View Listings</a>
<a href="index.html#contact" class="btn btn-outline-primary btn-lg consultbtn" role="button" aria-label="Schedule a consultation">Schedule Consultation</a>
</div>
<div class="d-flex flex-wrap gap-2 mt-3">
<a href="tel:937-369-7777" class="btn btn-success btn-lg" aria-label="Call us now">
<i class="fas fa-phone"></i> Call (937) 369-7777
</a>
<a href="mailto:pipoat@mail.uc.edu" class="btn btn-info btn-lg text-white" aria-label="Email us">
<i class="fas fa-envelope"></i> Email Us
</a>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -181,5 +198,6 @@ <h2 class="mb-4">Ready to Buy Your Dayton Home?</h2>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/lead-capture.js"></script>
<script src="js/floating-contact.js"></script>
</body>
</html>
8 changes: 8 additions & 0 deletions calculator.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,15 @@
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

<!-- Google Tag Manager -->
<script src="js/google-tag.js"></script>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Main navigation">
<div class="container-fluid">
Expand Down Expand Up @@ -1084,5 +1091,6 @@ <h2>Connect with Us</h2>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/lead-capture.js"></script>
<script src="js/floating-contact.js"></script>
</body>
</html>
97 changes: 97 additions & 0 deletions docs/GOOGLE_TAG_MANAGER.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
# Google Tag Manager Setup Instructions

This website includes Google Tag Manager (GTM) integration for tracking user interactions and conversions.

## Setting Up Your GTM Container ID

1. **Create a GTM Account** (if you don't have one):
- Go to https://tagmanager.google.com/
- Sign in with your Google account
- Click "Create Account"
- Follow the setup wizard

2. **Get Your Container ID**:
- Once your account is created, you'll receive a Container ID (format: `GTM-XXXXXXX`)
- Copy this ID

3. **Update the Website**:
- Open `/js/google-tag.js`
- Find the line: `const GTM_ID = 'GTM-XXXXXXX';`
- Replace `GTM-XXXXXXX` with your actual Container ID
- Save the file

4. **Update noscript iframes** (for users with JavaScript disabled):
- Search all HTML files for `GTM-XXXXXXX`
- Replace with your actual Container ID
- Files to update:
- index.html
- about-us.html
- buying.html
- sell.html
- calculator.html
- local-spotlight.html
- whats-new.html
- referral.html
- 404.html
- success.html

## Automated Tracking Features

The GTM implementation automatically tracks:

- **Form Submissions**: All form submissions are tracked with form name and ID
- **Outbound Link Clicks**: Clicks to external websites
- **Phone Number Clicks**: Clicks on `tel:` links
- **Email Clicks**: Clicks on `mailto:` links
- **Floating Contact Widget**: Interactions with the floating contact button
- **Quick Contact Actions**: Usage of one-click contact options

## Setting Up Tags in GTM

After installing your Container ID, you can create tags in GTM to send data to:

- Google Analytics 4 (GA4)
- Google Ads conversion tracking
- Facebook Pixel
- Other marketing and analytics platforms

### Example: Setting up GA4

1. In GTM, click "New Tag"
2. Choose "Google Analytics: GA4 Configuration"
3. Enter your GA4 Measurement ID
4. Set trigger to "All Pages"
5. Save and publish your container

## Testing

1. After updating the Container ID, load your website
2. Open Chrome DevTools (F12)
3. Go to the Network tab
4. Filter by "gtm"
5. You should see requests to `googletagmanager.com`

Alternatively, install the [Google Tag Assistant](https://tagassistant.google.com/) Chrome extension to verify GTM is working.

## Custom Events

The following custom events are tracked and can be used to create triggers in GTM:

- `form_submission` - When any form is submitted
- Parameters: `form_name`, `form_id`
- `outbound_click` - When a user clicks an external link
- Parameters: `link_url`, `link_text`
- `phone_click` - When a user clicks a phone number
- Parameters: `phone_number`
- `email_click` - When a user clicks an email address
- Parameters: `email_address`
- `floating_contact_click` - When the floating contact button is clicked
- Parameters: `action` (open/close)
- `quick_contact_used` - When a quick contact option is used
- Parameters: `contact_type` (phone/email/form)

## Support

For more information about Google Tag Manager, visit:
- [GTM Documentation](https://support.google.com/tagmanager)
- [GTM Developer Guide](https://developers.google.com/tag-manager)
132 changes: 132 additions & 0 deletions docs/IMPLEMENTATION_SUMMARY.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
# Implementation Summary: Google Tag Manager & Lead Capture Enhancements

## Overview
This implementation adds comprehensive Google Tag Manager (GTM) integration and significantly enhances lead capture capabilities across the Wamsley Group real estate website.

## What Was Implemented

### 1. Google Tag Manager Integration ✅
- **Scope**: All 10 HTML pages
- **Files Created**:
- `/js/google-tag.js` - Complete GTM implementation with automated event tracking
- `/docs/GOOGLE_TAG_MANAGER.md` - Setup and configuration guide

**Tracking Features**:
- Form submissions (with form name and ID)
- Outbound link clicks (with URL and link text)
- Phone number clicks (tel: links)
- Email clicks (mailto: links)
- Floating contact widget interactions
- Quick contact option usage

### 2. Floating Contact Button Widget ✅
- **File**: `/js/floating-contact.js`
- **Scope**: All 10 HTML pages
- **Features**:
- Sticky button positioned in bottom-right corner
- Expands to show 3 quick contact options:
- Call Now (click-to-call)
- Email (click-to-email)
- Message (scrolls to contact form)
- Smooth animations and transitions
- Mobile-responsive design
- Accessible with proper ARIA attributes
- Auto-closes when clicking outside

### 3. Enhanced Hero Sections ✅
Added one-click contact buttons to hero sections on:
- Homepage (`index.html`)
- Buying page (`buying.html`)
- Selling page (`sell.html`)

**Buttons Added**:
- "Call (937) 369-7777" - Green button with phone icon
- "Email Us" - Blue button with envelope icon

### 4. Quick Contact Cards (Homepage) ✅
Added three prominent contact cards on the homepage with:
- **Call Us** card - Direct phone link with icon
- **Email Us** card - Direct email link with icon
- **Schedule Meeting** card - Links to contact form

## Pages Modified

1. `index.html` - Homepage with quick contact cards and hero buttons
2. `about-us.html` - GTM and floating contact
3. `buying.html` - GTM, floating contact, and hero buttons
4. `sell.html` - GTM, floating contact, and hero buttons
5. `calculator.html` - GTM and floating contact
6. `local-spotlight.html` - GTM and floating contact
7. `whats-new.html` - GTM and floating contact
8. `referral.html` - GTM and floating contact
9. `404.html` - GTM and floating contact
10. `success.html` - GTM and floating contact

## Configuration Required

⚠️ **Important**: The GTM container ID needs to be configured:

1. Get your GTM Container ID from https://tagmanager.google.com/
2. Update `/js/google-tag.js` line 14: Replace `GTM-XXXXXXX` with your ID
3. Update all 10 HTML files: Replace `GTM-XXXXXXX` in the noscript iframe tags

See `/docs/GOOGLE_TAG_MANAGER.md` for detailed instructions.

## Contact Information Used

- **Phone**: 937-369-7777 (displayed as (937) 369-7777)
- **Email**: pipoat@mail.uc.edu

## Testing Completed

✅ HTML validation - All files valid
✅ JavaScript validation - All files valid
✅ GTM integration - Present on all 10 pages
✅ Floating contact - Present on all 10 pages
✅ Click-to-call - Working on 3 key pages
✅ Click-to-email - Working on 3 key pages
✅ Quick contact cards - Working on homepage
✅ Code review - Passed with 1 issue fixed
✅ Security scan - No vulnerabilities found

## Benefits

### Lead Capture Improvements
- **Multiple contact methods** visible on every page
- **Reduced friction** with one-click calling and emailing
- **Always accessible** floating button on all pages
- **Professional appearance** that builds trust
- **Mobile-friendly** contact options

### Analytics & Tracking
- **Complete visibility** into user behavior
- **Conversion tracking** for all contact methods
- **Data-driven insights** for optimization
- **Easy integration** with GA4, Google Ads, and other platforms

## Files Added
- `/js/google-tag.js` (4,065 bytes)
- `/js/floating-contact.js` (8,264 bytes)
- `/docs/GOOGLE_TAG_MANAGER.md` (3,163 bytes)

## Files Modified
- All 10 HTML pages (index.html, about-us.html, buying.html, sell.html, calculator.html, local-spotlight.html, whats-new.html, referral.html, 404.html, success.html)

## Total Changes
- 13 files changed
- 649 insertions
- 6 deletions

## Next Steps

1. **Configure GTM Container ID** as described above
2. **Set up tags in GTM** for Google Analytics, conversion tracking, etc.
3. **Test the implementation** on the live site
4. **Monitor GTM events** to verify tracking is working
5. **Optimize based on data** collected from GTM

## Support Resources

- [Google Tag Manager Documentation](https://support.google.com/tagmanager)
- [GTM Setup Guide](docs/GOOGLE_TAG_MANAGER.md)
- [GTM Developer Guide](https://developers.google.com/tag-manager)
Loading