lexik/data-layer-bundle

Manipulate the Google Tag Manager Data Layer from your Symfony application.

v1.1.1 2018-02-25 15:50 UTC

Requires

• symfony/framework-bundle: ~2.7|~3.0|~4.0
• symfony/security-bundle: ~2.7|~3.0|~4.0
• twig/twig: ~1.0|~2.0

Requires (Dev)

• symfony/phpunit-bridge: ~3.3
• symfony/yaml: ^2.7|^3.0|^4.0

MIT

• Dev Lexik
• Nicolas Cabot

• symfony
• bundle
• analytics
• google
• tag manager
• data layer

README

Manipulate the Google Tag Manager Data Layer from your Symfony application. This bundle is compatible Symfony 2.7+, 3.0+ and 4.0+ and PHP 5.4+ to 7.0+.

Installation

Add lexik/data-layer-bundle to your composer.json file:

composer require "lexik/data-layer-bundle"

Register the bundle in app/AppKernel.php:

public function registerBundles()
{
    return array(
        // ...
        new Lexik\Bundle\DataLayerBundle\LexikDataLayerBundle(),
    );
}

Adding informations to the Data Layer

To pass informations to the Data Layer use the lexik_data_layer.manager.data_layer_manager service directly.

Event / Session Data

Use case

Notify an application event that could be used as goal or conversion like a user registration.

Usage

Get the service lexik_data_layer.manager.data_layer_manager and pass an associative array to it's add() method, it will be stored in session until it is passed to a page. Much like a Flash Message.

Using sessions as storage allows you to notify of an event even after a redirect for example.

Example usage from an EventListener to notify a user registration :

<?php

namespace AppBundle\Listener;

use Lexik\Bundle\DataLayerBundle\Manager\DataLayerManager;

/**
 * UserEventListener
 */
class UserEventListener
{
    /**
     * @var DataLayerManager
     */
    protected $manager;

    /**
     * @param DataLayerManager $manager
     */
    public function __construct(DataLayerManager $manager)
    {
        $this->manager = $manager;
    }

    /**
     * onUserRegistration
     */
    public function onUserRegistration()
    {
        $this->manager->add(['registration' => true]);
    }
}

<service id="app.listener.user_event_listener" class="AppBundle\Listener\UserEventListener">
    <argument type="service" id="lexik_data_layer.manager.data_layer_manager" />
    <tag name="kernel.event_listener" event="fos_user.registration.completed" method="onUserRegistration" />
</service>

Default Data

Use case

Set the user id on every page for example.

Usage example

Create a service implementing the Lexik\Bundle\DataLayerBundle\Collector\CollectorInterface and tag it using the lexik_data_layer.collector tag.

It's handle method will be passed the current Data Layer array, which you can modify by adding or modifying its values.

<?php

namespace Lexik\Bundle\DataLayerBundle\Collector;

use Symfony\Component\Security\Core\Authentication\Token\Storage\TokenStorageInterface;
use Symfony\Component\Security\Core\User\UserInterface;

/**
 * UserIdCollector
 */
class UserIdCollector implements CollectorInterface
{
    /**
     * @var TokenStorageInterface
     */
    protected $tokenStorage;

    /**
     * @param TokenStorageInterface $tokenStorage
     */
    public function __construct(TokenStorageInterface $tokenStorage)
    {
        $this->tokenStorage = $tokenStorage;
    }

    /**
     * {@inheritdoc}
     */
    public function handle(&$data)
    {
        $token = $this->tokenStorage->getToken();

        if ($token->getUser() && $token->getUser() instanceof UserInterface) {
            $data[] = ['user_id' => md5($token->getUser()->getUsername())];
        }
    }
}

<service id="lexik_data_layer.collector.user_id" class="Lexik\Bundle\DataLayerBundle\Collector\UserIdCollector">
    <argument type="service" id="security.token_storage" />
    <tag name="lexik_data_layer.collector" />
</service>

Adding / Writing Data Layer variables to the page

Use the provided lexik_data_layer() twig function to write the Data Layer value to a page template. This will automatically reset the Data Layer informations stored in session.

Don't forget to use it BEFORE you insert the Tag Manager tag.

<body>
  <script>
    var dataLayer = {{ lexik_data_layer() }};
  </script>
  <!-- Google Tag Manager -->
  ...
  <!-- End Google Tag Manager -->

Testing

Setup the test suite using Composer:

$ composer install

Run it using PHPUnit:

$ vendor/bin/phpunit

Contributing

See CONTRIBUTING file.

Credits

• Nicolas Cabot [e-mail]
• Lexik [e-mail]
• All contributors

License

This bundle is under the MIT license. See the complete license in the bundle:

Resources/meta/LICENSE