@mate-academy/sourcebuster 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,574 @@
1
+ # Sourcebuster JS
2
+
3
+ #### 1.0.5 is released.
4
+
5
+ Read [upgrade guide](UPGRADING.md) for details.
6
+
7
+ ## About
8
+ * Sourcebuster tracks the sources of your site’s visitors and stores the data in the cookies for further analysis.
9
+ * It handles sources-overriding just like Google Analytics does.
10
+ * It’s written in pure JavaScript, without any dependency from third-party libraries.
11
+ * You can use received data for:
12
+ * phones change
13
+ * site content change
14
+ * export data within forms to your CRM or analysis system.
15
+
16
+ ## Links
17
+
18
+ [Download](https://github.com/alexfedoseev/sourcebuster-js/archive/master.zip) · [Upgrade guide](UPGRADING.md) · [Changelog](CHANGELOG.md) · [Test page](http://statica.alexfedoseev.com/sourcebuster-js/)
19
+
20
+ ## Install
21
+
22
+ ```shell
23
+ # from `npm`
24
+ npm install --save sourcebuster
25
+
26
+ # or `bower`
27
+ bower install --save sourcebuster
28
+ ```
29
+
30
+ Or you can [download this repo](https://github.com/alexfedoseev/sourcebuster-js/archive/master.zip) and use `sourcebuster.min.js` from `/dist` folder.
31
+
32
+ ## Setup
33
+ I'm gonna walk you through the inline-HTML setup pattern, but keep in mind, that Sourcebuster is available as `CommonJS` / `AMD` module, so you can `require` it as dependency as well.
34
+
35
+ Script is written in pure JavaScript, doesn’t have any dependency on third-party libraries and doesn’t interacts with DOM’s objects, so it can be called as soon as you want it. Higher you’ll place it in the `<head>` tag, sooner you’ll get the cookies, whose data can be used for DOM’s objects manipulation (phones change etc.).
36
+
37
+ Place in the `<head>` tag:
38
+
39
+ ```html
40
+ <script src="/path/to/sourcebuster.min.js"></script>
41
+ ```
42
+
43
+ Or require it:
44
+
45
+ ```javascript
46
+ var sbjs = require('sourcebuster');
47
+ ```
48
+
49
+ It will expose Sourcebuster object — `sbjs`. This object has just 2 methods: `init` and `get`. Basically first one is `setter`, and the second one is `getter`.
50
+
51
+ So, lets initialize it:
52
+
53
+ ```html
54
+ <script src="/path/to/sourcebuster.min.js"></script>
55
+ <script>
56
+
57
+ sbjs.init();
58
+
59
+ </script>
60
+ ```
61
+
62
+ This will:
63
+
64
+ - set all the cookies
65
+ - give you the data (available through the second method `sbjs.get`)
66
+
67
+ ### Configure
68
+
69
+ `sbjs.init` accepts one argument: object with the settings. It's optional and usually it will be something like this:
70
+
71
+ ```javascript
72
+ sbjs.init({
73
+ domain: 'alexfedoseev.com',
74
+ lifetime: 3,
75
+ callback: doSmth
76
+ });
77
+ ```
78
+
79
+ There are 11 types of user settings:
80
+ * lifetime
81
+ * session_length
82
+ * domain
83
+ * referrals
84
+ * organics
85
+ * typein_attributes
86
+ * timezone_offset
87
+ * campaign_param
88
+ * user_ip
89
+ * promocode
90
+ * callback
91
+
92
+ Now I'll show you the whole list of configurable options. The short description is provided in comments. The rest is explained below.
93
+
94
+ ```javascript
95
+ sbjs.init({
96
+
97
+ // Set custom expiration period for cookies in months
98
+ // 6 months is default
99
+ lifetime: 6,
100
+
101
+ // Set custom session length in minutes
102
+ // 30 minutes is default
103
+ session_length: 30,
104
+
105
+ // Set domain name in cookies
106
+ domain: {
107
+ host: 'alexfedoseev.com',
108
+ isolate: false
109
+ },
110
+
111
+ // Set custom referral sources
112
+ referrals: [
113
+ {
114
+ host: 't.co', // This is host from Twitter's `http referer`
115
+ medium: 'social', // This is custom `utm_medium`, you can drop it and it'll be `referral`
116
+ display: 'twitter.com' // And this is how you'll see it in the result data
117
+ },
118
+ {
119
+ host: 'plus.url.google.com',
120
+ display: 'plus.google.com'
121
+ }
122
+ ],
123
+
124
+ // Set custom organic sources
125
+ organics: [
126
+ {
127
+ host: 'bing.com',
128
+ param: 'q',
129
+ display: 'bing'
130
+ }
131
+ ],
132
+
133
+ // Set `utm_source` & `utm_medium` values for `typein` traffic
134
+ // Defaults are `(direct)` & `(none)`
135
+ typein_attributes: {
136
+ source: '(direct)',
137
+ medium: '(none)'
138
+ },
139
+
140
+ // Set time zone
141
+ timezone_offset: 3,
142
+
143
+ // Set custom `utm_campaign` param
144
+ campaign_param: 'my_adwords_campaign',
145
+
146
+ // Set user ip
147
+ user_ip: '192.168.1.1',
148
+
149
+ // Set promocode
150
+ // Default range is [100000..999999]
151
+ promocode: {
152
+ min: 100000,
153
+ max: 999999
154
+ },
155
+
156
+ // Set callback-function,
157
+ // It will be executed right after `sbjs` cookies will be set
158
+ callback: doSmth
159
+ });
160
+ ```
161
+
162
+ #### lifetime
163
+
164
+ ```javascript
165
+ lifetime: 6
166
+ ```
167
+
168
+ Setting up custom expiration period for `sbjs` cookies (in months). Default is 6.
169
+
170
+ #### session_length
171
+
172
+ ```javascript
173
+ session_length: 30
174
+ ```
175
+
176
+ Setting up user's session duration (in minutes). Default is 30.
177
+
178
+ This parameter affects only referral sources overriding. When the visitor comes on your site for the first time, we receive and store the data about his source. After some time this visitor can return to your website, but from another source, and we need to have some rules to decide — should we overwrite previous source or we should not.
179
+
180
+ The rules are the same with Google Analytics:
181
+ * UTM and Organic source always overrides any previous source.
182
+ * Typein never overrides a previous source.
183
+ * Referral source overrides previous source only if there is no user session at the moment. If it’s inside the same session — a referral source will never override previous source.
184
+
185
+ Explanation to `referral` logic: sometimes visitor within the current visit (session) comes to the website from the “source” which is not actually a “source”. For example, it can be visit from the email service, where he had a registration activation link.
186
+
187
+ #### domain
188
+
189
+ ```javascript
190
+ domain: {
191
+ host: 'alexfedoseev.com',
192
+ isolate: false
193
+ }
194
+ ```
195
+
196
+ Setting up cookies domain.
197
+
198
+ First of all lets talk about how script handles **the absence** of this custom option: if no value is set, cookies will be placed for **current domain and all its subdomains**.
199
+
200
+ Why it is so. Lets say the site doesn't have subdomains to share traffic with, and now it doesn't matter: do we share the cookies with subdomains or we do not. But what's gonna happen if someday subdomains will occur? If cookies wasn't shared — subdomains won't get them, it means they won't share the traffic, and visitors, which came from main domain to subdomains (and vise versa), will be considered as `referral` traffic.
201
+
202
+ So by default the cookies are shared. However if you don't want to share them — use `isolate: true`, to isolate domain.
203
+
204
+ Let’s take a look at further examples.
205
+
206
+ **No. 1**
207
+ The first scenario. You have a site: **wow.com**. Also you have a blog on this site: **blog.wow.com**. And you don’t want to separate traffic between them. It means that when the visitor come from **blog.wow.com** to **wow.com**, it won’t be a new visit for **wow.com** (with **blog.wow.com** as Referral source), it will be a common inner click without source change (to sourcebuster.js this scenario will be equal to inner page change: from *wow.com/about* to *wow.com/contacts* for example). To achive this you have to add this line on both sites: **wow.com & blog.wow.com**.
208
+
209
+ ```javascript
210
+ domain: 'wow.com'
211
+ ```
212
+
213
+ **No. 2**
214
+ That was simple. Now lets take a look at opposite scenario — you want to separate traffic between your subdomains and consider it as Referral. There is the main site — **wow.com**, and there is a blog on this site — **blog.wow.com**, which also has users subdomains — **alex.blog.wow.com** is one of them. You don’t want to separate traffic between **blog.wow.com** and **alex.blog.wow.com**, but you do want to separate it between all the blogs and the main site. Here’s how we can sort it out:
215
+
216
+ ```javascript
217
+ // put this on the main domain wow.com
218
+ domain: {
219
+ host: 'wow.com',
220
+ isolate: true
221
+ }
222
+
223
+ // and this on the blogs subdomains (blog.wow.com & alex.blog.wow.com)
224
+ domain: 'blog.wow.com'
225
+ ```
226
+
227
+ Pay attention to the `isolate: true` param in setting for the main domain. Use it only when all incoming traffic from all subdomains should be referral in relation to provided host.
228
+
229
+ In our example if the visitor came for the first time on the main site **wow.com** by clicking on the link in user’s blog **alex.blog.wow.com**, his source (for the **wow.com**) will be **alex.blog.wow.com** (traffic type: *referral*).
230
+
231
+ **NB! Do not change `isolate` value after you pushed the script in production! If you'll do — your visitors will get doubled cookies and bad things may happen.**
232
+
233
+ The option, that will give the ability to force-update cookies domain (if you need to change subdomains handling rules), is in my TODO-list, but not available yet.
234
+
235
+ How to check that `isolate` is set right:
236
+
237
+ * host of the page, which code have setting `domain` with param `isolate: true` must be equal to the host provided in `domain` line:
238
+
239
+ ```javascript
240
+ // CORRECT: on the pages of wow.com
241
+ domain: {
242
+ host: 'wow.com',
243
+ isolate: true
244
+ }
245
+
246
+ // DOESN’T MAKE SENSE: on the pages blog.wow.com
247
+ domain: {
248
+ host: 'wow.com',
249
+ isolate: true
250
+ }
251
+ ```
252
+ * all incoming traffic from all subdomains will be referral in relation to provided host:
253
+
254
+ ```javascript
255
+ domain: {
256
+ host: 'wow.com',
257
+ isolate: true
258
+ }
259
+ // visit from *.wow.com → wow.com will be referral
260
+ ```
261
+
262
+ #### referrals
263
+
264
+ ```javascript
265
+ referrals: [
266
+ {
267
+ host: 't.co', // This is host from Twitter's `http referer`
268
+ medium: 'social', // This is custom `utm_medium`, you can drop it and it'll be `referral`
269
+ display: 'twitter.com' // And this is how you'll see it in the result data
270
+ },
271
+ {
272
+ host: 'plus.url.google.com',
273
+ display: 'plus.google.com'
274
+ }
275
+ ]
276
+ ```
277
+
278
+ Adds custom `referral` sources.
279
+
280
+ In general if you’re ok with the fact that medium (`utm_medium`) of traffic from `facebook.com` is `referral`, you don’t need this setting. But if you want to make this kind of traffic `social` (`utm_medium=social`), you can set it up using `referrals`. First param is `host` of the source from `http referer`, second — `medium` — preferred value of `utm_medium`.
281
+
282
+ Moreover some of the traffic sources have different referer host in relation to their main domain (for example, traffic from Twitter has referer with the host — `t.co`). In these cases you can assign alias to the source using optional `display` param. Also with this param you can group the traffic from the set of the sites into one virtual source.
283
+
284
+ Twitter (`host: 't.co', display: 'twitter.com'`) and Google+ (`host: 'plus.url.google.com', display: 'plus.google.com'`) added to default `referral` sources. You still can override it by your custom setting (to mark it as `social` for example).
285
+
286
+ #### organics
287
+
288
+ There are already a number of predefined `organic` sources in the core:
289
+
290
+ ```
291
+ Source -> Alias
292
+ -------------------------
293
+ google.all -> google
294
+ yandex.all -> yandex
295
+ bing.com -> bing
296
+ yahoo.com -> yahoo
297
+ about.com -> about
298
+ aol.com -> aol
299
+ ask.com -> ask
300
+ globososo.com -> globo
301
+ go.mail.ru -> go.mail.ru
302
+ rambler.ru -> rambler
303
+ tut.by -> tut.by
304
+ ```
305
+
306
+ But you can use this setting, if you want to add more organic sources or override aliases of predefined ones.
307
+
308
+ ```javascript
309
+ organics: [
310
+ {
311
+ host: 'bing.com',
312
+ param: 'q',
313
+ display: 'bing_in_da_house'
314
+ }
315
+ ]
316
+ ```
317
+
318
+ For example you want the traffic from the SERP of **bing.com** to be organic and the alias for this source to be `bing_in_da_house`. So you need to provide `host: 'bing.com'`, and the query `param` of keyword — `'q'`. Both are required. Also, to set custom alias for the source, provide optional third param `display: 'bing_in_da_house'`.
319
+
320
+ To get the keyword param go to **bing.com** and search for smth, **“apple”** for example. After you’ll get to the SERP, explore its URL:
321
+ *http://www.bing.com/search?q=apple&go=&qs=n&form=QBLH&pq=apple&sc=8-5&sp=-1&sk=&cvid=718ad07527244c319ecebf44aa261f64*
322
+
323
+ Keyword param — `'q'` — is a symbol/word between `“?”` (or `“&”` if the param is not the first after question sign) and `“=apple”` in URL of SERP.
324
+
325
+ #### typein_attributes
326
+
327
+ ```javascript
328
+ typein_attributes: {
329
+ source: '(direct)',
330
+ medium: '(none)'
331
+ }
332
+ ```
333
+
334
+ Sets custom `utm_source` and `utm_medium` for `typein` traffic.
335
+ By default the values of `source` and `medium` for `typein` traffic are `(direct)` & `(none)`.
336
+ You can override this via `typein_attributes`.
337
+
338
+ #### timezone_offset
339
+
340
+ ```javascript
341
+ timezone_offset: 3
342
+ ```
343
+
344
+ Setting up time zone.
345
+
346
+ By default datetime is taken from the visitor's system. But you can normalize it to predefined time zone via `timezone_offset`.
347
+
348
+ Example. Your visitor is in London (`UTC +00:00`). His local time is `03:00 AM`. If no `timezone_offset` was set, the time in cookie will be `03:00 AM`. Another visitor at the same moment is from Berlin (`UTC +01:00`) and his local time is `04:00 AM`. The time in cookie will be `04:00 AM`.
349
+
350
+ If you want to normalize time of all visitors (let it be `UTC +03:00` for example), you should set it via `timezone_offset: 3`. So the time in cookies of both visitors will be `06:00 AM`.
351
+
352
+ #### campaign_param (Google AdWords `gclid` param handler)
353
+
354
+ ```javascript
355
+ campaign_param: 'my_adwords_campaign'
356
+ ```
357
+
358
+ Sets custom GET-param, whose value (if present) will be set as `utm_campaign` in cookies (if there is no original `utm_campaign` in request). This feature was added mainly because of Google AdWords `gclid` param.
359
+
360
+ Here is the use-case. If you have traffic from Google AdWords and you use `gclid` param, you can shorten your urls by removing `utm` out of it. Sourcebuster will match this traffic as `utm` from Google.
361
+
362
+ If there is only `gclid` param in url:
363
+ http://statica.alexfedoseev.com/sourcebuster-js/?gclid=sMtH
364
+
365
+ This will give you the following results:
366
+ * Traffic type: utm
367
+ * utm_source: google
368
+ * utm_medium: cpc
369
+ * utm_campaign: google_cpc
370
+ * utm_content: (none)
371
+ * utm_term: (none)
372
+
373
+ You can provide a custom `utm_campaign` name via `campaign_param` and value of this GET-param:
374
+ http://statica.alexfedoseev.com/sourcebuster-js/?gclid=sMtH&my_adwords_campaign=test_custom
375
+
376
+ You'll get the following:
377
+ * Traffic type: utm
378
+ * utm_source: google
379
+ * utm_medium: cpc
380
+ * utm_campaign: test_custom
381
+ * utm_content: (none)
382
+ * utm_term: (none)
383
+
384
+ **WARNING**
385
+ * If there is original utm-param in request (`utm_source`, `utm_medium`, `utm_campaign`), it will override `gclid` param and `campaign_param` param value.
386
+ * If there is only custom campaign param (`campaign_param`) in request, Sourcebuster will consider it as `utm` traffic.
387
+
388
+ #### user_ip
389
+
390
+ ```javascript
391
+ user_ip: '192.168.1.1'
392
+ ```
393
+
394
+ Sets user’s ip address.
395
+ By default sourcebuster can’t get ip address of the visitor. But if you need it, you can get it on your back-end and push it using `user_ip` setting.
396
+
397
+ #### promocode (beta)
398
+
399
+ ```javascript
400
+ promocode: true
401
+
402
+ // or
403
+ promocode: {
404
+ min: 100000,
405
+ max: 999999
406
+ }
407
+ ```
408
+
409
+ Sets random promocode for visitor.
410
+
411
+ If you don't want to do promocode-stuff on your back, Sourcebuster can generate them or you.
412
+ There is no check for uniqueness, of course. But you can rely on probability and set range of promocode values `min` and `max` params.
413
+ They are optional, by the way. If they are not set, range will be between 100 000 and 999 999.
414
+
415
+ **This option is beta — mainly because I haven't check the percent of duplicated promos on big projects.**
416
+
417
+ #### callback
418
+
419
+ ```javascript
420
+ callback: doSmth
421
+ ```
422
+
423
+ Callback. Just pass the name of the function to the option, and it will be executed right after the cookies will be set. Callback will get the object with `sbjs` data as argument.
424
+
425
+ ```javascript
426
+ sbjs.init({ callback: go });
427
+
428
+ function go(sb) {
429
+ console.log('Cookies are set! Your current source is: ' + sb.current.src);
430
+ }
431
+ ```
432
+
433
+
434
+ ## Usage
435
+
436
+ ### Getting the data
437
+
438
+ Grab the data through `sbjs.get` method (it's `object` actually).
439
+
440
+ Here is the list of what you can get.
441
+
442
+ #### `sbjs.get.current`
443
+ Params of the latest visitor’s source. If the visitor had more than one source, this will be the latest values.
444
+
445
+ * `sbjs.get.current.typ`
446
+ Traffic type. Possible values: `utm`, `organic`, `referral`, `typein`.
447
+
448
+ * `sbjs.get.current.src`
449
+ Source. utm_source, actually.
450
+
451
+ * `sbjs.get.current.mdm`
452
+ Medium, utm_medium. Values can be customized using utm-params and `referrals`.
453
+
454
+ * `sbjs.get.current.cmp`
455
+ Campaign. Value of utm_campaign.
456
+
457
+ * `sbjs.get.current.cnt`
458
+ Content. Value of utm_content.
459
+
460
+ * `sbjs.get.current.trm`
461
+ Keyword. Value of utm_term.
462
+
463
+
464
+ #### `sbjs.get.current_add`
465
+ Additional info about the visit, when the `current` source was written.
466
+
467
+ * `sbjs.get.current_add.fd`
468
+ Date and time of the visit. Format: `yyyy-mm-dd hh:mm:ss`. Time zone can be customized via `timezone_offset`.
469
+
470
+ * `sbjs.get.current_add.ep`
471
+ Entrance point.
472
+
473
+ * `sbjs.get.current_add.rf`
474
+ Referer URL.
475
+
476
+
477
+ #### `sbjs.get.first` & `sbjs.get.first_add`
478
+ Just like `sbjs.get.current` & `sbjs.get.current_add`, but holds params of the very first visit. Stored once, never overwritten.
479
+
480
+
481
+ #### `sbjs.get.session`
482
+ Current opened session data.
483
+
484
+ * `sbjs.get.session.pgs`
485
+ How many pages user have seen during the current session.
486
+
487
+ * `sbjs.get.session.cpg`
488
+ Current page URL.
489
+
490
+
491
+ #### `sbjs.get.udata`
492
+ Additional user data: visits, ip & user-agent.
493
+
494
+ * `sbjs.get.udata.vst`
495
+ How many times user visited site.
496
+
497
+ * `sbjs.get.udata.uip`
498
+ Current ip-address.
499
+
500
+ * `sbjs.get.udata.uag`
501
+ Current user-agent (browser).
502
+
503
+
504
+ #### `sbjs.get.promo`
505
+ Visitor's promocode. Cookie set only if `promocode` option is present.
506
+
507
+ * `sbjs.get.promo.code`
508
+ Promocode.
509
+
510
+
511
+ ### Cookies
512
+
513
+ All data are stored in cookies. When the script is pushed to production, visitors will get the following yummies:
514
+ * sbjs_current
515
+ * sbjs_current_add
516
+ * sbjs_first
517
+ * sbjs_first_add
518
+ * sbjs_session
519
+ * sbjs_udata
520
+ * sbjs_promo
521
+
522
+ #### sbjs_current & sbjs_first
523
+
524
+ *Format*
525
+ `typ=organic|||src=google|||mdm=organic|||cmp=(none)|||cnt=(none)|||trm=(none)`
526
+
527
+ *Examples*
528
+
529
+ ```
530
+ # source: adv campaign with utms
531
+ typ=utm|||src=yandex|||mdm=cpc|||cmp=my_adv_campaign|||cnt=banner_1|||trm=buy_my_stuff
532
+
533
+ # source: google's SERP
534
+ typ=organic|||src=google|||mdm=organic|||cmp=(none)|||cnt=(none)|||trm=(none)
535
+
536
+ # source: referral from site.com/referer-path
537
+ typ=referral|||src=site.com|||mdm=referral|||cmp=(none)|||cnt=/referer-path|||trm=(none)
538
+
539
+ # source: facebook with custom `referrals` setting
540
+ typ=referral|||src=facebook.com|||mdm=social|||cmp=(none)|||cnt=(none)|||trm=(none)
541
+
542
+ # source: direct visit
543
+ typ=typein|||src=(direct)|||mdm=(none)|||cmp=(none)|||cnt=(none)|||trm=(none)
544
+ ```
545
+
546
+
547
+ #### sbjs_current_add & sbjs_first_add
548
+
549
+ *Format*
550
+ `fd=2014-06-11 17:28:26|||ep=http://statica.alexfedoseev.com/sourcebuster-js/|||rf=https://www.google.com`
551
+
552
+
553
+ #### sbjs_session
554
+
555
+ *Format*
556
+ `pgs=3|||cpg=http://statica.alexfedoseev.com/sourcebuster-js/`
557
+
558
+
559
+ #### sbjs_udata
560
+
561
+ *Format*
562
+ `vst=2|||uip=192.168.1.1|uag=Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36`
563
+
564
+
565
+ #### sbjs_promo
566
+
567
+ *Format*
568
+ `code=002354`
569
+
570
+
571
+ ### Limitations
572
+
573
+ #### Visits from https to http
574
+ When the visitor come from `https` web-site to `http`, the request don't have a referer. So the script will consider it as `typein` (direct visit).