Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shinnn/isogram
Generate Google Analytics tracking code with any isogrammic parameters you like
https://github.com/shinnn/isogram
cli code-generator easter-egg ecmascript google-analytics isogram javascript nodejs variable
Last synced: 26 days ago
JSON representation
Generate Google Analytics tracking code with any isogrammic parameters you like
- Host: GitHub
- URL: https://github.com/shinnn/isogram
- Owner: shinnn
- License: mit
- Created: 2013-11-23T14:51:43.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2018-12-17T13:32:29.000Z (almost 6 years ago)
- Last Synced: 2024-10-10T08:58:43.306Z (about 1 month ago)
- Topics: cli, code-generator, easter-egg, ecmascript, google-analytics, isogram, javascript, nodejs, variable
- Language: JavaScript
- Homepage:
- Size: 169 KB
- Stars: 406
- Watchers: 11
- Forks: 12
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# isogram
[](https://www.npmjs.com/package/isogram)
[](https://travis-ci.com/shinnn/isogram)
[](https://coveralls.io/github/shinnn/isogram)
Generate Google Analytics code with any *isogrammic* parameters you like
## Introduction
### Story
Here is the default tracking code of [Google Analytics](https://developers.google.com/analytics/devguides/collection/analyticsjs/).
```javascript
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
```
It has the immediate invoked function with seven parameters `i` `s` `o` `g` `r` `a` `m`.
On the other hand, [the `index.html`](https://github.com/h5bp/html5-boilerplate/blob/5.3.0/src/index.html) of [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate) includes the following tracking code:
```javascript
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;e=o.createElement(i);r=o.getElementsByTagName(i)[0];e.src='//www.google-analytics.com/analytics.js';r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
```
As you can see, its parameters are `b` `o` `i` `l` `e` `r`, different from the original's.
This amusing alteration is [authored by Mathias Bynens](https://github.com/h5bp/html5-boilerplate/commit/48d49e96d6db282eb9686d31ebbc5cbbbdd4d966 "Update to Google Universal Analytics"), based on [the way of optimization and minification he blogged](https://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics).
After seeing that, I modularized Bynens's way as this program, *isogram*.
### What it does
*isogram* is a code generator. It enables us to change the parameters of the Google Analytics tracking code, as we like, as long as they are [isogrammic](http://en.wikipedia.org/wiki/Isogram).
Isn't it very useful? Indeed, it isn't. But, I think, *isogram* can surprise the people seeing the source code of your website, [such as Bynens's commit](https://github.com/h5bp/html5-boilerplate/commit/48d49e96d6db282eb9686d31ebbc5cbbbdd4d966#all_commit_comments "notes on commit").
## Websites using *isogram*
The real-life examples that uses the code *isogram* generates in their pages
[apidoc]:
[bsync]:
[cdown]:
[license]:
[cssnext]:
[doge]:
[donavonblog]:
[muffins]:
[gulp]:
[hapi]:
[inktweb]:
[jekyll]:
[kanyewest]:
[starico]:
[tmdpw]:
[zespi]:
| Website (A - Z) | URL | Tracking code parameters |
| ----------------------------- | ----------------------------- | --------------------------- |
| apiDoc | [apidocjs.com][apidoc] | `a` `p` `i` `d` `o` `c` |
| BrowserSync | [browsersync.io][bsync] | `s` `y` `n` `c` `I` `t` |
| Chris Down's website | [chrisdown.name][cdown] | `c` `d` `o` `w` `n` |
| choosealicense.com | [choosealicense.com][license] | `L` `I` `C` `e` `N` `S` `E` |
| cssnext | [cssnext.io][cssnext] | `c` `s` `S` `n` `e` `x` `t` |
| Dogescript | [dogescript.com][doge] | `W` `o` `w` `s` `u` `c` `h` |
| Donavon West's blog | [donavon.js.org][donavonblog] | `D` `o` `N` `a` `V` `O` `n` |
| Go, muffins go! | [gomuffinsgo.com][muffins] | `M` `U` `F` `f` `I` `N` `S` |
| gulp.js | [gulpjs.com][gulp] | `g` `u` `l` `p` `j` `s` |
| hapi | [hapijs.com][hapi] | `h` `a` `p` `i` `j` `s` |
| Inktweb.nl | [inktweb.nl][inktweb] | `i` `n` `k` `t` `w` `e` `b` |
| Jekyll | [jekyllrb.com][jekyll] | `j` `e` `k` `y` `l` `L` |
| kanyewest.com | [kanyewest.com][kanyewest] | `k` `a` `n` `y` `e` |
| starico | [stari.co][starico] | `s` `t` `a` `r` `i` `c` `o` |
| Tim De Pauw's website | [tmdpw.eu][tmdpw] | `t` `m` `d` `p` `w` `e` `u` |
| Zachary Espiritu's website | [zacharyespiritu.com][zespi] | `z` `a` `c` `h` `A` `r` `y` |
*[Feel free to create a pull request to add your site here.](https://github.com/shinnn/isogram/pulls)*
## CLI
### Installation
[Use](https://docs.npmjs.com/cli/install) [npm](https://docs.npmjs.com/about-npm/).
```
npm install --global isogram
```
### Usage
```
isogram [parameters] [options]
```
#### Parameters
Default: `GoOgle`
`[parameters]` need to be a **nonpattern** word with no fewer than 3 and no greater than 7 characters, each of whom can be a valid JavaScript variable name.
For example, `yummy` is not valid, but `YuMmy` is valid.
#### Options
```
--id, -i Set web property ID
--domain, -d Set domain
--global, -g Change global variable name ("ga" by default)
--double, -w Use double quotes (single quotes by default)
--minify, -m Minify output like UglifyJS
--no-color, Print code in a single color
--color, -c Colorize parameters anyway (enabled by default)
--no-track, Just load, don't send a pageview
--track, -t Send a pageview after loading (enabled by default)
--help, -h Print usage information
--version, -v Print version
```
#### Example
```
isogram YoyOjs --id 12345678-9 --domain awesome-website.com
```
yields:
```javascript
!function(Y,o,y,O,j,s){Y.GoogleAnalyticsObject=y;Y[y]||(Y[y]=function(){
(Y[y].q=Y[y].q||[]).push(arguments)});Y[y].l=+new Date;j=o.createElement(O);
s=o.getElementsByTagName(O)[0];j.src='//www.google-analytics.com/analytics.js';
s.parentNode.insertBefore(j,s)}(window,document,'ga','script');
ga('create', 'UA-12345678-9', 'awesome-website.com');
ga('send', 'pageview');
```
## API
You can use *isogram* as a JavaScript library instead of CLI.
### Installation
#### Package managers
##### [npm](https://www.npmjs.com/)
```
npm install isogram
```
#### Standalone
[Download the standalone build.](https://raw.githubusercontent.com/shinnn/isogram/master/dist/isogram-standalone.js)
### Usage
#### isogram([*parameters*, *options*])
*parameters*: `String` (3 or more and 7 or less characters)
*options*: `Object`
Return: `String`
It returns a string of Google Analytics JavaScript code.
```javascript
// Default
isogram(); //=> '!function(G,o,O,g,l,e){G.GoogleAnalyticsObject=O,G[O]||(G[O]=function(){\n(G[O].q=G[O].q||[]).push(arguments)}),G[O].l=+new Date,l=o.createElement(g),\ne=o.getElementsByTagName(g)[0],l.src=\'//www.google-analytics.com/analytics.js\',\ne.parentNode.insertBefore(l,e)}(window,document,\'ga\',\'script\');\n\nga(\'create\', \'UA-XXXXX-X\', \'auto\');\nga(\'send\', \'pageview\');'
// Specify parameters
isogram('abcdef'); //=> '!function(a,b,c,d,e,f){a.GoogleAnalyticsObject=c,a[c]||(a[c]=function(){\n(a[c].q=a[c].q||[]).push(arguments)}),a[c].l=+new Date,e=b.createElement(d),\nf=b.getElementsByTagName(d)[0],e.src=\'//www.google-analytics.com/analytics.js\',\nf.parentNode.insertBefore(e,f)}(window,document,\'ga\',\'script\');\n\nga(\'create\', \'UA-XXXXX-X\', \'auto\');\nga(\'send\', \'pageview\');'
```
##### options.id
Type: `String`
Default: `XXXXX-X`
Set web property ID. `UA-` prefix maybe omitted.
```javascript
isogram({id: '36461297-9'}); //=> '!function( ... , \'UA-36461297-9\', \'auto\');\nga(\'send\', \'pageview\');'
isogram({id: 'UA-36461297-9'}) === isogram({id: '36461297-9'}); //=> true
```
##### options.domain
Type: `String`
Default: `auto`
Set domain of the site.
```javascript
isogram({domain: 'foo.example.com'}); //=> '!function( ... , \'foo.example.com\');\nga(\'send\', \'pageview\');'
```
##### options.globalName
Type: `String`
Default: `ga`
Change [the global function name](https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced#renaming).
```javascript
isogram({globalName: '__tracker'}); //=> '!function( ... ,document,\'__tracker\',\'script\');\n\n__tracker(\'create\', \'UA-XXXXX-X\', \'auto\');\n__tracker(\'send\', \'pageview\');'
```
##### options.minify
Type: `Boolean`
Default: `false`
Omit unnecessary whitespaces and newlines from the result.
##### options.singleQuotes
Type: `Boolean`
Default: `true`
`false` replaces all single quotes with double quotes.
##### options.color
Type: `Boolean`
Default: `false`
Colorize the parameters with [ANSI escape code](https://wikipedia.org/wiki/ANSI_escape_code#Colors).
##### options.track
Type: `Boolean`
Default: `true`
`false` excludes `create` and `send` commands after the loading code.
## License
Copyright (c) 2013 - 2018 [Shinnosuke Watanabe](https://github.com/shinnn)
Licensed under [the MIT License](./LICENSE).