README

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

Data can be stored in session, like in a conversion funnel process, and be printed on the last page before being cleared.

Installation

Require this package with composer.

composer require Straylightagency/datalayer

Laravel without auto-discovery:

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

Straylightagency\DataLayer\Laravel\DataLayerServiceProvider::class,

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

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

Finally, add your GTM-ID in your .env file :

GOOGLE_TAG_MANAGER_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 Straylightagency\DataLayer\DataLayerManager;
use Straylightagency\DataLayer\SessionHandler;

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

A static method is available to create a new instance using the basic session handler

use Straylightagency\DataLayer\DataLayerManager;

$datalayer = DataLayerManager::newUsingBasicSession('GTM-XXXXXXXX');

With Laravel

The package handles initialization and configuration from the service provider.

You can call methods from DataLayerManager directly using the Facade DataLayer or use the alias instead.

use Straylightagency\DataLayer\Laravel\DataLayer;

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

API documentation

Examples bellow are using Laravel Facade DataLayer.

In your controllers

Set one value in the DataLayer

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

Set an array of data in the DataLayer

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

Both methods can be chained :

DataLayer::with('foo', 'bar')
        ->withArray( [
            'user_name' => 'John Doe',
            'age' => '42',
            'country' => 'Belgium',
        ] )
        ->with('name', 'value');

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 <HEAD> tag.

DataLayer::print();

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::printNoScript() right after your <BODY> tag :

DataLayer::printNoScript();

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 named parameters 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::print(
    init: false,
    clear: false,
    script: false,
);

It will just print this :

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

Push an array of data in the DataLayer

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

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

$data = DataLayer::getData();
$data = DataLayer::data(); # alias of the getData method

Print the global JS object in the view

echo 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.

echo DataLayer::script([gtm_id: null|string = 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 <noscript> tag with noScript :

echo DataLayer::noScript([gtm_id: null|string = null]);

... or use printNoScript :

DataLayer::printNoScript([gtm_id: null|string = 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::dump();

straylightagency / datalayer

Maintainers

Package info

Statistics

Security