https://github.com/dreamingechoes/layer-handler
Simple JS library to handle Google Tag Manager easily.
https://github.com/dreamingechoes/layer-handler
datalayer gtm js-library rails-gem
Last synced: 6 months ago
JSON representation
Simple JS library to handle Google Tag Manager easily.
- Host: GitHub
- URL: https://github.com/dreamingechoes/layer-handler
- Owner: dreamingechoes
- License: mit
- Created: 2016-02-02T10:37:46.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-10-11T08:33:55.000Z (about 9 years ago)
- Last Synced: 2025-04-24T05:08:18.482Z (6 months ago)
- Topics: datalayer, gtm, js-library, rails-gem
- Language: JavaScript
- Homepage: https://dreamingechoes.github.io/layer-handler/demo
- Size: 605 KB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# LayerHandler
LayerHandler is a (work in progress) 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 :)
## Table of contents
* [Usage](#usage)
* [Bind Event](#bind-event)
* [Rails Gem](#rails-gem)
* [TODO](#todo)
* [Contributing](#contributing)
* [License](#license)
## Usage
Copy the `dist/layer-handler.min.js` file into your JS assets folder.
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:
```
```
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:
```
Hello!
```
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:
```
Click me!
```
```
Go over me!
```
And so on...
## Rails Gem
[](https://badge.fury.io/rb/layer-handler)
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`:
```ruby
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:
```ruby
//= 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.
## TODO
- Tests!
- Add more events
## Contributing
Bug reports and pull requests are welcome on GitHub at https://github.com/dreamingechoes/layer-handler. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](contributor-covenant.org) code of conduct.
## License
**LayerHandler** is released under the terms of the [MIT License](http://opensource.org/licenses/MIT).