AllXHS - Analytics Tracking Implementation

Analytics Tracking Implementation

Complete tracking code setup for AllXHS website. Measure everything that matters for your Xiaohongshu marketing success.

Implementation Checklist

Google Analytics 4 (GA4) - Site-wide tracking
Google Tag Manager (GTM) - Tag management
Event Tracking - Custom events
Conversion Tracking - Goals and conversions
Heatmap Tools - User behavior tracking

1. Google Analytics 4 (GA4)

Place this in the <head> of EVERY page, before closing </head> tag

Setup Steps:

Create GA4 property at analytics.google.com
Get your Measurement ID (format: G-XXXXXXXXXX)
Replace 'G-XXXXXXXXXX' below with your actual Measurement ID
Add to all pages

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    // Configure GA4 with enhanced measurement
    gtag('config', 'G-XXXXXXXXXX', {
        'send_page_view': true,
        'cookie_flags': 'SameSite=None;Secure',
        'allow_google_signals': true,
        'allow_ad_personalization_signals': true
    });
</script>

2. Google Tag Manager (GTM) - Alternative

If using GTM instead of direct GA4 implementation:

Advantages:

Manage all tags from one interface
No code changes for new tracking
Better organization for multiple tools

Replace 'GTM-XXXXXXX' with your GTM Container ID

<!-- Google Tag Manager - HEAD -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>

<!-- Google Tag Manager - BODY (place immediately after opening <body>) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

3. Event Tracking - Custom Events

Track specific user interactions for better insights

Events to Track:

Newsletter signups
Resource downloads
Consultation bookings
Link clicks (external, CTA)
Video plays
Form submissions
Scroll depth

Event Tracking Functions

<script>
    // Newsletter Signup Event
    function trackNewsletterSignup(location) {
        gtag('event', 'newsletter_signup', {
            'event_category': 'Lead Generation',
            'event_label': location,
            'value': 1
        });
        console.log('Tracked: Newsletter signup - ' + location);
    }

    // Resource Download Event
    function trackResourceDownload(resourceName, resourceType) {
        gtag('event', 'resource_download', {
            'event_category': 'Lead Generation',
            'event_label': resourceName,
            'resource_type': resourceType,
            'value': 5
        });
        console.log('Tracked: Download - ' + resourceName);
    }

    // Consultation Booking Event
    function trackConsultationBooking(industry, budget) {
        gtag('event', 'consultation_booking', {
            'event_category': 'High Intent Lead',
            'event_label': industry,
            'budget_range': budget,
            'value': 50
        });
        console.log('Tracked: Consultation booking - ' + industry);
    }

    // Scroll Depth Tracking
    let scrollTracked = {25: false, 50: false, 75: false, 100: false};

    window.addEventListener('scroll', function() {
        const scrollPercentage = Math.round((window.scrollY /
            (document.documentElement.scrollHeight - window.innerHeight)) * 100);

        for (let threshold in scrollTracked) {
            if (scrollPercentage >= threshold && !scrollTracked[threshold]) {
                scrollTracked[threshold] = true;
                gtag('event', 'scroll', {
                    'event_category': 'Engagement',
                    'event_label': threshold + '% Scrolled',
                    'value': parseInt(threshold)
                });
            }
        }
    });
</script>

4. Conversion Tracking - Goals

Conversions to Set Up in GA4:

newsletter_signup (event above)
resource_download (event above)
consultation_booking (event above)
Contact form submission
Services page view (high intent)

Enhanced Conversion Tracking with Lead Scoring

<script>
    function trackConversion(conversionType, leadScore, additionalData = {}) {
        gtag('event', 'conversion', {
            'event_category': 'Conversion',
            'event_label': conversionType,
            'lead_score': leadScore,
            ...additionalData
        });

        // Also send to dataLayer for GTM (if using)
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'conversion_' + conversionType,
            'lead_score': leadScore,
            ...additionalData
        });
    }

    // USAGE EXAMPLES:
    // Low-value: trackConversion('newsletter_signup', 10, {source: 'blog_post'});
    // Medium-value: trackConversion('resource_download', 25, {resource: 'content_calendar'});
    // High-value: trackConversion('consultation_booking', 100, {industry: 'fashion'});
</script>

5. Heatmap & Session Recording Tools

Choose ONE of these tools for behavior tracking

Option A: Microsoft Clarity (FREE)

<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "YOUR_CLARITY_PROJECT_ID");
</script>

Option B: Hotjar

<script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:YOUR_HOTJAR_ID,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>

6. Automatic Event Tracking

Automatically track common interactions

<script>
    // Auto-track all external link clicks
    document.addEventListener('click', function(e) {
        let link = e.target.closest('a');
        if (link && link.href && !link.href.includes(window.location.hostname)) {
            gtag('event', 'click', {
                'event_category': 'External Link',
                'event_label': link.href
            });
        }
    });

    // Auto-track form submissions
    document.addEventListener('submit', function(e) {
        const form = e.target;
        const formId = form.id || 'unknown_form';

        gtag('event', 'form_submission', {
            'event_category': 'Forms',
            'event_label': formId
        });
    });
</script>

7. Setup Checklist

Create GA4 Property
- Go to analytics.google.com
- Create new GA4 property
- Get Measurement ID (G-XXXXXXXXXX)
Install Tracking Code
- Replace 'G-XXXXXXXXXX' with your ID
- Add to all pages in <head> section
- Test with GA4 Debugger Chrome extension
Configure Conversions
- In GA4: Admin → Events → Mark as conversion
- Add: newsletter_signup, resource_download, consultation_booking
Set Up Custom Dimensions
- In GA4: Admin → Custom definitions
- Add: user_industry, budget_range, lead_status, page_category
Install Heatmap Tool
- Choose: Microsoft Clarity (free) or Hotjar
- Create account and get Project ID
- Replace placeholder in code above
Verify Tracking
- Use GA4 Realtime report
- Test all event tracking functions
- Verify conversions are firing

Event Reference

Event Name	Parameters	Value
newsletter_signup	location, source, page	10
resource_download	resource_name, resource_type, industry	25
consultation_booking	industry, budget, company	100
cta_click	cta_text, cta_location	1
scroll	depth_percentage	25/50/75/100

Note: All tracking code examples above use console.log() for debugging. In production, you can remove these or use a flag to enable/disable logging.

Ready to Track Your Success?

Implement these analytics tracking codes to measure your Xiaohongshu marketing performance and optimize for better results.

Explore More Resources