layer-handler 0.1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: d02c8c0aa9fe11817dd6795199396c1d58649188
+  data.tar.gz: 93f672aa8198d8326b1d0f7bf19afd6942aa2132
+SHA512:
+  metadata.gz: d57837d71a721b43464859147b69253b62a614ad466bc97dcc63e65731715a3268b7e7b080b377a5322d8c48b6e9195579abcaae3ef71501e9fd99ca320ef891
+  data.tar.gz: d14064e3d46048f4b09b45511f04b313b3fe7cfa0b7a0991e42dd33db3e3dc9d612aab58046c93e116af03498eb832bf0d048b6a284275141e7e874c2711e2ce

data/.gitignore

@@ -0,0 +1 @@
+/node_modules

data/.travis.yml

@@ -0,0 +1,4 @@
+language: ruby
+rvm:
+  - 2.2.2
+before_install: gem install bundler -v 1.10.5

data/CHANGELOG.md

@@ -0,0 +1,7 @@
+0.1.0 / 2016-02-03
+==================
+  * Added more events to handle: contextmenu, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseover, mouseout, mouseup, keydown, keypress, keyup, abort, beforeunload, error, hashchange, load, pageshow, pagehide, resize, scroll, unload, blur, change, focus, focusin, focusout, input, invalid, reset, search, select, submit.
+
+0.0.1 / 2016-02-01
+==================
+  * First version. Only is handled click event.

data/Gemfile

@@ -0,0 +1,14 @@
+source 'https://rubygems.org'
+
+# Declare your gem's dependencies in layer-handler.gemspec.
+# Bundler will treat runtime dependencies like base dependencies, and
+# development dependencies will be added by default to the :development group.
+gemspec
+
+# Declare any dependencies that are still in development here instead of in
+# your gemspec. These might include edge Rails or gems from your path or
+# Git. Remember to move these dependencies to your gemspec before releasing
+# your gem to rubygems.org.
+
+# To use a debugger
+# gem 'byebug', group: [:development, :test]

data/Gemfile.lock

@@ -0,0 +1,17 @@
+PATH
+  remote: .
+  specs:
+    layer-handler (0.1.1)
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  layer-handler!
+
+BUNDLED WITH
+   1.12.5

