README

Google Tag Manager 允许您在不修改网站代码的情况下管理跟踪和营销优化，包括 AdWords、Google Analytics 等。使用 Google Tag Manager 的一种方法是在页面加载后和自定义事件中使用 JavaScript 中的 dataLayer 变量发送数据。此包使管理数据层变得简单。

有关通过数据层发送的具体示例，请参阅 Google Tag Manager 的开发者指南。

您还需要一个 Google Tag Manager ID，您可以通过注册并为您网站创建账户来获取。

安装

您可以通过 Composer 安装此包

composer require spatie/laravel-googletagmanager

在 Laravel 5.5 及以上版本中，该包将自动注册服务提供者和外观

在 L5.4 或以下版本中，首先注册包的服务提供者和外观

// config/app.php

'providers' => [
    ...
    Spatie\GoogleTagManager\GoogleTagManagerServiceProvider::class,
],

'aliases' => [
    ...
    'GoogleTagManager' => Spatie\GoogleTagManager\GoogleTagManagerFacade::class,
],

外观是可选的，但本指南的其余部分假设您正在使用外观。

接下来，发布配置文件

php artisan vendor:publish --provider="Spatie\GoogleTagManager\GoogleTagManagerServiceProvider" --tag="config"

可选发布视图文件。除非必要，否则不建议这样做，以便您的视图在未来的包版本中保持更新。

php artisan vendor:publish --provider="Spatie\GoogleTagManager\GoogleTagManagerServiceProvider" --tag="views"

如果您计划使用闪存功能，则必须在 StartSession 中间件之后安装 GoogleTagManagerMiddleware

// app/Http/Kernel.php

protected $middleware = [
    ...
    \Illuminate\Session\Middleware\StartSession::class,
    \Spatie\GoogleTagManager\GoogleTagManagerMiddleware::class,
    ...
];

配置

配置文件相当简单。

return [

    /*
     * The Google Tag Manager id, should be a code that looks something like "gtm-xxxx".
     */
    'id' => '',
    
    /*
     * Enable or disable script rendering. Useful for local development.
     */
    'enabled' => true,

    /*
     * If you want to use some macro's you 'll probably store them
     * in a dedicated file. You can optionally define the path
     * to that file here and we will load it for you.
     */
    'macroPath' => '',

];

在开发过程中，您不想将数据发送到生产标签管理账户，这是 enabled 出现的地方。

示例设置

return [
    'id' => 'GTM-XXXXXX',
    'enabled' => env('APP_ENV') === 'production',
    'macroPath => app_path('Services/GoogleTagManager/Macros.php'),
];

用法

基本示例

首先，您需要包含 Google Tag Manager 的脚本。Google 的文档建议在 body 标签之后执行此操作。

{{-- layout.blade.php --}}
<html>
  <head>
    @include('googletagmanager::head')
    {{-- ... --}}
  </head>
  <body>
    @include('googletagmanager::body')
    {{-- ... --}}
  </body>
</html>

您的 base dataLayer 也将在这里渲染。要添加数据，请使用 set() 函数。

// HomeController.php

public function index()
{
    GoogleTagManager::set('pageType', 'productDetail');

    return view('home');
}

这会渲染

<html>
  <head>
    <script>dataLayer = [{"pageType":"productDetail"}];</script>
    <script>/* Google Tag Manager's script */</script>
    <!-- ... -->
  </head>
  <!-- ... -->
</html>

为下一个请求闪存数据

该包还可以设置数据以在下一个请求上渲染。这对于在内部重定向后设置数据非常有用。

// ContactController.php

public function getContact()
{
    GoogleTagManager::set('pageType', 'contact');

    return view('contact');
}

public function postContact()
{
    // Do contact form stuff...

    GoogleTagManager::flash('formResponse', 'success');

    return redirect()->action('ContactController@getContact');
}

在表单提交后，以下 dataLayer 将在联系页面解析

<html>
  <head>
    <script>dataLayer = [{"pageType":"contact","formResponse":"success"}];</script>
    <script>/* Google Tag Manager's script */</script>
    <!-- ... -->
  </head>
  <!-- ... -->
</html>

其他简单方法

// Retrieve your Google Tag Manager id
$id = GoogleTagManager::id(); // GTM-XXXXXX

// Check whether script rendering is enabled
$enabled = GoogleTagManager::isEnabled(); // true|false

// Enable and disable script rendering
GoogleTagManager::enable();
GoogleTagManager::disable();

// Add data to the data layer (automatically renders right before the tag manager script). Setting new values merges them with the previous ones. Set also supports dot notation.
GoogleTagManager::set(['foo' => 'bar']);
GoogleTagManager::set('baz', ['ho' => 'dor']);
GoogleTagManager::set('baz.ho', 'doorrrrr');

// [
//   'foo' => 'bar',
//   'baz' => ['ho' => 'doorrrrr']
// ]

转储

GoogleTagManager 还有一个 dump() 函数，可以将数组实时转换为 json 对象。这对于将数据发送到以后要使用的视图非常有用。

<a data-gtm-product='{!! GoogleTagManager::dump($article->toArray()) !!}' data-gtm-click>Product</a>

$('[data-gtm-click]').on('click', function() {
    dataLayer.push({
        'event': 'productClick',
        'ecommerce': {
            'click': {
                'products': $(this).data('gtm-product')
            }
        }
        'eventCallback': function() {
            document.location = $(this).attr('href');
        }
    });
});

DataLayer

内部，GoogleTagManager 使用 DataLayer 类来存储和渲染数据。此类对于某些自定义实现来说完全可以使用，而不需要包的其他部分。DataLayer 是一个支持点符号的数组，可以轻松地渲染为 json。

$dataLayer = new Spatie\GoogleTagManager\DataLayer();
$dataLayer->set('ecommerce.click.products', $products->toJson());
echo $dataLayer->toJson(); // {"ecommerce":{"click":{"products":"..."}}}

如果您想完全访问 GoogleTagManager 实例的数据层，请调用 getDataLayer() 函数。

$dataLayer = GoogleTagManager::getDataLayer();

可宏化

将标签添加到页面可能是一个重复的过程。由于这个包不应该对您的标签的外观有所偏见，因此 GoogleTagManager 是可宏化的。

GoogleTagManager::macro('impression', function ($product) {
    GoogleTagManager::set('ecommerce', [
        'currencyCode' => 'EUR',
        'detail' => [
            'products' => [ $product->getGoogleTagManagerData() ]
        ]
    ]);
});

GoogleTagManager::impression($product);

在配置中，您可以可选地设置包含宏的文件路径。

codicastudio / google-tag-manager

维护者

详细信息

README

安装

配置

用法

基本示例

为下一个请求闪存数据

其他简单方法

转储

DataLayer

可宏化