TYPO3 V11多域名下，用TypoScript配置不同Google Analytics标签失败

问题背景 #

在TYPO3 V11的多域名站点中，需要通过TypoScript为不同域名配置对应的Google Analytics标签。

已完成的基础配置 #

首先在constants.typoscript中定义常量：

myExt {
  googleAnalytics {
    default = G-SITE1
    site2 = G-SITE2
  }
}

仅使用默认标签的基础setup.typoscript配置可正常运行：

# google analytics
page.headerData.3 = TEXT
page.headerData.3.value(
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id={$myExt.googleAnalytics.default}"></script>
    ...
)

失败的尝试 #

尝试通过条件判断切换标签，但方案无效：

# Multidomain
config.googleAnalytics = {$myExt.googleAnalytics.default}

[request.getNormalizedParams().getHttpHost() == "site2.com"]
    config.googleAnalytics = {$myExt.googleAnalytics.site2}
[END]

# google analytics
page.headerData.3 = TEXT
page.headerData.3.value(
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id={$config.googleAnalytics}"></script>
    ...
)

问题原因 #

{$config.googleAnalytics}这类常量引用是在TypoScript解析阶段处理的，而条件语句是在运行时生效，此时常量已经完成解析，无法动态更新值，导致条件判断无法影响最终输出的GA标签。

解决方案 #

方案一：条件块内直接配置headerData #

将不同域名的GA配置分别放到对应条件块中，直接使用定义好的常量：

# 默认域名GA配置
page.headerData.3 = TEXT
page.headerData.3.value(
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id={$myExt.googleAnalytics.default}"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', '{$myExt.googleAnalytics.default}');
    </script>
)

# site2.com域名GA配置
[request.getNormalizedParams().getHttpHost() == "site2.com"]
    page.headerData.3 = TEXT
    page.headerData.3.value(
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id={$myExt.googleAnalytics.site2}"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '{$myExt.googleAnalytics.site2}');
        </script>
    )
[END]

方案二：使用COA动态拼接（避免重复代码） #

通过Content Object Array（COA）动态选择对应GA标签，减少代码重复：

page.headerData.3 = COA
page.headerData.3 {
    # 默认标签
    10 = TEXT
    10.value = {$myExt.googleAnalytics.default}
    10.if {
        negate = 1
        value = site2.com
        equals.data = request:getNormalizedParams():httpHost
    }

    # site2域名标签
    20 = TEXT
    20.value = {$myExt.googleAnalytics.site2}
    20.if {
        value = site2.com
        equals.data = request:getNormalizedParams():httpHost
    }

    # 包裹GA脚本模板
    stdWrap.wrap = <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=|"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', '|');
</script>
}

内容的提问来源于stack exchange，提问作者webman