-
Notifications
You must be signed in to change notification settings - Fork 1
/
ebates-email-link-creator.html
304 lines (261 loc) · 12.9 KB
/
ebates-email-link-creator.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
<!DOCTYPE html>
<html>
<head>
<title>Email Deep Link Generator for Ebates</title>
<link rel="icon" href="https://branch.io/img/press/kit/badge-black.png" />
<link rel="stylesheet" href="styles/ebates.css" />
<!-- jQuery Library via Google CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Import clipboard.js -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>
<!-- Import Papa Parse -->
<script src="resources/js_libraries/PapaParse-4.3.2/papaparse.min.js"></script>
<!-- Import FileSaver.js -->
<script src="resources/js_libraries/FileSaver.js-master/FileSaver.min.js"></script>
<!-- Import Bluebird.js -->
<script src="resources/js_libraries/bluebird.min.js"></script>
<!-- Import Branch Web SDK and initialize -->
<script type="text/javascript">
(function(b,r,a,n,c,h,_,s,d,k){if(!b[n]||!b[n]._q){for(;s<_.length;)c(h,_[s++]);d=r.createElement(a);d.async=1;d.src="https://cdn.branch.io/branch-latest.min.js";k=r.getElementsByTagName(a)[0];k.parentNode.insertBefore(d,k);b[n]=h}})(window,document,"script","branch",function(b,r){b[r]=function(){b._q.push([r,arguments])}},{_q:[],_v:1},"addListener applyCode autoAppIndex banner closeBanner closeJourney creditHistory credits data deepview deepviewCta first getCode init link logout redeem referrals removeListener sendSMS setBranchViewData setIdentity track validateCode trackCommerceEvent".split(" "), 0);
branch.init('key_live_ikAUgIWmYsmBorf7wt98bbelqyozvurA', function(err, data) {});
</script>
<!-- Script to generate 3P link based on user inputs -->
<script>
function generate3PLink() {
var domain = 'go.ebat.es/imsk';
var ESPProviderCode = 'e_ep';
var original_url = window.document.getElementById("originalUrl").value;
var deeplink_path = window.document.getElementById("deeplinkPath").value;
var web_only = window.document.getElementById("webOnly").checked;
web_only = web_only == true ? "TRUE" : "FALSE";
var output = '';
if (original_url == '') {
output = 'Please enter a destination URL.'
window.document.getElementById("originalUrl").focus();
} else if (deeplink_path == '') {
output = 'Please enter a deeplink path.'
window.document.getElementById("deeplinkPath").focus();
} else {
output = get3PLink(domain, original_url, deeplink_path, ESPProviderCode, web_only);
branch.track(
"Built Link",
{
"client" : "Ebates",
"link_created" : output,
"branch_domain": domain,
"esp" : ESPProviderCode,
"original_url" : original_url,
"deeplink_path" : deeplink_path,
},
function(err) {
console.log(err);
}
);
}
window.document.getElementById("generated3PLink").value = output;
}
function get3PLink(domain, original_url, deeplink_path, ESPProviderCode, web_only) {
var eeid = original_url.substring(original_url.indexOf('eeid=') + 5, original_url.indexOf('eeid=') + 10);
if (original_url.indexOf('&AutoLoginID=${Profile.AUTOLOGIN_ID}') != -1) {
original_url = original_url.substring(0, original_url.indexOf('&AutoLoginID=${Profile.AUTOLOGIN_ID}'));
}
var encodedOriginalURL = encodeURIComponent(original_url) + '%26AutoLoginID%3D${Profile.AUTOLOGIN_ID}';
var encodedDeeplinkPath = deeplink_path + encodeURIComponent('?eeid=' + eeid + '&token=') + '${Profile.AUTOLOGIN_ID}';
var webOnly = web_only && web_only == 'TRUE' ? '&$web_only=true' : '';
var branch_url = 'https://' + domain + '/3p?$3p=' + ESPProviderCode + '&$eeid=' + eeid + webOnly +'&$deeplink_path=' + encodedDeeplinkPath + '&$original_url=' + encodedOriginalURL;
return branch_url;
}
function parseFile() {
var domain = 'go.ebat.es/imsk';
var ESPProviderCode = 'e_ep';
var selectedFile = document.getElementById('files').files[0];
var csv_array = 'destination,3p_link\n';
// Make sure we have everything
if (selectedFile == null) {
alert("Please upload a file");
return;
} else {
var length = 0;
Papa.parse(selectedFile, {
header: true,
step: function(row) {
length++;
original_url = row.data[0]["destination_url"];
var web_only = row.data[0]["web_only"];
if (web_only == 'FALSE') {
web_only = false;
}
if (row.data[0]["deeplink_path"] != null) {
deeplink_path = row.data[0]["deeplink_path"];
csv_array += (original_url + ',' + get3PLink(domain, original_url, deeplink_path, ESPProviderCode, web_only) + '\n');
} else {
original_url = stripAutoLogin(original_url);
deeplink_path = updateDeeplinkPathField(false, original_url);
P.resolve(deeplink_path).then(function(result) {
csv_array += (original_url + ',' + get3PLink(domain, original_url, result, ESPProviderCode, web_only) + '\n');
});
}
},
complete: function(results) {
setTimeout(function() {
var blob = new Blob([csv_array], {type: "text/csv;charset=utf-8"});
saveAs(blob, "BranchLinks.csv");
}, 1000 * length);
}
});
}
}
function stripAutoLogin(url) {
var i = url.indexOf("%26AutoLoginID%3D${Profile.AUTOLOGIN_ID}");
var j = url.indexOf("&AutoLoginID=${Profile.AUTOLOGIN_ID}");
if (i != -1) {
url = url.substring(0, i);
}
if (j != -1) {
url = url.substring(0, j);
}
return url;
}
function toggleView() {
$(".toggle").toggle();
}
function scrapeURL(url) {
var url = "https://allorigins.us/get?url=" + encodeURIComponent(url) + "&callback=?";
return $.get(url, function(response) {});
}
function updateDeeplinkPathField(display, urlIn) {
if (display) {
var original_url = window.document.getElementById("originalUrl").value;
var deeplink_path = window.document.getElementById("deeplinkPath");
deeplink_path.readOnly = true;
}
var url = urlIn != null ? urlIn : original_url;
url = stripAutoLogin(url);
return P.props(scrapeURL(url)).then(function(response) {
var scrapedDeeplinkPath = "";
var metaTags = $(response.contents).find('meta property').prevObject;
var i;
for (i = 1; i < metaTags.length; i += 2 ) {
if (metaTags[i].nodeName != "#text") {
if (metaTags[i].getAttribute("property") == "al:ios:url") {
scrapedDeeplinkPath = metaTags[i].content.indexOf("ebates://") != -1 ? metaTags[i].content.substring(9) : metaTags[i].content;
}
}
}
if (display) {
deeplink_path.value = scrapedDeeplinkPath != "" ? scrapedDeeplinkPath : "Couldn't grab deep link path from the URL. ";
deeplink_path.readOnly = false;
}
return scrapedDeeplinkPath;
}).error(function(err) { console.log(err); });
}
</script>
</head>
<body class="container">
<!-- Initialize clipboard.js -->
<script>(function(){new Clipboard('#copy-button');})();</script>
<div>
<img src="https://branch.io/img/press/kit/badge-black.png" style="width:100px;">
<img src="resources/images/ebates.svg" style="width:100px;">
<h1 style="display:inline;">Email Deep Link Generator for Ebates</h1>
</div>
<br />
<button class="form-control toggle" style="float:none; background-color:#d3d3d3;" onclick="toggleView()">Switch to CSV upload mode</button>
<button class="form-control toggle" style="float:none; background-color:#d3d3d3; display:none;" onclick="toggleView()">Switch to one-off link mode</button>
<!-- Description for one-off link creation -->
<section class="container toggle" id="description_oneoff">
<h3>One-Off Link Generator</h3>
<h3>How to use this tool</h3>
<p><ol>
<li>Enter the final destination URL where you're trying to send your users. </li>
<li>The link creator will attempt to grab the deep link path from that URL. If no deep link path is present on that page, enter the desired path manually. </li>
<li>Click Create Email Link. </li>
</ol></p>
<br />
</section>
<!-- Description for CSV upload -->
<section class="container toggle" id="description_csv" style="display:none">
<h3>CSV Link Generator</h3>
<h3>How to use this tool</h3>
<p><ol>
<li>Upload a CSV file consisting of 2 columns: "destination_url", and "web_only".
<li>3P Link Generator will translate these into Branch email links and output a .csv file with columns "destination_url, 3p_link"</li>
</ol></p>
<br />
</section>
<section class="container" id="link-creation">
<!-- Table for user input -->
<table>
<tbody>
<tr class="toggle">
<td><label style="margin-right: 10px">Destination Web URL</label></td>
<td><input class="form-control" onchange="updateDeeplinkPathField(true)" style="width:500px" id="originalUrl" type="text" placeholder=""/></td>
<td><div class="help-tip"><p>This is the destination URL where you'd like the clicker to end up.</p></div></td>
</tr>
<tr class="toggle">
<td><label style="margin-right: 10px">Deep Link Path</label></td>
<td><input class="form-control" style="width:500px" id="deeplinkPath" type="text" placeholder=""/></td>
<td><div class="help-tip"><p>This is the path given delivered to the app so it can deep link users correctly.</p></div></td>
</tr>
<tr class="toggle">
<td><label style="margin-right: 10px">Web Only</label></td>
<td><input class="form-control" style="width:500px" id="webOnly" type="checkbox" placeholder=""/></td>
<td><div class="help-tip"><p>Check this box to make the resulting link never open the app, and always open mobile web.</p></div></td>
</tr>
<tr class="toggle" style="display:none;">
<td><label style="margin-right: 10px">File Upload</label></td>
<td><input type="file" id="files"></td>
</tr>
</tbody>
</table>
<br/>
<!-- <h3 class="toggle">Add Query parameters</h3> -->
<!-- Deep linking parameters table -->
<!-- <table id="query_params" class="toggle">
<tr id="row-1">
<td><label style="margin-right: 10px">Query Param 1</label></td>
<td><input class="form-control" style="width:500px" id="query-key-1" type="text" placeholder="key 1"/></td>
<td><input class="form-control" style="width:500px" id="query-value-1" type="text" placeholder="value 1"/></td>
</tr>
<tr id="row-2">
<td><label style="margin-right: 10px">Query Param 2</label></td>
<td><input class="form-control" style="width:500px" id="query-key-2" type="text" placeholder="key 2"/></td>
<td><input class="form-control" style="width:500px" id="query-value-2" type="text" placeholder="value 2"/></td>
</tr>
<tr id="row-3">
<td><label style="margin-right: 10px">Query Param 3</label></td>
<td><input class="form-control" style="width:500px" id="query-key-3" type="text" placeholder="key 3"/></td>
<td><input class="form-control" style="width:500px" id="query-value-3" type="text" placeholder="value 3"/></td>
</tr>
<tr id="row-4">
<td><label style="margin-right: 10px">Query Param 4</label></td>
<td><input class="form-control" style="width:500px" id="query-key-4" type="text" placeholder="key 4"/></td>
<td><input class="form-control" style="width:500px" id="query-value-4" type="text" placeholder="value 4"/></td>
</tr>
</table>
<br/>
<button class="btn toggle" id="add-query-button" style="background-color:#d3d3d3; display:inline;" onclick="addQuerylinkParam()">Add Query Param</button>
<button class="btn toggle" id="remove-query-button" style="background-color:#d3d3d3; display:inline;"onclick="removeQuerylinkParam()">Remove Query Param</button> -->
</section>
<section>
<br>
<br>
<div class="text-center"><button class="form-control toggle" style="float:none; background-color:#d3d3d3;" onclick="generate3PLink()">Create Email Link</button></div>
<div class="text-center"><button class="form-control toggle" style="float:none; background-color:#d3d3d3; display:none;" onclick="parseFile()">Process CSV</button></div>
<br>
<br>
</section>
<section class="container toggle" id="linkOutput">
<h3>Generated Email Link
<button class="btn" id="copy-button" style="background-color:#d3d3d3; display:inline;" data-clipboard-target="#generated3PLink">Copy Link</button>
</h3>
<textarea class="form-control" style="height:100px; margin-bottom:5%;" id="generated3PLink" type="text"></textarea>
</section>
</body>
</html>