Support New Google Analytics 4

[warmstarter]

Alabaster supports Google Analytics UA via 'analytics_id' options. This will be deprecated in summer 2023, and for a new account, you have to jump through hoops to even get a UA id if you do not already have one, it is not at all simple. Even if you do this, it is basically a dual GA4/UA account, and kinda messy.

https://support.google.com/analytics/answer/9304153

This site explains the setup of an account, and then the section on 'Add the Google tag directly to your webpages' explains what you need to do. They have some site types where it seems like it can automatically add, and for others it gives manual instructions.

I was successfully able to get this to work by adding it into the layout.html included with Alabaster as shown:

{%- set theme_show_relbar_top = theme_show_relbar_top or theme_show_relbars %}
{%- set theme_show_relbar_bottom = theme_show_relbar_bottom or theme_show_relbars %}

{# removed existing top+bottom related nav, and embed in main content #}
{%- block relbar1 %}{% endblock %}
{%- block relbar2 %}{% endblock %}

{# Nav should appear before content, not after #}
{%- block content %}
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3ZFF0CWSJN"></script>
        <script>
                                  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXX');
        </script>
{%- if theme_fixed_sidebar|lower == 'true' %}
  <div class="document">
    {{ sidebar() }}
    {%- block document %}

what is in there as ''G-XXXXXXX' should be the GA4 analytics_id to be used, so would need to be a configurable option.

[winedarksea]

+1
it's 2024 and it still appears the new GA ids are not directly supported.