{"id":21966408,"url":"https://github.com/dreamingechoes/layer-handler","last_synced_at":"2025-04-24T05:08:28.812Z","repository":{"id":56880811,"uuid":"50913450","full_name":"dreamingechoes/layer-handler","owner":"dreamingechoes","description":"Simple JS library to handle Google Tag Manager easily.","archived":false,"fork":false,"pushed_at":"2016-10-11T08:33:55.000Z","size":620,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-24T05:08:18.482Z","etag":null,"topics":["datalayer","gtm","js-library","rails-gem"],"latest_commit_sha":null,"homepage":"https://dreamingechoes.github.io/layer-handler/demo","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dreamingechoes.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-02T10:37:46.000Z","updated_at":"2020-02-15T07:47:38.000Z","dependencies_parsed_at":"2022-08-20T22:31:14.823Z","dependency_job_id":null,"html_url":"https://github.com/dreamingechoes/layer-handler","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamingechoes%2Flayer-handler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamingechoes%2Flayer-handler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamingechoes%2Flayer-handler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamingechoes%2Flayer-handler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dreamingechoes","download_url":"https://codeload.github.com/dreamingechoes/layer-handler/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250566511,"owners_count":21451232,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["datalayer","gtm","js-library","rails-gem"],"created_at":"2024-11-29T13:15:59.529Z","updated_at":"2025-04-24T05:08:28.761Z","avatar_url":"https://github.com/dreamingechoes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# LayerHandler\n\nLayerHandler is a (work in progress) simple JS library to handle Google Tag Manager easily.\n\nIt 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 :)\n\n## Table of contents\n\n* [Usage](#usage)\n  * [Bind Event](#bind-event)\n* [Rails Gem](#rails-gem)\n* [TODO](#todo)\n* [Contributing](#contributing)\n* [License](#license)\n\n## Usage\n\nCopy the `dist/layer-handler.min.js` file into your JS assets folder.\n\nThe 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.\n\nFill the **data-gtm-page** attribute on the **body** tag to initialize the **dataLayer** like this:\n\n```\n\u003cbody data-gtm-page='{\"someKeyOnBody\": \"hello\", \"otherKeyOnBody\": \"bye\"}'\u003e \u003c/body\u003e\n```\n\nThis will initialize your **dataLayer** object with this info:\n\n```\n{\"someKeyOnBody\": \"hello\", \"otherKeyOnBody\": \"bye\"}\n```\n\nAnd in all the **HTML** tags you want to track, like this:\n\n```\n\u003ca href=\"#\" data-gtm-click='{\"someKey\": \"hello\", \"otherKey\": \"bye\"}'\u003eHello!\u003c/a\u003e\n```\n\nThen simply add the **js** file to your page, and execute the **init** method passing your **GTM-ID** like this:\n\n```\nLayerHandler.init(\"YOUR_GTM_ID_HERE\");\n```\n\n\u003e ALERT! It's important to use use simple quotes to wrap the **data-gtm-*** info to be able to parse the data properly.\n\n### Bind Event\n\nIf 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!\n\nHere some examples of use:\n\n```\n\u003ca id=\"example1\" href=\"#\" data-gtm-click='{\"someKey\": \"hello\", \"otherKey\": \"bye\"}'\u003eClick me!\u003c/a\u003e\n```\n\n```\n\u003ca id=\"example2\" href=\"#\" data-gtm-mouseover='{\"someKeyMouse\": \"hello\", \"otherKeyMouse\": \"bye\"}'\u003eGo over me!\u003c/a\u003e\n```\n\nAnd so on...\n\n## Rails Gem\n\n[![Gem Version](https://badge.fury.io/rb/layer-handler.svg)](https://badge.fury.io/rb/layer-handler)\n\nIf 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:\n\nAdd this line to your application's `Gemfile`:\n\n```ruby\ngem 'layer-handler'\n```\n\nAnd then execute:\n\n```\n$ bundle\n```\n\nOr install it yourself:\n\n```\n$ gem install layer-handler\n```\n\nAfter install the gem, add this into your `application.js` file:\n\n```ruby\n  //= require layer_handler\n```\n\nThen create the initializer of the gem by executing:\n\n```\nrails g layer:handler:install\n```\n\nAnd edit the `gtm_id` config option on the new  `config/initializer/layer_handler.rb` file.\n\nAnd there you have it. Just put this line at the end of your Rails layout and you're ready to go:\n\n```\n\u003c%= init_layer_handler %\u003e\n```\n\nNow you can use the **JS library** as usual.\n\n## TODO\n\n- Tests!\n- Add more events\n\n## Contributing\n\nBug 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.\n\n## License\n\n**LayerHandler** is released under the terms of the [MIT License](http://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdreamingechoes%2Flayer-handler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdreamingechoes%2Flayer-handler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdreamingechoes%2Flayer-handler/lists"}