Code Monkey home page Code Monkey logo

php-datalayer's Introduction

PHP DataLayer

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

php-datalayer's People

Contributors

anthonypauwels avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.