-
Notifications
You must be signed in to change notification settings - Fork 0
/
event-example.html
131 lines (129 loc) · 5.52 KB
/
event-example.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="http://branch.io/img/logo_icon_black.png" property="og:image" />
<meta content="Branch Metrics Web SDK Example App" property="og:title" />
<meta content="A basic example to demonstrate some of the ways that the Web SDK can be used" property="og:description" />
<title>Branch View - Branch Metrics</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style type="text/css">
.btn {
margin-top: 5px;
}
.example-input {
width: 125px;
display: inline-block;
margin-top: 5px;
vertical-align: middle;
}
.radio-input {
margin-right: 10px !important;
margin-left: 20px !important;
}
.row {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="row col-lg-8 col-lg-offset-2">
<h2>Branch Metrics Branch View Example</h2>
</div>
<section>
<div class="row col-lg-8 col-lg-offset-2">
<h4>Old Banner</h4>
<div class="group">
<button id="banner" class="btn btn-warning">.banner()</button>
</div>
<hr>
<h4>Branch Views - Banners</h4>
<div class="group">
<button id="track-1i" class="btn btn-info">.track('cyan')</button>
<button id="track-2i" class="btn btn-info">.track('magenta')</button>
<button id="track-3i" class="btn btn-info">.track('yellow')</button>
<button id="track-4i" class="btn btn-info">.track('black')</button>
</div>
<hr>
<h4>Branch Views - Interstitials</h4>
<div class="group">
<button id="track-1b" class="btn btn-info">.track('red')</button>
<button id="track-2b" class="btn btn-info">.track('green')</button>
<button id="track-3b" class="btn btn-info">.track('blue')</button>
<button id="track-4b" class="btn btn-info">.track('white')</button>
</div>
<h4>Branch Views - Free Form</h4>
<div class="group">
<label><input id="edit-1c" placeholder="rainbow" /> Custom Event </label>
<br/>
<button id="track-1c" class="btn btn-info">.track( { the event you entered above } )</button>
</div>
</div>
</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<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="dist/build.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 banner closeBanner creditHistory credits data deepview deepviewCta first getCode init link logout redeem referrals removeListener sendSMS setIdentity track validateCode".split(" "), 0);
// Note that this example is using the key in two places, here and below
branch.init('key_live_feebgAAhbH9Tv85H5wLQhpdaefiZv5Dv', function(err, data) {
});
</script>
<script type="text/javascript">
var sampleParams = {
tags: [ 'tag1', 'tag2' ],
channel: 'sample app',
feature: 'create link',
stage: 'created link',
type: 1,
data: {
mydata: 'bar',
'$desktop_url': 'https://cdn.branch.io/example.html',
'$og_title': 'Branch Metrics',
'$og_description': 'Branch Metrics',
'$og_image_url': 'http://branch.io/img/logo_icon_white.png'
}
};
$('#track-1i').click(function() {branch.track('cyan',{'metadata foo': 'metadata bar'},function(err) {});});
$('#track-2i').click(function() {branch.track('magenta',{'metadata foo': 'metadata bar'},function(err) {});});
$('#track-3i').click(function() {branch.track('yellow',{'metadata foo': 'metadata bar'},function(err) {});});
$('#track-4i').click(function() {branch.track('black',{'metadata foo': 'metadata bar'},function(err) {});});
$('#track-1b').click(function() {branch.track('red',{'metadata foo': 'metadata bar'},function(err) {});});
$('#track-2b').click(function() {branch.track('green',{'metadata foo': 'metadata bar'},function(err) {});});
$('#track-3b').click(function() {branch.track('blue',{'metadata foo': 'metadata bar'},function(err) {});});
$('#track-4b').click(function() {branch.track('white',{'metadata foo': 'metadata bar'},function(err) {});});
$('#track-1c').click(function() {
var eventName = String($('#edit-1c').val());
if(typeof eventName.trim === 'function') {
eventName = eventName.trim();
}
if (eventName.length > 0) {
branch.track(eventName,{'metadata foo': 'metadata bar'},function(err) {});
}
else {
alert('Enter an alert in the box to fire it off');
}
});
$('#banner').click(function() {
branch.banner(
{
icon: 'http://icons.iconarchive.com/icons/wineass/ios7-redesign/512/Appstore-icon.png',
title: 'Demo App',
description: 'Branch Demo app!',
openAppButtonText: 'Open',
downloadAppButtonText: 'Download',
reviewCount: 1000, // Review count
rating: 5, // Average rating from 0 to 5 in increments of .5
iframe: true, // Show banner in an iframe if CSS on your page is conflicting
showMobile: true, // true by default, just set here for an example
showDesktop: true, // true by default, just set here for an example
disableHide: false, // false by default, just set here for an example
forgetHide: true // false by default, just set here for an example
}, // Banner Options
sampleParams // Link data or string of link
);
});
</script>
</body>
</html>