-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
340 lines (340 loc) · 18.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
<!DOCTYPE html>
<html ng-app="urltagApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="Bulk UTM Builder by LeadFerry | Automate UTM Parameter Tagging">
<meta name="description" content="Use this free UTM builder to build 100s of tagged URLs instantly. Save UTM parameter values as templates and collaborate with colleagues.">
<link href="/favicon.png" type="image/png" rel="icon">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" type="text/css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="kwik-u-rltag.min.css" type="text/css" rel="stylesheet">
<style type="text/css">[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }</style>
<title>Bulk UTM Builder by LeadFerry</title>
</head>
<body ng-controller="URLTagCtrl" ng-cloak>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-KHV68B" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-KHV68B');</script>
<!-- End Google Tag Manager -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<div class="btn-group navbar-btn pull-right">
<button type="button" class="btn btn-primary" ng-click="saveAll()">Save</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a ng-click="saveAll()">Save All</a></li>
<li><a ng-click="saveTags()">Save Tags as template</a></li>
<li><a ng-click="saveURLs()">Save URLs as template</a></li>
</ul>
</div>
<div class="btn-group navbar-btn pull-right" ng-init="mouseoverReset=false" ng-mouseenter="mouseoverReset=true" ng-mouseleave="mouseoverReset=false">
<button type="button" class="btn" ng-class="{'btn-danger': mouseoverReset, 'btn-default': !mouseoverReset}" ng-click="resetAll()">Reset</button>
<button type="button" class="btn dropdown-toggle" ng-class="{'btn-danger': mouseoverReset, 'btn-default': !mouseoverReset}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a ng-click="resetAll()">Reset All</a></li>
<li><a ng-click="resetTags()">Reset Tags</a></li>
<li><a ng-click="resetURLs()">Reset URLs</a></li>
</ul>
</div>
<a class="navbar-brand" href="/"><img alt="LeadFerry" src="logo.svg"></a>
</div>
</div>
</nav>
<div class="modal fade" id="modalSave" tabindex="-1" role="dialog" aria-labelledby="modalSaveTitle">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modalSaveTitle">{{modalSaveTitle}}</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-8 col-xs-12 text-center">Your location bar has been updated. Please bookmark this location to retrieve the UTM tags and/or URLs you entered.</div>
<div class="col-sm-4 col-xs-12"><a type="button" ng-click="addBookmark()" class="btn btn-primary col-xs-12" rel="sidebar" title="Bulk UTM Builder by LeadFerry" ng-href="{{bookmarkURL()}}"><span class="glyphicon glyphicon-bookmark"></span> Bookmark</a></div>
</div>
<div class="row">
<div class="col-xs-12 divider">
<span class="badge">or</span>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-xs-12 text-center">Copy the link below to share, email, or keep a record of the values.</div>
<div class="col-sm-8 col-xs-12"><textarea id="modalSaveURL" class="form-control col-xs-12" rows="3" readonly>{{bookmarkURL()}}</textarea></div>
<div class="col-sm-4 col-xs-12"><button type="button" ng-click="copyBookmark()" class="btn btn-primary col-xs-12"><span class="glyphicon glyphicon-duplicate"></span> Copy</button></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="jumbotron text-center">
<h1>Bulk UTM Builder</h1>
<p>Build 100s of URLs with UTM tags appended - instantly.</p>
<p>Collaborate with colleagues and stay consistent with UTM values.</p>
<p>New to UTM tagging? Here’s an in-depth <a href="https://leadferry.com/blog/utm-parameters/" target="_blank">UTM parameters guide.</a></p>
</div>
</div>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-1 control-label">Mode :</label>
<div class="col-sm-11">
<label class="radio-inline">
<input type="radio" name="inputModeOptions" id="inputModeBasic" ng-model="tags.mode" value="basic"> Basic
</label>
<label class="radio-inline">
<input type="radio" name="inputModeOptions" id="inputModeAdvanced" ng-model="tags.mode" value="advanced"> Advanced
</label>
</div>
</div>
<div ng-if="tags.mode=='basic'" class="form-group">
<div class="input-group">
<label for="inputSource" class="control-label input-group-addon">Source</label>
<input type="text" class="form-control" id="inputSource" ng-model="tags.source">
</div>
</div>
<div ng-if="tags.mode=='basic'" class="form-group">
<div class="input-group">
<label for="inputMedium" class="control-label input-group-addon">Medium</label>
<input type="text" class="form-control" id="inputMedium" ng-model="tags.medium">
</div>
</div>
<div ng-if="tags.mode=='advanced'" class="panel panel-primary">
<div class="panel-heading"><div class="row">
<span class="panel-title col-sm-2 col-xs-6">Source/Medium</span>
<div class="col-sm-10 col-xs-6">
<div class="btn-toolbar pull-right" role="toolbar">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary" aria-label="Deselect all preset medium/source" ng-click="toggleAllMediumSource(false)">
<span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-primary" aria-label="Select all preset medium/source" ng-click="toggleAllMediumSource(true)">
<span class="glyphicon glyphicon-check" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div></div>
<div class="panel-body">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#custom_medium" ng-click="$event.preventDefault()" aria-controls="custom_medium" role="tab" data-toggle="tab">Custom</a>
</li>
<li role="presentation" ng-repeat="medium in tags.media">
<a ng-href="#{{medium.tag}}" ng-click="$event.preventDefault()" aria-controls="{{medium.tag}}" role="tab" data-toggle="tab">{{medium.medium}}</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="active tab-pane" id="custom_medium">
<div class="input-group">
<label class="control-label input-group-addon">Medium</label>
<input type="text" class="form-control" id="inputMedium-custom" ng-model="tags.medium">
</div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#custom_source" ng-click="$event.preventDefault()" aria-controls="custom_source" role="tab" data-toggle="tab">Custom</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="active tab-pane" id="custom_source">
<div class="input-group">
<label class="control-label input-group-addon">Source</label>
<input type="text" class="form-control" id="inputSource-custom" ng-model="tags.source">
</div>
</div>
</div>
</div>
<div role="tabpanel" ng-repeat="medium in tags.media" class="tab-pane" id="{{medium.tag}}">
<div class="input-group">
<label class="control-label input-group-addon checkbox"><input type="checkbox" ng-model="medium.enabled">Medium</label>
<input type="text" class="form-control" id="inputMedium-{{medium.tag}}" ng-model="medium.tag" ng-readonly="!medium.enabled">
</div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" ng-repeat="source in medium.sources" ng-class="{'active': $first}">
<a ng-href="#{{medium.tag}}-{{source.tag}}" ng-click="$event.preventDefault()" aria-controls="{{medium.tag}}-{{source.tag}}" role="tab" data-toggle="tab">{{source.source}}</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" ng-repeat="source in medium.sources" ng-class="{'active': $first}" class="tab-pane" id="{{medium.tag}}-{{source.tag}}">
<div class="input-group">
<label class="control-label input-group-addon checkbox"><input type="checkbox" ng-model="source.enabled" ng-checked="source.enabled && medium.enabled" ng-disabled="!medium.enabled">Source</label>
<input type="text" class="form-control" id="inputSource-{{source.tag}}" ng-model="source.tag" ng-readonly="!source.enabled || !medium.enabled">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<label for="inputTerm" class="control-label input-group-addon">Term</label>
<input type="text" class="form-control" id="inputTerm" ng-model="tags.term">
</div>
</div>
<div class="form-group">
<div class="input-group">
<label for="inputContent" class="control-label input-group-addon">Content</label>
<input type="text" class="form-control" id="inputContent" ng-model="tags.content">
</div>
</div>
<div class="form-group">
<div class="input-group">
<label for="inputCampaign" class="control-label input-group-addon">Campaign</label>
<input type="text" class="form-control" id="inputCampaign" ng-model="tags.campaign">
</div>
</div>
<div ng-if="tags.mode=='basic'" class="form-group">
<div class="input-group">
<label for="inputURLs" class="control-label input-group-addon">URL(s)</label>
<textarea id="inputURLs" ng-model="urls.rawURLs" ng-list=" " ng-trim="false" class="form-control" rows="5"></textarea>
</div>
</div>
<div ng-if="tags.mode=='advanced'" class="panel panel-primary">
<div class="panel-heading">
<span class="panel-title">URL(s)</span>
</div>
<div class="panel-body">
<div class="row" ng-repeat="url in urls.rawURLs track by $index">
<div class="col-xs-10 col-sm-11"><div class="row">
<div ng-class="{'col-md-6': (urls.customTags[$index].content || urls.customTags[$index].term), 'col-md-12': !(urls.customTags[$index].content || urls.customTags[$index].term)}">
<div class="input-group">
<input type="text" class="form-control" id="inputURL{{$index}}" ng-model="urls.rawURLs[$index]">
<span class="input-group-btn">
<button ng-if="!(urls.customTags[$index].content || urls.customTags[$index].term)" class="btn btn-default" type="button" ng-click="addContentTerm($index)">
<span class="glyphicon glyphicon-plus"></span><span class="glyphicon glyphicon-tags" aria-hidden="true"></span>
</button>
<button ng-if="urls.customTags[$index].content || urls.customTags[$index].term" class="btn btn-default" type="button" ng-click="removeContentTerm($index)">
<span class="glyphicon glyphicon-minus"></span><span class="glyphicon glyphicon-tags" aria-hidden="true"></span>
</button>
</span>
</div>
</div>
<div ng-if="(urls.customTags[$index].content || urls.customTags[$index].term)" class="col-md-6"><div class="row">
<div class="col-sm-6">
<div class="input-group">
<label for="inputContent-{{$index}}" class="control-label input-group-addon">Content</label>
<input type="text" class="form-control" id="inputContent-{{$index}}" ng-model="urls.customTags[$index].content">
</div>
</div>
<div class="col-sm-6">
<div class="input-group">
<label for="inputTerm-{{$index}}" class="control-label input-group-addon">Term</label>
<input type="text" class="form-control" id="inputTerm-{{$index}}" ng-model="urls.customTags[$index].term">
</div>
</div>
</div></div>
</div></div>
<div class="col-xs-2 col-sm-1">
<button ng-if="$last" type="button" class="btn btn-primary pull-right" aria-label="Add another URL" ng-click="addURL()">
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
</button>
<button ng-if="!$last" type="button" class="btn btn-danger pull-right" aria-label="Remove this URL" ng-click="removeURL($index)">
<span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
</form>
<div class="row"><div class="col-sm-12 table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th colspan="{{1+taggedURLs.headers[tags.mode].length}}">
<button type="button" id="buttonCopy" class="btn btn-default" ng-click="copy()" ng-disabled="taggedURLs.urls.length==0 || (taggedURLs.selectAll==false && taggedURLs.selectSome==false)">
<span class="glyphicon glyphicon-duplicate"></span>
<span>Copy Selected</span>
</button>
<div class="popover alert-danger" role="tooltip">
<div class="arrow"></div>
<div class="popover-content"></div>
</div>
</th>
</tr>
<tr>
<th width="50">
<div class="checkbox">
<label><input type="checkbox" ng-model="taggedURLs.selectAll" ng-indeterminate="taggedURLs.selectSome" ng-change="selectAllToggle()"></label>
</div>
</th>
<th ng-repeat="header in taggedURLs.headers[tags.mode]">
<a ng-click="sortOrder($index)">{{header}}
<span ng-show="taggedURLs.sort.by=='{{header|lowercase}}'" ng-class="{'dropup': !taggedURLs.sort.descending, 'dropdown': taggedURLs.sort.descending}"><span class="caret"></span></span>
</a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="taggedURL in taggedURLs.urls | orderBy:taggedURLs.sort.by:taggedURLs.sort.descending">
<td width="50"><div class="checkbox"><label><input type="checkbox" ng-model="taggedURL.copy"></label></div></td>
<td ng-repeat="header in taggedURLs.headers[tags.mode]">{{taggedURL[(header|lowercase)]}}</td>
</tr>
</tbody>
</table>
</div></div>
</div>
<div class="container-fluid">
<ul class="row faq" ng-init="docs = [
{header: 'What does this UTM builder do?', paragraphs: [
'Adding UTM parameters to your URLs is a recommended approach for tracking campaign performance.',
'Manually adding UTM parameters can be tedious - especially if you have several URLs.',
'Our tool simplifies generating UTM tagged URLs - even if you have 100s of URLs to tag.'
]},
{header: 'How is this tool different from Google URL builder?', paragraphs: [
'Google URL builder is built for tagging one URL at a time.',
'With the bulk UTM builder, in addition to quick tag creation, you can also save UTM tags as templates with our “save” feature. This ensures quick and easy access every time you require tagging.',
'It also helps maintain consistency while tagging. Save the URL as bookmark or collaborate with your colleagues.'
]},
{header: 'Do you save the data that’s entered?', paragraphs: [
'No, we don\'t. But you can.',
'The UTM tagging tool does not send the information you enter to our servers.',
'The save feature works using Hashbang URLs - which basically adds fragment identifiers to the location bar and are never sent to the server.'
]}
]">
<li class="col-md-4 col-sm-6 col-xs-12 pull-left" ng-repeat="doc in docs">
<h3>{{doc.header}}</h3>
<p ng-repeat="para in doc.paragraphs">{{para}}</p>
</li>
</ul>
</div>
<footer class="container-fluid">
<div class="row copyright">
<div class="col-sm-3 text-left invisible">
<p>Follow Us
<i class="fa fa-twitter-square"></i>
<i class="fa fa-facebook-square"></i>
<i class="fa fa-linkedin-square"></i>
<i class="fa fa-google-plus-square"></i>
</p>
</div>
<div class="col-sm-6 text-center">
<p>Copyright © 2015-2016 <a href="//leadferry.com/">LeadFerry Technologies LLP</a>. All rights reserved.</p>
</div>
<div class="col-sm-3 text-right invisible">
<div class="row">
<p class="col-md-6">Terms Of Service</p>
<p class="col-md-6">Privacy Policy</p>
</div>
</div>
</div>
</footer>
<a href="" id="urlParser" style="display:none;"></a>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.min.js" type="text/javascript"></script>
<script src="kwik-u-rltag.min.js" type="text/javascript"></script>
</body>
</html>