README

Laravel 的 Google Tag Manager 集成

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

Laravel 4 版本: spatie/laravel4-googletagmanager

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

明信片软件

您可以自由使用这个包（它是 MIT 许可），但如果它进入了您的生产环境，您需要向我们寄一张来自您家乡的明信片，说明您正在使用我们哪个包。

我们的地址是：Spatie，Samberstraat 69D，2060 安特卫普，比利时。

最佳明信片将发布在我们的网站上开源页面。

Google Tag Manager

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

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

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

安装

您可以通过 Composer 安装此包

$ composer require spatie/laravel-googletagmanager

首先注册包的服务提供者和外观

// config/app.php

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

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

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

接下来，发布配置文件

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

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

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

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

// app/Http/Kernel.php

    protected $middleware = [
        ...
        'Spatie\GoogleTagManager\GoogleTagManagerMiddleware',
        ...
    ];

配置

配置文件相当简单。

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>
  {{-- ... --}}
  <body>
    @include('googletagmanager::script')
    {{-- ... --}}
  </body>
</html>

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

// HomeController.php

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

    return view('home');
}

这将渲染

<html>
  <!-- ... -->
  <body>
    <script>dataLayer = [{"pageType":"productDetail"}];</script>
    <script>/* Google Tag Manager's script */</script>
    <!-- ... -->
  </body>
</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>
  <!-- ... -->
  <body>
    <script>dataLayer = [{"pageType":"contact","formResponse":"success"}];</script>
    <script>/* Google Tag Manager's script */</script>
    <!-- ... -->
  </body>
</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 als 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);

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

变更日志

有关最近更改的更多信息，请参阅变更日志。

贡献

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

安全性

如果您发现任何与安全相关的问题，请通过电子邮件freek@spatie.be联系，而不是使用问题跟踪器。

鸣谢

关于 Spatie