Skip to content

Commit 6afd122

Browse files
Bharath-codeBharath-code
committed
feat: add download badge and analytics tracking to marketing page
- Download count badge from shields.io in nav - Analytics framework with custom event tracking: - Page views, scroll depth (25/50/75/100%) - Command copies, tab switches - GitHub button clicks, footer link clicks - Session summary on page unload - Instructions for Umami/Cloudflare/GA setup in comments
1 parent 239ea29 commit 6afd122

1 file changed

Lines changed: 107 additions & 14 deletions

File tree

‎docs/index.html‎

Lines changed: 107 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -402,13 +402,17 @@
402402
<div class="container">
403403
<nav>
404404
<a href="#" class="logo">git<span>-</span>scope</a>
405-
<a href="https://github.com/Bharath-code/git-scope" class="github-link" target="_blank">
406-
<svg height="20" width="20" viewBox="0 0 16 16" fill="currentColor">
407-
<path
408-
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
409-
</svg>
410-
<span id="star-count">GitHub</span>
411-
</a>
405+
<div style="display: flex; gap: 1rem; align-items: center;">
406+
<img src="https://img.shields.io/github/downloads/Bharath-code/git-scope/total?style=flat-square&color=7C3AED&label=Downloads"
407+
alt="Downloads" style="height: 20px;">
408+
<a href="https://github.com/Bharath-code/git-scope" class="github-link" target="_blank" id="github-btn">
409+
<svg height="20" width="20" viewBox="0 0 16 16" fill="currentColor">
410+
<path
411+
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
412+
</svg>
413+
<span id="star-count">GitHub</span>
414+
</a>
415+
</div>
412416
</nav>
413417

414418
<section class="hero">
@@ -513,31 +517,73 @@ <h3><span class="card-icon">📝</span> Sorting</h3>
513517
</div>
514518

515519
<script>
516-
// Star Count Fetcher
520+
// ===============================
521+
// ANALYTICS SETUP
522+
// ===============================
523+
// To enable analytics, set up free Umami (https://umami.is) and replace:
524+
// data-website-id="YOUR_WEBSITE_ID" with your actual ID
525+
// Or use Cloudflare Web Analytics (also free)
526+
527+
// Simple analytics object for tracking events
528+
const analytics = {
529+
events: [],
530+
track: function(name, data = {}) {
531+
const event = { name, data, time: new Date().toISOString() };
532+
this.events.push(event);
533+
console.log('[Analytics]', name, data);
534+
// If you have Umami, uncomment:
535+
// if (window.umami) umami.track(name, data);
536+
}
537+
};
538+
539+
// Track page view
540+
analytics.track('page_view', { page: window.location.pathname });
541+
542+
// ===============================
543+
// SCROLL DEPTH TRACKING
544+
// ===============================
545+
let maxScroll = 0;
546+
window.addEventListener('scroll', () => {
547+
const scrollPercent = Math.round((window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100);
548+
if (scrollPercent > maxScroll) {
549+
maxScroll = scrollPercent;
550+
// Track milestones: 25%, 50%, 75%, 100%
551+
if ([25, 50, 75, 100].includes(scrollPercent)) {
552+
analytics.track('scroll_depth', { percent: scrollPercent });
553+
}
554+
}
555+
});
556+
557+
// ===============================
558+
// STAR COUNT FETCHER
559+
// ===============================
517560
fetch('https://api.github.com/repos/Bharath-code/git-scope')
518561
.then(response => response.json())
519562
.then(data => {
520563
if (data.stargazers_count !== undefined) {
521564
const count = data.stargazers_count;
522-
// Format: 1.2k if > 1000
523565
const formatted = count > 1000 ? (count / 1000).toFixed(1) + 'k' : count;
524566
document.getElementById('star-count').textContent = `Star ${formatted}`;
525567
}
526568
})
527569
.catch(err => console.log('Failed to fetch stars', err));
528570

529-
// Tabs
571+
// ===============================
572+
// TAB SWITCHING
573+
// ===============================
530574
function switchTab(id) {
531-
// Headers
532575
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
533576
event.target.classList.add('active');
534-
535-
// Content
536577
document.querySelectorAll('.code-block').forEach(b => b.classList.remove('active'));
537578
document.getElementById('code-' + id).classList.add('active');
579+
580+
// Track tab switch
581+
analytics.track('tab_switch', { tab: id });
538582
}
539583

540-
// Copy
584+
// ===============================
585+
// COPY COMMAND (with tracking)
586+
// ===============================
541587
function copyCode() {
542588
const activeBlock = document.querySelector('.code-block.active');
543589
let text = "";
@@ -552,10 +598,57 @@ <h3><span class="card-icon">📝</span> Sorting</h3>
552598
setTimeout(() => {
553599
hint.innerText = original;
554600
}, 2000);
601+
602+
// Track command copy
603+
analytics.track('command_copied', { command: text.split('\n')[0] });
555604
});
556605
}
606+
607+
// ===============================
608+
// GITHUB BUTTON CLICK TRACKING
609+
// ===============================
610+
document.getElementById('github-btn')?.addEventListener('click', () => {
611+
analytics.track('github_click', { location: 'nav' });
612+
});
613+
614+
// Track all footer GitHub links
615+
document.querySelectorAll('footer a').forEach(link => {
616+
link.addEventListener('click', () => {
617+
analytics.track('footer_link_click', { href: link.href });
618+
});
619+
});
620+
621+
// ===============================
622+
// SESSION SUMMARY (on page unload)
623+
// ===============================
624+
window.addEventListener('beforeunload', () => {
625+
analytics.track('session_end', {
626+
maxScroll: maxScroll,
627+
totalEvents: analytics.events.length
628+
});
629+
});
557630
</script>
558631

632+
<!--
633+
TO ENABLE REAL ANALYTICS:
634+
635+
Option 1: Umami (Free, self-hosted on Vercel)
636+
1. Go to https://umami.is and deploy to Vercel (free)
637+
2. Add this script before </head>:
638+
<script defer src="https://your-umami-instance.vercel.app/script.js"
639+
data-website-id="YOUR_WEBSITE_ID"></script>
640+
641+
Option 2: Cloudflare Web Analytics (Free, no setup)
642+
1. Go to Cloudflare Dashboard > Web Analytics
643+
2. Add your site, get the script
644+
3. Add before </body>:
645+
<script defer src='https://static.cloudflareinsights.com/beacon.min.js'
646+
data-cf-beacon='{"token": "YOUR_TOKEN"}'></script>
647+
648+
Option 3: Google Analytics (Free)
649+
Add your GA4 script before </head>
650+
-->
651+
559652
</body>
560653

561654
</html>

0 commit comments

Comments
 (0)