README

本项目是一个包，简化了Google Tag Manager的配置和处理。

它提供了一系列基类，可以从中扩展。

安装

步骤1：添加仓库并下载包

打开命令行控制台，进入您的项目目录，并执行以下命令

# download the latest stable version of this bundle:
$ composer require norsys/google-tag-manager-bundle

此命令需要您已全局安装了composer，如Composer文档中的安装章节所述。

步骤2：注册包

然后，通过将其添加到项目中app/AppKernel.php文件中注册的包列表中来启用该包。

<?php
// app/AppKernel.php

// ...
class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = array(
            // ...
            new Norsys\GoogleTagManagerBundle\NorsysGoogleTagManagerBundle(),
            // ...
        );
        // ...
    }
    // ...
}

步骤3：配置与实现

GTMB包允许您定义google tag manager参数，提供默认值管理。

基本集成

# app/config/config.yml
#...
norsys_google_tag_manager:
    id: 'GTM-XXXXXX'

模板集成

为了简化快速集成，该包提供twig部分和JavaScript文件，您可以在模板中包含它们。

示例

{# Google Tag Manager #}
{% block google_tag_manager %}
    {% include '@NorsysGoogleTagManager/google_tag_manager.html.twig' %}
    {{ asset('web/bundles/norsysgoogletagmanager/js/google-tag-manager.js') }}
{% endblock google_tag_manager %}

控制GTM加载

默认情况下，GoogleTagManager在包含JavaScript文件时初始化。

您还可以将其绑定到特定的DOM事件。

# app/config/config.yml
#...
norsys_google_tag_manager:
    id: 'GTM-XXXXXX'
    on_event:
        enabled: true
        name: load
        container: body

DataLayer配置

GoogleTagManager Bundle处理两种不同类型的参数

静态参数
动态参数

⚠️作为一个经验法则，static和dynamic参数必须有不同的名称。

静态参数

以下是一个非常基本的配置示例

# app/config/config.yml
#...
norsys_google_tag_manager:
    data_layer:
        default:
            static:
                virtualPageURL: '/home'

        pages:
            faq:
                static:
                    virtualPageURL: '/otherLink/faq'

该包将合并默认值和每个路由的静态参数，并发出结果数据层。

针对响应faq路由的页面发送的数据层将是

    dataLayer = [ { "virtualPageURL": "/otherLink/faq" } ];

动态参数

在某些情况下，可能需要一些参数值根据上下文动态变化。

为此目的，该包提供了对动态参数的支持。

每个动态参数由一个实现NorsysGoogleTagManagerBundle\Dynamic\ParameterInterface的服务组成。

自定义动态参数类必须实现以下两个方法

getValue() 负责计算参数值的方法。它接收整个合并和解析的配置作为唯一参数
getName() 此方法必须返回唯一的参数名称，它在配置中表示该参数

# src/AppBundle/DynamicParameter/Acme.php
<?php

namespace AppBundle\DynamicParameter;

use Norsys\GoogleTagManagerBundle\Config\ParameterBag;

use Norsys\GoogleTagManagerBundle\Dynamic\ParameterInterface;

class Acme implements ParameterInterface
{
    public function getValue(ParameterBag $configPage): string
    {
        // do something to calculate value
        // ...

        return $calculatedValue;
    }

    public function getName(): string
    {
        return 'acmeDynamicParam';
    }
}

在包配置中引用的每个动态参数类都必须注册，因此使用适当的标签声明

# app/config/services.yml
#...
    app.google_tag_manager.config.dynamic_parameter.acme:
        class: AppBundle\DynamicParameter\Acme
        tags:
            - { name: 'norsys_google_tag_manager.dynamic_parameter' }

#...

现在我们可以在包配置中使用该参数，通过它的getName()方法定义的别名来引用它。

# app/config/config.yml
#...
norsys_google_tag_manager:
    data_layer:
        default:
            # ...
            dynamic:
                acmeDynamicParam: ~
            # ...

尽管在大多数情况下很少需要，但可以将初始化字符串传递给参数，然后在其关联的服务中获取它。

例如，假设我们想要传递一个类似于C的模板字符串

# app/config/config.yml
#...
norsys_google_tag_manager:
    data_layer:
        default:
            # ...
            dynamic:
                acmeDynamicParam: '%s:%s:%s'
            # ...

然后我们可以在getValue()方法中轻松获取此初始化值，以便进一步处理

# src/AppBundle/DynamicParameter/Acme.php
<?php

namespace AppBundle\DynamicParameter;

use Norsys\GoogleTagManagerBundle\Config\ParameterBag;

use Norsys\GoogleTagManagerBundle\Dynamic\ParameterInterface;

class Acme implements ParameterInterface
{
    // ...

    public function getValue(ParameterBag $configPage): string
    {
        // The value passed in the parameter config can be retreived easily
        $initValue = $configPage->get($this->getName());

        // Fetch $locale, $route, $land, for example from an object injected in the service's constructor
        // ...

        $calculatedValue = sprintf($initValue, $locale, $route, $land);

        return $calculatedValue;
    }

    // ...

}

动态参数也可以基于每个路由进行覆盖

norsys_google_tag_manager:
    data_layer:
        default:
            # ...
            dynamic:
                acmeDynamicParam: 'whatever-init-value'

        pages:
            faq:
                dynamic:
                    acmeDynamicParam: 'another-init-value'

动态参数别名

此外，此包还支持动态参数的别名。

让我们考虑使用之前创建的acmeDynamicParam的别名

norsys_google_tag_manager:
    data_layer:
        aliases:
            myDummyParam: acmeDynamicParam

        default:
            # ...
            dynamic:
                acmeDynamicParam: 'whatever-init-value'

现在我们可以使用别名直接引用其目标

norsys_google_tag_manager:
    data_layer:
        aliases:
            myDummyParam: acmeDynamicParam

        default:
            # ...
            dynamic:
                # The following is equivalent to:
                #
                # acmeDynamicParam: 'whatever-init-value'
                #
                myDummyParam: 'whatever-init-value'

结论

现在，假设上述 2 个 静态 和 动态 配置参数，为 faq 路由生成的 dataLayer 将类似于以下内容

    dataLayer = [ { "virtualPageURL": "/otherLink/faq", "acmeDynamicParam": "constructed-value" } ];

致谢

由 ❤️ 开发，使用 Norsys

许可证

本项目采用 MIT 许可证许可。

norsys / google-tag-manager-bundle

维护者

详细信息