README

请考虑使用 https://github.com/spatie/laravel-googletagmanager。

Laravel 的 Google Tag Manager 集成

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

Laravel 4 版本: spatie/laravel4-googletagmanager

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

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

在 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"

如果您计划使用 flash-functionality，必须在 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');
}

表单提交后，以下的数据层将在联系页面解析

<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');
        }
    });
});

数据层

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，Samberstraat 69D，2060 安特卫普，比利时。

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

致谢

支持我们

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

您的业务依赖于我们的贡献吗？请与我们联系，并在 Patreon 上支持我们。所有承诺都将专门用于分配人力资源进行维护和开发新功能。

许可

MIT 许可证 (MIT)。请参阅许可文件获取更多信息。

cyber-duck / laravel-google-tag-manager

维护者

详细信息