├── LICENSE ├── README.md ├── interceptjs-demo.gif ├── interceptjs-user-flow.svg ├── jquery.interceptjs.css └── jquery.interceptjs.js /LICENSE: -------------------------------------------------------------------------------- 1 | GNU LESSER GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | 9 | This version of the GNU Lesser General Public License incorporates 10 | the terms and conditions of version 3 of the GNU General Public 11 | License, supplemented by the additional permissions listed below. 12 | 13 | 0. Additional Definitions. 14 | 15 | As used herein, "this License" refers to version 3 of the GNU Lesser 16 | General Public License, and the "GNU GPL" refers to version 3 of the GNU 17 | General Public License. 18 | 19 | "The Library" refers to a covered work governed by this License, 20 | other than an Application or a Combined Work as defined below. 21 | 22 | An "Application" is any work that makes use of an interface provided 23 | by the Library, but which is not otherwise based on the Library. 24 | Defining a subclass of a class defined by the Library is deemed a mode 25 | of using an interface provided by the Library. 26 | 27 | A "Combined Work" is a work produced by combining or linking an 28 | Application with the Library. The particular version of the Library 29 | with which the Combined Work was made is also called the "Linked 30 | Version". 31 | 32 | The "Minimal Corresponding Source" for a Combined Work means the 33 | Corresponding Source for the Combined Work, excluding any source code 34 | for portions of the Combined Work that, considered in isolation, are 35 | based on the Application, and not on the Linked Version. 36 | 37 | The "Corresponding Application Code" for a Combined Work means the 38 | object code and/or source code for the Application, including any data 39 | and utility programs needed for reproducing the Combined Work from the 40 | Application, but excluding the System Libraries of the Combined Work. 41 | 42 | 1. Exception to Section 3 of the GNU GPL. 43 | 44 | You may convey a covered work under sections 3 and 4 of this License 45 | without being bound by section 3 of the GNU GPL. 46 | 47 | 2. Conveying Modified Versions. 48 | 49 | If you modify a copy of the Library, and, in your modifications, a 50 | facility refers to a function or data to be supplied by an Application 51 | that uses the facility (other than as an argument passed when the 52 | facility is invoked), then you may convey a copy of the modified 53 | version: 54 | 55 | a) under this License, provided that you make a good faith effort to 56 | ensure that, in the event an Application does not supply the 57 | function or data, the facility still operates, and performs 58 | whatever part of its purpose remains meaningful, or 59 | 60 | b) under the GNU GPL, with none of the additional permissions of 61 | this License applicable to that copy. 62 | 63 | 3. Object Code Incorporating Material from Library Header Files. 64 | 65 | The object code form of an Application may incorporate material from 66 | a header file that is part of the Library. You may convey such object 67 | code under terms of your choice, provided that, if the incorporated 68 | material is not limited to numerical parameters, data structure 69 | layouts and accessors, or small macros, inline functions and templates 70 | (ten or fewer lines in length), you do both of the following: 71 | 72 | a) Give prominent notice with each copy of the object code that the 73 | Library is used in it and that the Library and its use are 74 | covered by this License. 75 | 76 | b) Accompany the object code with a copy of the GNU GPL and this license 77 | document. 78 | 79 | 4. Combined Works. 80 | 81 | You may convey a Combined Work under terms of your choice that, 82 | taken together, effectively do not restrict modification of the 83 | portions of the Library contained in the Combined Work and reverse 84 | engineering for debugging such modifications, if you also do each of 85 | the following: 86 | 87 | a) Give prominent notice with each copy of the Combined Work that 88 | the Library is used in it and that the Library and its use are 89 | covered by this License. 90 | 91 | b) Accompany the Combined Work with a copy of the GNU GPL and this license 92 | document. 93 | 94 | c) For a Combined Work that displays copyright notices during 95 | execution, include the copyright notice for the Library among 96 | these notices, as well as a reference directing the user to the 97 | copies of the GNU GPL and this license document. 98 | 99 | d) Do one of the following: 100 | 101 | 0) Convey the Minimal Corresponding Source under the terms of this 102 | License, and the Corresponding Application Code in a form 103 | suitable for, and under terms that permit, the user to 104 | recombine or relink the Application with a modified version of 105 | the Linked Version to produce a modified Combined Work, in the 106 | manner specified by section 6 of the GNU GPL for conveying 107 | Corresponding Source. 108 | 109 | 1) Use a suitable shared library mechanism for linking with the 110 | Library. A suitable mechanism is one that (a) uses at run time 111 | a copy of the Library already present on the user's computer 112 | system, and (b) will operate properly with a modified version 113 | of the Library that is interface-compatible with the Linked 114 | Version. 115 | 116 | e) Provide Installation Information, but only if you would otherwise 117 | be required to provide such information under section 6 of the 118 | GNU GPL, and only to the extent that such information is 119 | necessary to install and execute a modified version of the 120 | Combined Work produced by recombining or relinking the 121 | Application with a modified version of the Linked Version. (If 122 | you use option 4d0, the Installation Information must accompany 123 | the Minimal Corresponding Source and Corresponding Application 124 | Code. If you use option 4d1, you must provide the Installation 125 | Information in the manner specified by section 6 of the GNU GPL 126 | for conveying Corresponding Source.) 127 | 128 | 5. Combined Libraries. 129 | 130 | You may place library facilities that are a work based on the 131 | Library side by side in a single library together with other library 132 | facilities that are not Applications and are not covered by this 133 | License, and convey such a combined library under terms of your 134 | choice, if you do both of the following: 135 | 136 | a) Accompany the combined library with a copy of the same work based 137 | on the Library, uncombined with any other library facilities, 138 | conveyed under the terms of this License. 139 | 140 | b) Give prominent notice with the combined library that part of it 141 | is a work based on the Library, and explaining where to find the 142 | accompanying uncombined form of the same work. 143 | 144 | 6. Revised Versions of the GNU Lesser General Public License. 145 | 146 | The Free Software Foundation may publish revised and/or new versions 147 | of the GNU Lesser General Public License from time to time. Such new 148 | versions will be similar in spirit to the present version, but may 149 | differ in detail to address new problems or concerns. 150 | 151 | Each version is given a distinguishing version number. If the 152 | Library as you received it specifies that a certain numbered version 153 | of the GNU Lesser General Public License "or any later version" 154 | applies to it, you have the option of following the terms and 155 | conditions either of that published version or of any later version 156 | published by the Free Software Foundation. If the Library as you 157 | received it does not specify a version number of the GNU Lesser 158 | General Public License, you may choose any version of the GNU Lesser 159 | General Public License ever published by the Free Software Foundation. 160 | 161 | If the Library as you received it specifies that a proxy can decide 162 | whether future versions of the GNU Lesser General Public License shall 163 | apply, that proxy's public statement of acceptance of any version is 164 | permanent authorization for you to choose that version for the 165 | Library. 166 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # interceptjs 2 | A jQuery plugin that allows site owners to control calls to action (CTA) that occur for anonymous users. Could be used to offer user experience surveys, for donation calls to action and more. Supports: 3 | * two styles: banner (site wide injected `div` at the top of the page) or modal 4 | * viewing CTA on every pageview, or a particular page in a session, e.g. the first, or second, or third page view 5 | * anonymous user dismissal of CTA, controlled with a cookie 6 | * site owner override of user's dismissal 7 | * configurable delayed introduction of CTA upon page load, e.g. show CTA 3s after DOM is loaded 8 | * configurable duration of a user's session, for resetting pageview counts 9 | * Google Analytics events, if available 10 | * configurable percentage a user will see the CTA, defaults to 100% 11 | * custom HTML in the invitation, use this with *any* survey service. 12 | This was created to be call to action agnostic and works with any type of call to action, whether survey, donation or otherwise. We built it to use with Survey Monkey, but you could use Google Forms, Survey Gizmo, Constant Contact or a vanilla webpage. 13 | 14 | # Usage 15 | Place this after you've loaded jQuery and on every page you'd like the call to action invitation to appear: 16 | ```javascript 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 48 | 49 | 50 | 51 | ``` 52 | 53 | # Demo 54 | As an example, this is what an intercept might look like of both `banner` and `modal` types for a site like iamgreaterthanzero.com: 55 | ![interceptjs demo](https://cdn.rawgit.com/ten7/interceptjs/master/interceptjs-demo.gif) 56 | 57 | # User flow 58 | The decisions of when and where to show the call to invitation is controlled using this workflow: 59 | 60 | ![interceptjs user flow](https://cdn.rawgit.com/ten7/interceptjs/master/interceptjs-user-flow.svg) 61 | 62 | # Made by 63 | This plugin is made in Minneapolis by humans at [TEN7](https://ten7.com/). -------------------------------------------------------------------------------- /interceptjs-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TEN7-Archive/interceptjs/304f2822c7f09d7c448740b4deb63437808fda4d/interceptjs-demo.gif -------------------------------------------------------------------------------- /interceptjs-user-flow.svg: -------------------------------------------------------------------------------- 1 | 2 |
Start
Start
User visits site
User visits site
Cookie?
Cookie?
Create cookie with user
defaults
[Not supported by viewer]
No
No
Yes
Yes
Start new "session"
update cookie
pageview=1,
last_visit
[Not supported by viewer]
Load user data 
from cookie
[Not supported by viewer]
Continue "session"
update cookie pageview++,
last_visit
[Not supported by viewer]
Elapsed
time > session time?
[Not supported by viewer]
End
End
User
dismiss on?
[Not supported by viewer]
Override?
Override?
Show on
every page
view?
[Not supported by viewer]
pageview = pagenum ?
<i>pageview = pagenum ?</i>
No
No
Yes
Yes
Update user_dismiss=0
Update <i>user_dismiss</i>=0
Yes
Yes
No
No
No
No
Generate
random number from 1 to 100
[Not supported by viewer]
Yes
Yes
No
No
Num
< percent?
[Not supported by viewer]
No
No
Show intercept
of type type with text and
show_delay
[Not supported by viewer]
Yes
Yes
User closes intercept?
User closes intercept?
Update cookie user_dismiss=1
Update cookie <i>user_dismiss=1</i>
Yes
Yes
User clicks invitation?
User clicks invitation?
No
No
No
No
Track click
Track click
Analytics
on?
[Not supported by viewer]
No
No
Yes
Yes
Yes
Yes
End
End
Yes
Yes
No
No
Yes
Yes
Analytics
on?
[Not supported by viewer]
No
No
Track
shown
invitation
[Not supported by viewer]
Yes
Yes
Developer configures
library
[Not supported by viewer]
Power
switch on?
[Not supported by viewer]
No
No
Yes
Yes -------------------------------------------------------------------------------- /jquery.interceptjs.css: -------------------------------------------------------------------------------- 1 | /* global */ 2 | .ijs_intercept { 3 | display: hidden; 4 | } 5 | 6 | .ijs_intercept a.button { 7 | background-color: #e8e8e8; 8 | padding: 6px 10px; 9 | border-radius: 2px; 10 | margin: 0px 4px; 11 | } 12 | 13 | .ijs_intercept a.button:hover { 14 | cursor: pointer; 15 | } 16 | 17 | .ijs_button { 18 | padding: 0.4em 1em; 19 | margin: 0 1em; 20 | background-color: #cccccc; 21 | border-radius: 0.3em; 22 | } 23 | 24 | /* banner */ 25 | #ijs_banner_wrapper { 26 | width: 100%; 27 | display: block; 28 | text-align: center; 29 | padding: 0; 30 | margin: 0; 31 | } 32 | 33 | #ijs_banner { 34 | width: 100%; 35 | display: block; 36 | text-align: center; 37 | padding: 0; 38 | margin: 0; 39 | } 40 | 41 | #ijs_banner p { 42 | margin: 0; 43 | padding: 0; 44 | } 45 | 46 | #ijs_banner_close { 47 | width: 1em; 48 | height: 1em; 49 | position: relative; 50 | float: right; 51 | font-weight: bold; 52 | padding-right: 0.5em; 53 | } 54 | 55 | #ijs_banner_close:hover { 56 | cursor: pointer; 57 | } 58 | 59 | 60 | /* modal */ 61 | 62 | #ijs_modal { 63 | 64 | } 65 | 66 | .blocker { 67 | background-color: transparent; 68 | } -------------------------------------------------------------------------------- /jquery.interceptjs.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | $.fn.interceptjs = function(options) { 3 | // https://github.com/js-cookie/js-cookie 4 | if (!window.Cookies) { 5 | console.log('js-cookie is not installed. See http://interceptjs.io/ for help.'); 6 | return; 7 | } 8 | // https://github.com/kylefox/jquery-modal 9 | if (!$.modal) { 10 | console.log('jquery-modal is not installed. See http://interceptjs.io/ for help.'); 11 | return; 12 | } 13 | // Establish our default settings 14 | var settings = $.extend({ 15 | pagenum: 0, 16 | power_switch: 1, 17 | user_override: 0, 18 | percent: 100, 19 | google_analytics: 0, 20 | session_duration: 24, 21 | show_delay: 0, 22 | type: 'banner', 23 | text: '

Powered by interceptjs! You should change this message.

', 24 | complete: null 25 | }, options); 26 | // Initialize user object 27 | var ijs = {}; 28 | // Use analytics? 29 | var use_ga = 0; 30 | if (settings.google_analytics == 1 && window.ga) { 31 | use_ga = 1; 32 | } 33 | // Banner alert 34 | var html_banner = '
x
' + settings.text + '
'; 35 | // Modal alert 36 | var html_modal = '
' + settings.text + '
'; 37 | // Return this 38 | return this.each(function() { 39 | // Is this thing even on? 40 | if (settings.power_switch == 0) { 41 | // Do nothing 42 | return; 43 | } 44 | // Some variables 45 | var ts = Math.floor(Date.now()); 46 | var rndnum = Math.floor(Math.random() * 100); // between 0 and 100 47 | // Load user data from cookie, setup defaults if none 48 | ijs = Cookies.getJSON('ijs') || {}; 49 | if ($.isEmptyObject(ijs)) { 50 | // User data 51 | ijs = { 52 | user_dismiss: 0, 53 | pageview: 0, 54 | first_visit: ts, 55 | last_visit: ts 56 | }; 57 | Cookies.set('ijs', ijs); 58 | } 59 | // Should we start a new session? 60 | var session_duration = settings.session_duration * 3600000; 61 | var elapsed_time = ijs.last_visit + session_duration; 62 | if ((ts > elapsed_time) || ts == ijs.first_visit) { 63 | // New session 64 | ijs.pageview = 1; 65 | } else { 66 | // Continue existing session 67 | ijs.pageview++; 68 | } 69 | // Update last visit 70 | ijs.last_visit = ts; 71 | // Save cookie 72 | Cookies.set('ijs', ijs); 73 | // User dismiss on? 74 | if (ijs.user_dismiss == 1) { 75 | if (settings.user_override == 1) { 76 | ijs.user_dismiss = 0; 77 | Cookies.set('ijs', ijs); 78 | } else { 79 | // Do nothing 80 | return; 81 | } 82 | } 83 | // Check the page we're on 84 | if (settings.pagenum == 0 || settings.pagenum == ijs.pageview) { 85 | // What percentage of the time to show? 86 | if (rndnum < settings.percent) { 87 | // Show the intercept 88 | showIntercept(); 89 | } else { 90 | // Do nothing 91 | return; 92 | } 93 | } else { 94 | // Do nothing 95 | return; 96 | } 97 | // Complete 98 | if ($.isFunction(settings.complete)) { 99 | settings.complete.call(this); 100 | } 101 | }); 102 | // Show intercept logic 103 | function showIntercept() { 104 | // Wait for show_delay seconds before actually showing anything 105 | var tid = window.setTimeout(function() { 106 | if (use_ga) { 107 | ga('send', 'event', 'interceptjs', 'show_intercept_' + settings.type, window.location.href); 108 | } 109 | switch (settings.type) { 110 | // Popup 111 | case 'popup': 112 | 113 | break; 114 | // Modal 115 | case 'modal': 116 | $('body').append(html_modal); 117 | $('#ijs_modal').modal({ 118 | fadeDuration: 100 119 | }); 120 | break; 121 | // Banner 122 | case 'banner': 123 | default: 124 | // Insert banner at the top 125 | $('body').prepend(html_banner).show(); 126 | } 127 | // Click events: banner 128 | $('.ijs_close').on('click', function() { 129 | if (use_ga) { 130 | ga('send', 'event', 'interceptjs', 'close_intercept_' + settings.type, window.location.href); 131 | } 132 | $('.ijs_intercept').hide(); 133 | ijs.user_dismiss = 1; 134 | Cookies.set('ijs', ijs); 135 | return; 136 | }); 137 | $('.ijs_click').on('click', function() { 138 | if (use_ga) { 139 | ga('send', 'event', 'interceptjs', 'click_intercept_' + settings.type, window.location.href); 140 | } 141 | $('.ijs_intercept').hide(); 142 | ijs.user_dismiss = 1; 143 | Cookies.set('ijs', ijs); 144 | return; 145 | }); 146 | // Click events: modal 147 | $('#ijs_modal').on($.modal.CLOSE, function(event, modal) { 148 | if (use_ga) { 149 | ga('send', 'event', 'interceptjs', 'close_intercept_' + settings.type, window.location.href); 150 | } 151 | ijs.user_dismiss = 1; 152 | Cookies.set('ijs', ijs); 153 | return; 154 | }); 155 | return; 156 | }, settings.show_delay); 157 | } 158 | }; 159 | }(jQuery)); 160 | --------------------------------------------------------------------------------