About

LayerHandler is a simple JS library to handle Google Tag Manager easily.

It initializes the GTM dataLayer object, appends to your HTML body tag the GTM script code, and binds the specific events to all the HTML tags that have the data-gtm-* data attribute, pushing automatically the content of this data attribute to the dataLayer object. And all in one and little javascript library of less than 2Kb minified :)

Feel free to share it, use it, fork it, clone it on Github... whatever you want!

Usage

The library works with one basic special data attribute: data-gtm-*. It search through all the HTML elements of your page to find this attribute, and binds the events and push the data you want.

Fill the data-gtm-page attribute on the body tag to initialize the dataLayer like this: 

 <body data-gtm-page='{"someKeyOnBody": "hello", "otherKeyOnBody": "bye"}'> </body>

This will initialize your dataLayer object with this info: 

 {"someKeyOnBody": "hello", "otherKeyOnBody": "bye"}

And in all the HTML tags you want to track, like this: 

 <a href="#" data-gtm-click='{"someKey": "hello", "otherKey": "bye"}'>Hello!</a>

Then simply add the js file to your page, and execute the init method passing your GTM-ID like this: 

 LayerHandler.init("YOUR_GTM_ID_HERE");

ALERT! It's important to use use simple quotes to wrap the data-gtm-* info to be able to parse the data properly.

Bind Event

If you want to bind some event on any tag to push certain data into the dataLayer object, you just have to give the special data attribute data-gtm-* to this tag with the content you want to push to the dataLayer on the event, and voila! There you have it!

Here some examples of use: 

 <a id="example1" href="#" data-gtm-click='{"someKey": "hello", "otherKey": "bye"}'>Click me!</a>

Try: Click me! 

 <a id="example2" href="#" data-gtm-mouseover='{"someKeyMouse": "hello", "otherKeyMouse": "bye"}'>Move the mouse over me!</a>

Try: Move the mouse over me!

And so on...

Events

Here are a list of all the events that are handled right now. DOM Indicates in which DOM Level the property was introduced.

Mouse Events

Event Description DOM
click The event occurs when the user clicks on an element 2
contextmenu The event occurs when the user right-clicks on an element to open a context menu 3
dblclick The event occurs when the user double-clicks on an element 2
mousedown The event occurs when the user presses a mouse button over an element 2
mouseenter The event occurs when the pointer is moved onto an element 2
mouseleave The event occurs when the pointer is moved out of an element 2
mousemove The event occurs when the pointer is moving while it is over an element 2
mouseover The event occurs when the pointer is moved onto an element, or onto one of its children 2
mouseout The event occurs when a user moves the mouse pointer out of an element, or out of one of its children 2
mouseup The event occurs when a user releases a mouse button over an element 2

Keyboard Events

Event Description DOM
keydown The event occurs when the user is pressing a key 2
keypress The event occurs when the user presses a key 2
keyup The event occurs when the user releases a key 2

Frame/Object Events

Event Description DOM
abort The event occurs when the loading of a resource has been aborted 2
beforeunload The event occurs before the document is about to be unloaded 2
error The event occurs when an error occurs while loading an external file 2
hashchange The event occurs when there has been changes to the anchor part of a URL 3
load The event occurs when an object has loaded 2
pageshow The event occurs when the user navigates to a webpage 3
pagehide The event occurs when the user navigates away from a webpage 3
resize The event occurs when the document view is resized 2
scroll The event occurs when an element's scrollbar is being scrolled 2
unload The event occurs once a page has unloaded (for <body>) 2

Form Events

Event Description DOM
blur The event occurs when an element loses focus 2
change The event occurs when the content of a form element, the selection, or the checked state have changed (for <input>, <keygen>, <select>, and <textarea>) 2
focus The event occurs when an element gets focus 2
focusin The event occurs when an element is about to get focus 2
focusout The event occurs when an element is about to lose focus 2
input The event occurs when an element gets user input 3
invalid The event occurs when an element is invalid 3
reset The event occurs when a form is reset 2
search The event occurs when the user writes something in a search field (for <input="search">) 3
select The event occurs after the user selects some text (for <input> and <textarea>) 2
submit The event occurs when a form is submitted 2
And more to come in the future! :)

Rails Gem

If you want to use this JS library with a Rails application, you have available the corresponding gem in order to do it more conveniently. Just follow this simple steps:

Add this line to your application’s Gemfile: 

gem 'layer-handler'

And then execute: 

$ bundle

Or install it yourself: 

$ gem install layer-handler

After install the gem, add this into your application.js file: 

  //= require layer_handler

Then create the initializer of the gem by executing: 

rails g layer:handler:install

And edit the gtm_id config option on the new config/initializer/layer_handler.rb file. And there you have it. Just put this line at the end of your Rails layout and you’re ready to go: 

<%= init_layer_handler %>

Now you can use the JS library as usual.