├── sup.min.js
├── LICENSE
├── sup.js
└── README.md


/sup.min.js:
--------------------------------------------------------------------------------
1 | /*
2 | 1. Add a hidden form field for each URL parameter you’d like to capture.
3 |    The field’s name should match the key of the URL parameter.
4 | 2. Include the script on the page(s) where you’d like to use it.
5 |    Change queryForm() to queryForm({reset: true}) to reset values upon form submisision.
6 | */
7 | 
8 | var queryForm=function(e){var t=!(!e||!e.reset)&&e.reset,n=window.location.toString().split("?");if(n.length>1){var o=n[1].split("&");for(s in o){var r=o[s].split("=");(t||null===sessionStorage.getItem(r[0]))&&sessionStorage.setItem(r[0],decodeURIComponent(r[1]))}}for(var i=document.querySelectorAll("input[type=hidden], input[type=text]"),s=0;s<i.length;s++){var a=sessionStorage.getItem(i[s].name);a&&(document.getElementsByName(i[s].name)[0].value=a)}};setTimeout(function(){queryForm()},3e3);


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Grigoriy Kogan
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/sup.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | 1. Add a hidden form field for each URL parameter you’d like to capture.
 3 |    The field’s name should match the key of the URL parameter.
 4 | 2. Include the script on the page(s) where you’d like to use it.
 5 |    Change queryForm() to queryForm({reset: true}) to reset values upon form submisision.
 6 | */
 7 | 
 8 | var queryForm = function(settings){
 9 |   var reset = settings && settings.reset ? settings.reset : false;
10 |   var self = window.location.toString();
11 |   var querystring = self.split("?");
12 |   if (querystring.length > 1) {
13 |     var pairs = querystring[1].split("&");
14 |     for (i in pairs) {
15 |       var keyval = pairs[i].split("=");
16 |       if (reset || sessionStorage.getItem(keyval[0]) === null) {
17 |         sessionStorage.setItem(keyval[0], decodeURIComponent(keyval[1]));
18 |       }
19 |     }
20 |   }
21 |   var hiddenFields = document.querySelectorAll("input[type=hidden], input[type=text]");
22 |   for (var i=0; i<hiddenFields.length; i++) {
23 |     var param = sessionStorage.getItem(hiddenFields[i].name);
24 |     if (param) document.getElementsByName(hiddenFields[i].name)[0].value = param;
25 |   }
26 | }
27 | 
28 | setTimeout(function(){queryForm();}, 3000);


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Sup.js: Save URL Parameters
 2 | SUP (Save URL Parameters) is a script that lets you save URL parameters and values in a visitor's session, then insert them into any form the visitor submits during their session.
 3 | 
 4 | [See demo&rarr;](https://www.gkogan.co/resources/sup-demo/?utm_source=test-source&utm_medium=test-medium&utm_campaign=awesome-campaign&referral-code=04820&randomParameter=howdy)
 5 | 
 6 | See longer article with background and examples: [Get URL + UTM Parameters with Javascript](https://www.gkogan.co/blog/save-url-parameters/).
 7 | 
 8 | ## Why
 9 | 
10 | Adding parameters (or queries) to a URL can provide additional information about website visitors, such as:
11 | 
12 | * The marketing source of the visitor, using standard UTM tags (utm_medium, utm_campaign, utm_source, utm_content, and utm_term) or custom parameters.
13 | * The search query they used on your site.
14 | * The referral, affiliate, or promo linked they used to reach your site.
15 | 
16 | It is often helpful to capture that information any time a visitor submits a form on your website. For example, if a visitor completes a signup or contact form, you might want to know what marketing campaign can be attributed with that conversion. Some marketing platforms and form tools are able to capture URL parameters, but only if they are present on the page&mdash;if a visitor views more than one page then the URL parameters will not be saved. Unfortunately this means it works only if the visitor completes the form on the same page they landed on, without navigating away.
17 | 
18 | Some analytics tools can recognize and report on some or all URL parameters, but they don't show it side-by-side with form data. For example, Google Analytics only parses UTM parameters, and it does not allow you to save personal information from forms. In many cases you may want to see those values for every form completion.
19 | 
20 | There exist many similar scripts that capture UTM tags (utm_medium, etc) but not any custom parameters. They are not helpful if you want to track a custom parameter such as `referral`, `promo`, `ref`, `search`, and so on.
21 | 
22 | This script captures and saves *any* parameter in the URL, then inserts the value of that parameter into *any* form on your site that has a `name` that matches the parameter key. You can make the form field hidden since it is filled in automatically and does not need any input from the visitor.
23 | 
24 | ## How
25 | 
26 | 1. Add the following code to every page on your site where you want to capture URL parameters or insert them into forms. Just before the </body> tag would be a good place.
27 | 2. Add a form field and give it a `name` attribute that matches the URL parameter whose value you want to capture.
28 | 
29 | ```
30 | 
31 | <script src="path-to-script/sup.min.js"></script>
32 | 
33 | ```
34 | 
35 | (Where `path-to-script` is the location of the script.)
36 | 
37 | Or you can load the script directly from GitHub:
38 | 
39 | ```
40 | 
41 | <script src="https://cdn.jsdelivr.net/gh/gkogan/sup-save-url-parameters/sup.min.js"></script>
42 | 
43 | ```
44 | 
45 | That's it!
46 | 
47 | If you want to reset (clear) saved paramater values after the visitor submits a form, you can change `queryForm()` to `queryForm({reset: true})`.
48 | 
49 | ## Example
50 | 
51 | ```
52 | <html>
53 | <body>
54 |   <form action="#" enctype="text/plain">
55 |     <label for="email">Email</label>
56 |     <input type="email" name="email" placeholder="Email" required>
57 |     <input type="hidden" name="utm_source" value="">
58 |     <input type="hidden" name="utm_medium" value="">
59 |     <input type="hidden" name="utm_campaign" value="">
60 |     <input type="submit" value="Submit">
61 |   </form>
62 | 
63 |   <script src="path-to-script/sup.min.js"></script>
64 | </body>
65 | </html>
66 | ```
67 | This form has only one field that is visible. However, if any of the visited URLs during the visitor's session had URL paramaters matching `utm_medium`, `utm_campaign`, or `utm_source`, the values of those parameters will be submitted with the form.
68 | 
69 | If the a visitor landed on `https://www.example.com/?utm_source=google&utm_medium=cpc&utm_campaign=summer-promotion`, then navigated to other pages, then finally submitted this form with their email, you would also see the values `google`, `cpc`, and `summer-promotion` in the form submission.
70 | 
71 | ## Contact
72 | Twitter: [@grigoriy_kogan](https://twitter.com/grigoriy_kogan)
73 | Web: [GKogan.co](http://www.gkogan.co)
74 | 
75 | ## License
76 | Licensed under the MIT and GPL licenses.
77 | 


--------------------------------------------------------------------------------