data/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Ivan Gonzalez Saiz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,119 @@
+# 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 :)
+
+## 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:
+
+```
+<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>
+```
+
+```
+<a id="example2" href="#" data-gtm-mouseover='{"someKeyMouse": "hello", "otherKeyMouse": "bye"}'>Go over me!</a>
+```
+
+And so on...
+
+## 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`:
+
+```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).

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/bin/test

@@ -0,0 +1,9 @@
+#!/usr/bin/env ruby
+$: << File.expand_path(File.expand_path('../../test', __FILE__))
+
+require 'bundler/setup'
+require 'rails/test_unit/minitest_plugin'
+
+Rails::TestUnitReporter.executable = 'bin/test'
+
+exit Minitest.run(ARGV)

data/dist/layer-handler.min.js

@@ -0,0 +1 @@
+!function(a){var b={},c=[];a.LayerHandler=b,a.dataLayer=c,b.gtm_id=null,b.init=function(a){this.gtm_id=a,this.initDataLayer(),this.appendGTM(),this.bindEvents()},b.initDataLayer=function(){var a=document.getElementsByTagName("body")[0].getAttribute("data-gtm-page");this.pushData(a)},b.bindEvents=function(){for(var a=["click","contextmenu","dblclick","mousedown","mouseenter","mouseleave","mousemove","mouseover","mouseout","mouseup","keydown","keypress","keyup","abort","beforeunload","error","hashchange","load","pageshow","pagehide","resize","scroll","unload","blur","change","focus","focusin","focusout","input","invalid","reset","search","select","submit"],b=0;b<a.length;b++)this.bind(a[b])},b.bind=function(a){document.body.addEventListener(a,function(b){var c,d=b.target;do c=d.getAttribute("data-gtm-"+a),d=d.parentElement;while(d&&d.parentElement&&null===c);null!==c&&this.pushData(c)}.bind(this))},b.appendGTM=function(){var a=document.createElement("noscript"),b=document.createElement("iframe");b.setAttribute("src","//www.googletagmanager.com/ns.html?id="+this.gtm_id),b.setAttribute("height","0"),b.setAttribute("width","0"),b.setAttribute("style","display:none;visibility:hidden"),a.appendChild(b);var c=document.createElement("script");c.innerHTML="(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','"+this.gtm_id+"');";var d=document.head.firstChild,e=document.body.firstChild;d.parentNode.insertBefore(c,d),e.parentNode.insertBefore(a,e)},b.pushData=function(a){if(null!==a){var b=JSON.parse(a),d={};for(var e in b)d[e]=b[e];c.push(d)}}}(window);

data/gruntfile.js

@@ -0,0 +1,52 @@
+module.exports = function(grunt) {
+  'use strict';
+
+  var paths = {
+    dist: './dist',
+    src: './src/layer-handler.js'
+  };
+
+  grunt.initConfig({
+    pkg: require('./package'),
+
+    build: (function() {
+      var build = {};
+      build.scripts = ['jshint', 'uglify'];
+      return build;
+    })(),
+
+    jshint: {
+      files: paths.src
+    },
+
+    uglify: {
+      main: {
+        options: {
+          beautify: false
+        },
+        files: {
+          'dist/layer-handler.min.js': 'src/layer-handler.js',
+          'vendor/assets/javascripts/layer-handler/layer-handler.min.js': 'src/layer-handler.js'
+        }
+      }
+    },
+
+    watch: {
+      options: {
+        interrupt: true,
+        spawn: false
+      },
+      js: {
+        files: [paths.src],
+        tasks: ['uglify']
+      }
+    }
+  });
+
+  require('load-grunt-tasks')(grunt);
+
+  grunt.registerTask('default', ['uglify']);
+  grunt.registerTask('build', function() {
+    grunt.task.run(this.data);
+  });
+};

data/layer-handler.gemspec

@@ -0,0 +1,21 @@
+$:.push File.expand_path("../lib", __FILE__)
+
+# Maintain your gem's version:
+require "layer/handler/version"
+
+# Describe your gem and declare its dependencies:
+Gem::Specification.new do |s|
+  s.name        = "layer-handler"
+  s.version     = Layer::Handler::VERSION
+  s.authors     = ["Ivan Gonzalez"]
+  s.email       = ["xixon.sound@gmail.com"]
+  s.homepage    = "https://dreamingechoes.github.io/layer-handler/demo"
+  s.summary     = "Simple JS library to handle Google Tag Manager easily"
+  s.description = "Simple JS library to handle Google Tag Manager easily."
+  s.license     = "MIT"
+
+  s.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  s.bindir        = "exe"
+  s.executables   = s.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  s.require_paths = ["lib"]
+end

data/lib/generators/layer/handler/install_generator.rb

@@ -0,0 +1,14 @@
+module Layer
+  module Handler
+    module Generators
+      class InstallGenerator < Rails::Generators::Base
+        source_root File.expand_path("../templates", __FILE__)
+        desc "Creates LayerHandler initializer for your application"
+
+        def copy_initializer
+          template "layer_handler_initializer.rb", "config/initializers/layer_handler.rb"
+        end
+      end
+    end
+  end
+end

data/lib/generators/layer/handler/templates/layer_handler_initializer.rb

@@ -0,0 +1,4 @@
+Layer::Handler.configure do |config|
+  # Set this options to what makes sense for you
+  # config.gtm_id = 'GTM-YYYY'
+end

data/lib/layer/handler.rb

@@ -0,0 +1,31 @@
+module Layer
+  module Handler
+
+    class Engine < ::Rails::Engine
+      initializer "layer_handler.action_view" do |app|
+        ActiveSupport.on_load :action_view do
+          require_relative "handler/rails/view_helpers"
+          include Layer::Handler::ViewHelpers
+        end
+      end
+    end
+
+    class << self
+      attr_accessor :configuration
+    end
+
+    def self.configure
+      self.configuration ||= Configuration.new
+      yield(configuration)
+    end
+
+    class Configuration
+      attr_accessor :gtm_id
+
+      def initialize
+        @gtm_id = nil
+      end
+    end
+
+  end
+end

data/lib/layer/handler/rails/view_helpers.rb

@@ -0,0 +1,15 @@
+require 'active_support/core_ext/string/output_safety'
+
+module Layer
+  module Handler
+    module ViewHelpers
+
+      def init_layer_handler
+        content_tag :script do
+          "LayerHandler.init('#{Layer::Handler.configuration.gtm_id}');".html_safe
+        end.html_safe
+      end
+      
+    end
+  end
+end

data/lib/layer/handler/version.rb

@@ -0,0 +1,5 @@
+module Layer
+  module Handler
+    VERSION = '0.1.1'
+  end
+end

data/lib/tasks/layer/handler_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :layer_handler do
+#   # Task goes here
+# end

data/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "layer-handler",
+  "version": "0.1.1",
+  "description": "Simple JS library to handle Google Tag Manager easily.",
+  "main": "src/layer-handler.js",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:dreamingechoes/layer-handler.git"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "grunt": "^0.4.5",
+    "grunt-contrib-jshint": "^0.11.2",
+    "grunt-contrib-uglify": "^0.9.1",
+    "grunt-contrib-watch": "^0.6.1",
+    "load-grunt-tasks": "^3.2.0"
+  },
+  "keywords": [
+    "Google Tag Manager",
+    "GTM",
+    "Javascript"
+  ],
+  "author": "Ivan Gonzalez",
+  "license": "MIT"
+}

data/src/layer-handler.js

@@ -0,0 +1,84 @@
+(function(global) {
+  var LayerHandler = {},
+      dataLayer = [];
+
+  global.LayerHandler = LayerHandler;
+  global.dataLayer = dataLayer;
+
+  LayerHandler.gtm_id = null;
+
+  LayerHandler.init = function(gtm_id) {
+    this.gtm_id = gtm_id;
+    this.initDataLayer();
+    this.appendGTM();
+    this.bindEvents();
+  };
+
+  LayerHandler.initDataLayer = function() {
+    var data = document.getElementsByTagName('body')[0].getAttribute('data-gtm-page');
+    this.pushData(data);
+  };
+
+  LayerHandler.bindEvents = function() {
+    var events = ['click', 'contextmenu', 'dblclick', 'mousedown',
+                  'mouseenter', 'mouseleave', 'mousemove', 'mouseover',
+                  'mouseout', 'mouseup', 'keydown', 'keypress', 'keyup',
+                  'abort', 'beforeunload', 'error', 'hashchange', 'load',
+                  'pageshow', 'pagehide', 'resize', 'scroll', 'unload',
+                  'blur', 'change', 'focus', 'focusin', 'focusout',
+                  'input', 'invalid', 'reset', 'search', 'select', 'submit'];
+    for(var i = 0; i < events.length; i++) {
+      this.bind(events[i]);
+    }
+  };
+
+  LayerHandler.bind = function(eventToBind) {
+    document.body.addEventListener(eventToBind, function(event) {
+      var element = event.target,
+          data;
+
+      do {
+        data = element.getAttribute('data-gtm-' + eventToBind);
+        element = element.parentElement;
+      } while (element && element.parentElement && data === null);
+
+      if (data !== null) {
+        this.pushData(data);
+      }
+    }.bind(this));
+  };
+
+  LayerHandler.appendGTM = function() {
+    var gtm_no_script = document.createElement('noscript'),
+        gtm_no_script_iframe = document.createElement('iframe');
+
+    gtm_no_script_iframe.setAttribute('src', '//www.googletagmanager.com/ns.html?id=' + this.gtm_id);
+    gtm_no_script_iframe.setAttribute('height', '0');
+    gtm_no_script_iframe.setAttribute('width', '0');
+    gtm_no_script_iframe.setAttribute('style', 'display:none;visibility:hidden');
+    gtm_no_script.appendChild(gtm_no_script_iframe);
+
+    var gtm_script = document.createElement('script');
+    gtm_script.innerHTML = "(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','" + this.gtm_id + "');";
+
+    var appendHead = document.head.firstChild,
+        appendBody = document.body.firstChild;
+    appendHead.parentNode.insertBefore(gtm_script, appendHead);
+    appendBody.parentNode.insertBefore(gtm_no_script, appendBody);
+  };
+
+  LayerHandler.pushData = function(data) {
+    if(data !== null) {
+      var parsed_data = JSON.parse(data),
+          temp = {};
+      for(var key in parsed_data) {
+        temp[key] = parsed_data[key];
+      }
+      dataLayer.push(temp);
+    }
+  };
+})(window);

data/vendor/assets/javascripts/layer-handler/layer-handler.min.js

@@ -0,0 +1 @@
+!function(a){var b={},c=[];a.LayerHandler=b,a.dataLayer=c,b.gtm_id=null,b.init=function(a){this.gtm_id=a,this.initDataLayer(),this.appendGTM(),this.bindEvents()},b.initDataLayer=function(){var a=document.getElementsByTagName("body")[0].getAttribute("data-gtm-page");this.pushData(a)},b.bindEvents=function(){for(var a=["click","contextmenu","dblclick","mousedown","mouseenter","mouseleave","mousemove","mouseover","mouseout","mouseup","keydown","keypress","keyup","abort","beforeunload","error","hashchange","load","pageshow","pagehide","resize","scroll","unload","blur","change","focus","focusin","focusout","input","invalid","reset","search","select","submit"],b=0;b<a.length;b++)this.bind(a[b])},b.bind=function(a){document.body.addEventListener(a,function(b){var c,d=b.target;do c=d.getAttribute("data-gtm-"+a),d=d.parentElement;while(d&&d.parentElement&&null===c);null!==c&&this.pushData(c)}.bind(this))},b.appendGTM=function(){var a=document.createElement("noscript"),b=document.createElement("iframe");b.setAttribute("src","//www.googletagmanager.com/ns.html?id="+this.gtm_id),b.setAttribute("height","0"),b.setAttribute("width","0"),b.setAttribute("style","display:none;visibility:hidden"),a.appendChild(b);var c=document.createElement("script");c.innerHTML="(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','"+this.gtm_id+"');";var d=document.head.firstChild,e=document.body.firstChild;d.parentNode.insertBefore(c,d),e.parentNode.insertBefore(a,e)},b.pushData=function(a){if(null!==a){var b=JSON.parse(a),d={};for(var e in b)d[e]=b[e];c.push(d)}}}(window);

data/vendor/assets/javascripts/layer_handler.js

@@ -0,0 +1,13 @@
+// This is a manifest file that'll be compiled into bootstrap_sb_admin_base_v2.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file.
+//
+// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require ./layer-handler/layer-handler.min

metadata

@@ -0,0 +1,66 @@
+--- !ruby/object:Gem::Specification
+name: layer-handler
+version: !ruby/object:Gem::Version
+  version: 0.1.1
+platform: ruby
+authors:
+- Ivan Gonzalez
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2016-10-09 00:00:00.000000000 Z
+dependencies: []
+description: Simple JS library to handle Google Tag Manager easily.
+email:
+- xixon.sound@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- .travis.yml
+- CHANGELOG.md
+- Gemfile
+- Gemfile.lock
+- LICENSE
+- README.md
+- Rakefile
+- bin/test
+- dist/layer-handler.min.js
+- gruntfile.js
+- layer-handler.gemspec
+- lib/generators/layer/handler/install_generator.rb
+- lib/generators/layer/handler/templates/layer_handler_initializer.rb
+- lib/layer/handler.rb
+- lib/layer/handler/rails/view_helpers.rb
+- lib/layer/handler/version.rb
+- lib/tasks/layer/handler_tasks.rake
+- package.json
+- src/layer-handler.js
+- vendor/assets/javascripts/layer-handler/layer-handler.min.js
+- vendor/assets/javascripts/layer_handler.js
+homepage: https://dreamingechoes.github.io/layer-handler/demo
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.0.14
+signing_key: 
+specification_version: 4
+summary: Simple JS library to handle Google Tag Manager easily
+test_files: []