README

为您的Laravel 5应用程序提供一个简单的Google Tag Manager实现。

Laravel 4版本: spatie/laravel4-googletagmanager

Spatie是比利时安特卫普的一家网页设计公司。您可以在我们的网站上找到我们所有开源项目的概述在这里。

支持我们

我们投入了大量资源来创建一流的开放源代码包。您可以通过购买我们的付费产品之一来支持我们。

我们非常感谢您从您的家乡寄来明信片，注明您正在使用我们的哪些包。您可以在我们的联系我们页面上找到我们的地址。我们将所有收到的明信片发布在我们的虚拟明信片墙上。

Google Tag Manager

Google Tag Manager允许您在不编辑网站代码的情况下管理跟踪和营销优化。使用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' => '',
    
     /*
     * The key under which data is saved to the session with flash.
     */
    'sessionKey' => '_googleTagManager',

     /*
     * Configures the Google Tag Manager script domain.
     * Modify this value only if you're using "Google Tag Manage: Web Container" client
     * to serve gtm.js for your web container. Else, keep the default value.
     */
    'domain' => 'www.googletagmanager.com',
];

在开发过程中，您不希望向生产环境的标签管理器账户发送数据，这正是enabled的作用所在。

示例设置

return [
    'id' => 'GTM-XXXXXX',
    'enabled' => env('APP_ENV') === 'production',
    'macroPath' => app_path('Services/GoogleTagManager/Macros.php'),
    'sessionKey' => '_googleTagManager',
    // Base domain used in your GTM server container
    'domain' => 'gtm.yourdomain.com',
];

用法

基本示例

首先，您需要包含Google Tag Manager的脚本。谷歌文档建议在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($product->toArray()) !!}' data-gtm-click>Product</a>

$('[data-gtm-click]').on('click', function(event) {
    event.preventDefault();
    var self = this;
    dataLayer.push({
        'event': 'productClick',
        'ecommerce': {
            'click': {
                'products': $(self).data('gtm-product')
            }
        },
        'eventCallback': function() {
            document.location = $(self).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);

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

更新日志

有关最近更改的详细信息，请参阅更新日志。

贡献

有关详细信息，请参阅贡献指南。

安全

如果您发现了关于安全性的错误，请通过 security@spatie.be 发送电子邮件，而不是使用问题跟踪器。

明信片软件

您可以使用这个包，但如果它进入您的生产环境，我们非常感谢您从家乡寄给我们一张明信片，提及您正在使用我们的哪个包。

我们的地址是：Spatie，Kruikstraat 22，2018 安特卫普，比利时。

我们将所有收到的明信片发布在我们的公司网站上。

致谢

许可协议

MIT 许可协议（MIT）。有关更多信息，请参阅许可文件。

spatie / laravel-googletagmanager

维护者

详细信息