label84/laravel-tagmanager

Easier way to add Google Tag Manager to your Laravel application.

v1.4.0 2024-02-24 19:44 UTC

This package is auto-updated.

Last update: 2024-10-25 20:38:25 UTC


README

Latest Stable Version MIT Licensed Total Downloads

Easier way to add Google Tag Manager to your Laravel application. Including support for User-ID, E-commerce and Server Side Events (Measurement Protocol).

Laravel support

Installation

Read the article on Medium.com for a more detailed instruction: Medium: Add Google Analytics to your Laravel application with Google Tag Manager.

1. Install package

Install the package

composer require label84/laravel-tagmanager

2. Add the head and body tag to your (layout) view

Add the head tag directly above the closing </head> tag and the body tag directly after the opening <body> tag.

    <x-tagmanager-head />
</head>

<body>
    <x-tagmanager-body />

3. Add the TagManagerMiddleware to your Kernel

Add the TagManagerMiddleware directly after the StartSession middleware in your 'web' middleware group.

// app/Http/Kernel.php

protected $middlewareGroups = [
    'web' => [
        \App\Http\Middleware\EncryptCookies::class,
        ...
        \Illuminate\Session\Middleware\StartSession::class,
        \Label84\TagManager\Http\Middleware\TagManagerMiddleware::class,
        ...

4. Publish the config file

Publish the config file. This will generate a tagmanager.php file in your config directory.

php artisan vendor:publish --provider="Label84\TagManager\TagManagerServiceProvider" --tag="config"

5. Add your GTM ID to your .env

// .env

GOOGLE_TAG_MANAGER_ID=GTM-XXXXXX
GOOGLE_TAG_MANAGER_ENABLED=true

Go to https://tagmanager.google.com and copy the 'Container ID' of the account (it looks like GTM-XXXXXXX).

Usage

use Label84\TagManager\Facades\TagManager;

TagManager::push(['foo' => 'bar']);

Events

You can also use the following methods. These will automatically set the correct event key and value.

use Label84\TagManager\Facades\TagManager;

TagManager::event('kissed', ['status' => 'failed', 'count' => 0]);
TagManager::login(['foo' => 'bar']);
TagManager::register(['foo' => 'bar']);

You can find a list of recommended events on: https://support.google.com/analytics/answer/9267735?hl=en

User-ID

This package also supports the User-ID feature.

To start using the User-ID feature you've to add the TagManagerUserIdMiddleware in your 'web' middleware group directly after the TagManagerMiddleware.

// app/Http/Kernel.php

protected $middlewareGroups = [
    'web' => [
        ...
        \Label84\TagManager\Http\Middleware\TagManagerMiddleware::class,
        \Label84\TagManager\Http\Middleware\TagManagerUserIdMiddleware::class,
        ...

By default the 'id' of the User model will be used. You change the key in config/tagmanager.php.

More information: https://developers.google.com/analytics/devguides/collection/ga4/user-id?technology=tagmanager

Ecommerce (GA4)

You can use the following snippets to trigger an Ecommerce event with Google Analytics 4 (GA4).

Ecommerce item

The TagManagerItem class allows you to easily create an Ecommerce item. You can set extra parameters with dynamic calls. Method names are used as keys and automatically converted to underscore case.

use Label84\TagManager\TagManagerItem;

new TagManagerItem(string $id, string $name, float $price, float $quantity);
Example: create item
use Label84\TagManager\TagManagerItem;

$item1 = new TagManagerItem('12345', 'Triblend Android T-Shirt', 15.25, 1);
$item1->itemBrand('Google')       // will add the item parameter { item_brand: 'Google' }
      ->itemCategory('Apparel')   // will add the item parameter { item_category: 'Apparel' }
      ->itemVariant('Gray');      // will add the item parameter { item_variant: 'Gray' }

Ecommerce events

The items parameter can be a single TagManagerItem item or an array of TagManagerItem items. You can also use plain arrays if you don't want to use the TagManagerItem class.

use Label84\TagManager\Facades\TagManager;

// Product views and interactions
TagManager::viewItemList($items);
TagManager::viewItem($items);
TagManager::selectItem($items);

// Promotion views and interactions
TagManager::viewPromotion($items);
TagManager::selectPromotion($items);

// Pre-purchase interactions
TagManager::addToWishList(string $currency, float $value, $items);
TagManager::addToCart($items);
TagManager::removeFromCart($items);
TagManager::viewCart(string $currency, float $value, $items);

// Purchases, checkouts, and refunds
TagManager::beginCheckout($items);
TagManager::addPaymentInfo(string $currency, float $value, string $paymentType, $items, string $coupon = '');
TagManager::addShippingInfo(string $currency, float $value, string $shippingTier, $items, string $coupon = '');
TagManager::purchase(string $transactionId, string $affiliation, string $currency, float $value, float $tax, float $shipping, $items, string $coupon = '');
TagManager::refund(string $transactionId, string $affiliation, string $currency, float $value, float $tax, float $shipping, $items, string $coupon = '');
Example: call event with item
use Label84\TagManager\Facades\TagManager;

TagManager::purchase('00001', 'Google', 'EUR', 12.10, 2.10, 0, [
    new TagManagerItem('12345', 'Triblend Android T-Shirt', 10.00, 1),
]);

More information: https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtm

Server Side Events

The Google Analytics Measurement Protocol allows developers to make HTTP requests to send raw user interaction data directly to Google Analytics servers. This allows developers to measure how users interact with their business from almost any environment. Developers can then use the Measurement Protocol to:

  • Measure user activity in new environments.
  • Tie online to offline behavior.
  • Send data from both the client and server.

Measurement Protocol

You need complete the general installation steps first, such as adding the .env variables, adding the head and body tags to your layout file and adding the TagManagerMiddleware.

Add the following extra variables to your .env file.

// .env

# Found in the Google Analytics UI under Admin > Data Streams > choose your stream > Measurement ID. The measurement_id isn't your Stream ID.
GOOGLE_MEASUREMENT_ID=G-XXXXXX
# Found in the Google Analytics UI under Admin > Data Streams > choose your stream > Measurement Protocol API Secrets
GOOGLE_MEASUREMENT_PROTOCOL_API_SECRET=XXXXXX

Add the following snippet to the head of your blade layout file (below the existing x-tagmanager-head tag).

    <x-tagmanager-head />
    <x-tagmanager-measurement-protocol-client-id />
</head>

<body>
use Label84\TagManager\Facades\MeasurementProtocol;

MeasurementProtocol::event('some_event', ['foo' => 'bar']);

// Set a specific User-ID for this event (you can customize the key in the config file)
MeasurementProtocol::user($someUser)->event('some_event', ['foo' => 'bar']);

You can view the events directly in the Google Analytics UI under Realtime > Events.

Measurement Protocol Debug Mode

You can enable the debug mode by calling the debug() method. This will return a JSON validation response instead of sending the request to Google Analytics. If there are any errors, they will be returned in the validation messages response. If there are no errors, the validation response array will be empty.

use Label84\TagManager\Facades\MeasurementProtocol;

dd(
    MeasurementProtocol::debug()->event('some_event', ['foo' => 'bar'])
);

Tests

./vendor/bin/phpstan analyze

License

MIT