anthonypauwels/datalayer

A helper package that help to generate Google's DataLayer script on pages

0.1.2 2024-01-24 22:03 UTC

Requires

• php: ^8.0

MIT

• Anthony Pauwels

• google
• tags
• helper
• gtm
• datalayer

README

A helper package that help to generate Google's DataLayer script on pages.

Installation

Require this package with composer.

composer require anthonypauwels/datalayer

Laravel without auto-discovery:

If you do not use auto-discovery, add the ServiceProvider to the providers array in config/app.php :

Anthonypauwels\DataLayer\Laravel\ServiceProvider::class,

Then add this line to your facades in config/app.php :

'DataLayer' => Anthonypauwels\DataLayer\Laravel\DataLayer::class,

Finally, add your GTM-ID in config/datalayer.php.

<?php
return [
    'gtm_id' => 'GTM-XXXXXXXX'
];

Usage

Without Laravel

You must create a SessionHandler object. Handler uses session to pass data through pages. Then you can pass the SessionHandler to the DataLayerHandler using the constructor :

use Anthonypauwels\DataLayer\DataLayerHandler;
use Anthonypauwels\DataLayer\SessionHandler;

$datalayer = new DataLayerHandler( 
                new SessionHandler(), 
                'GTM-XXXXXXXX'
            );

With Laravel

The package provides by default a Facade for Laravel application. You can call methods directly using the Facade or use the alias instead.

use Anthonypauwels\DataLayer\Laravel\DataLayer;

DataLayer::push('foo', 'bar');

API documentation

Examples bellow are using Laravel Facade DataLayer.

In your controllers

Push one value in the DataLayer

DataLayer::push('foo', 'bar');

Push an array of data in the DataLayer

DataLayer::pushArray([
    'user_name' => 'John Doe',
    'age' => '42',
    'country' => 'Belgium',
]);

Do not hesitate to check the prototype of the method to view all possibles options.

In your views

Publish the DataLayer in the view

Just call this method in your app layout before the closing tag.

DataLayer::publish();

It will print this entire HTML code in your layout :

<script>
    dataLayer = dataLayer || [];
</script>

<script>
    dataLayer.push({foo:'bar',user_name:'John Doe',age:42,country:'Belgium'});
</script>

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXXX');</script>
<!-- End Google Tag Manager -->

Do not forget to call DataLayer::noScript() right after your tag :

DataLayer::noScript();

It will print the following :

<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

You can use an optional array to choose if you do not want to initialise the global JS object, initialise the Google Tag Manager script or to clear data after publish.

DataLayer::publish(['init' => false, 'script' => false, 'clear' => false]);

It will just print this :

<script>
    dataLayer.push({foo:'bar',user_name:'John Doe',age:42,country:'Belgium'});
</script>

Blade directives

If you use DataLayerHandler with Laravel, you can use custom Blade directives to insert codes into the view without using the facade directly :

@datalayerInit()

instead of

{{ DataLayer::init() }}

@datalayerScript()

instead of

{{ DataLayer::script() }}

@datalayerNoScript()

instead of

{{ DataLayer::noScript() }}

@datalayerPublish()

instead of

{{ DataLayer::publish() }}

@datalayerPush([
    'user_name' => 'John Doe',
])

instead of

{{ DataLayer::pushData([
    'user_name' => 'John Doe',
]) }}

The DataLayer is cleared after each call to the DataLayer::publish() method except if the option clear is set to false.

Push an array of data in the DataLayer

DataLayer::pushData([
    'user_name' => 'John Doe',
    'age' => '42',
    'country' => 'Belgium',
]);

Others methods

Load the data from session

DataLayer::load();

Save the data in the session

DataLayer::save();

Clear the data in the session

DataLayer::clear();

Get the array data

DataLayer::getData();

Print the global JS object in the view

DataLayer::init();

It will print this in the HTML :

<script>
    window.dataLayer = window.dataLayer || [];
</script>

Print the Google Tag Manager script in the view

The $gtm_id parameter is optional. If omitted, it will use the Google ID set in your .env file.

DataLayer::script([$gtm_id = null]);

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXXX');</script>
<!-- End Google Tag Manager -->

Also, do not forget to add the tag with.

DataLayer::noScript([$gtm_id = null]);

<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

Show the content of the DataLayer (debug purpose)

DataLayer::dd();

Requirement

PHP 8.0 or above

See also

• Dev Guide
• Quick Start