alibaba-archive · sailxjx · Aug 13, 2013 · Aug 13, 2013 · Aug 13, 2013
diff --git a/Cakefile b/Cakefile
@@ -1 +1,7 @@
-require('cake-dog')
+fs = require 'fs'
+{exec} = require 'child_process'
+
+task 'build', 'build the source code to javascript', (options) ->
+  exec 'coffee --compile --output lib/ src/', (err, stdout, stderr) ->
+    throw err if err
+    console.log 'build process complete without error, chekcout lib directory'
diff --git a/README.md b/README.md
@@ -2,11 +2,12 @@
 
 # Usage
 
+First, use bower to install gta:
 ```
 bower install gta
 ```
 
-include in html
+Then, include the following script in your html and you are ready to go:
 
 ```
 <script src="bower_component/gta/lib/index.js"></script>
@@ -19,18 +20,34 @@ include in html
             account: 'ec912ecc405ccd050e4cdf452ef4e85a'
         }
     });
+</script>
+```
 
-    // track pageview
-    gta.pageview({  // use single object
-        'page': '/my-overridden-page?id=1',
-        'title': 'my overridden page'
-    })
-    gta.pageview('/api/hello', '?world'); // use multiple string
+# Page View
 
-    // track event
-    gta.event('button', 'click', 'nav buttons', 4)  //@params: category, action, label, value
-</script>
+Call the `pageview` function to record a new page view:
+```
+// use single object
+gta.pageview({  
+    'page': '/my-overridden-page?id=1',
+    'title': 'my overridden page'
+})
+
+// use multiple string
+gta.pageview('/api/hello', '?world'); 
+```
+
+# Events
+
+You can call the `event` function to track an event:
+```
+gta.event('button', 'click', 'nav buttons', 4)  //@params: category, action, label, value
+```
+Or, easily add `data-gta='event'` to a dom element as:
+```
+<button data-gta='event' data-label='clicked a button' data-action='click' data-category='button'>click</button>
 ```
+If `data-label` `data-action` `data-category` `data-value` is not provided then `className` `event type` `tagName` and `html` will be used instead.
 
 # Api Documents
 

diff --git a/bower.json b/bower.json
@@ -9,5 +9,7 @@
     "test",
     "tests"
   ],
-  "dependencies": {}
+  "dependencies": {
+    "jquery": "~2.0.3"
+  }
 }
diff --git a/lib/index.js b/lib/index.js
diff --git a/src/index.coffee b/src/index.coffee
@@ -8,6 +8,7 @@ class Gta
     for provider, option of options
       Provider = Gta["#{provider[0].toUpperCase()}#{provider[1..]}"]
       @providers[provider] = new Provider(option) if Provider?
+    @delegateEvents() if window.jQuery 
 
   pageview: ->
     for name, provider of @providers
@@ -19,6 +20,16 @@ class Gta
       provider.event.apply(provider, arguments)
     return this
 
+  delegateEvents: ->
+    $(document).on('click.gta', '[data-gta="event"]', (e) =>
+      $target = $(e.currentTarget)
+      category = $target.data('category') or $target[0].tagName
+      label = $target.data('label') or $target[0].className
+      action = $target.data('action') or e.type
+      value = $target.data('value') or $target.html()
+      @event(category, action, label, value)
+    )
+
   @appendScript: (script) ->
     dom = document.createElement('script')
     text = document.createTextNode(script)

diff --git a/test/index.html b/test/index.html
@@ -8,10 +8,12 @@
                 font-family: Monaco;
             }
         </style>
-        <script src="http://sailxjx.local.com/teambition/gta/lib/index.js"></script>
+        <script type="text/javascript" src="../bower_components/jquery/jquery.js"></script>
+        <script src="../lib/index.js"></script>
     </head>
     <body>
         hello world
+        <button data-gta='event' data-label='clicked a button'>click</button>
         <script>
             gta = new Gta({
                 Google: {
@@ -24,8 +26,9 @@
             gta.pageview({
                 'page': '/my-overridden-page?id=1',
                 'title': 'my overridden page'
-            })
-            gta.event('button', 'click', 'nav buttons', 4)
+            });
+            gta.event('button', 'click', 'nav buttons', 4);
+            $('body').append('<button data-gta="event" data-label="clicked an appended button">click again</button>');
         </script>
     </body>
 </html>