🔥 Chore (AMP): Remove outdated Google Analytics (UA) from Jekyll theme

[chriskyfung]

Description

The current Jekyll theme includes Google Analytics tracking using the Universal Analytics (UA) property. However, UA is outdated and will be discontinued in July 2023. We should update the theme to use the Google Analytics 4 (GA4) property instead to ensure continued tracking.

Issue Type: Enhancement

Proposed Changes

• [ ] Remove the outdated UA tracking code from the theme.
• [ ] Add GA4 tracking code to the theme, using the appropriate Measurement ID.
• [ ] Ensure that the GA4 configuration is AMP-compliant.
• [ ] Update the documentation and instructions to reflect the changes.

Benefits

• Maintain accurate and reliable tracking data after the UA discontinuation.
• Enhance support for modern website practices and AMP compliance.

Acceptance Criteria

• [ ] The UA tracking code is removed.
• [ ] The GA4 tracking code is correctly implemented.
• [ ] The theme is compatible with AMP pages.
• [ ] The documentation is updated accordingly.

Additional Information

• UA will be discontinued on July 1, 2023.
• GA4 is the recommended alternative for tracking website traffic and engagement.
• For more information on migrating to GA4, please refer to: https://support.google.com/analytics/answer/10088976?hl=en

Priority: High Due Date: Before July 1, 2023

[chriskyfung]

Specific Changes for AMP Compliance

• Remove JavaScript from HTML: AMP only allows inline JavaScript, so any external JavaScript references in the GA4 tracking code must be removed.
• Use AMP-specific tags: GA4 offers AMP-specific tags (gtag.js?amp) that are optimized for AMP environments.
• Set the data source: Use the data-source attribute to specify the AMP page as the data source for GA4 tracking.
• Enable client-side tracking: AMP blocks cookies by default, so client-side tracking must be enabled using the allow-client-id attribute.

Challenges in Jekyll Theme Implementation

• Identifying existing tracking code: Jekyll themes may include pre-existing tracking code that needs to be modified or removed.
• Customizing the tracking code: The GA4 tracking code may need to be customized to meet the specific tracking requirements of the Jekyll theme.
• Managing multiple environments: Jekyll themes often have multiple environments (e.g., development, staging, production), which requires careful management of the GA4 tracking code across different environments.
• Maintaining AMP compliance: As Jekyll themes evolve, it's important to ensure that any updates maintain AMP compliance.

Testing and Validation

• Use GA4 test mode: Enable GA4 test mode to preview tracking data and identify any errors before publishing changes.
• Validate AMP pages: Use the AMP Validator to ensure that AMP pages are compliant and properly displaying tracking data.
• Monitor tracking data: Regularly monitor GA4 reports to verify that tracking is accurate and that AMP-specific metrics are being captured.
• Perform cross-browser testing: Test the GA4 tracking code in different browsers and devices to ensure compatibility and accurate data collection.