API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jan 21st, 2019
92
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.82 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <div class="panel panel-bordered panel-overview">
  3. <div class="panel-heading">
  4. <h4 class="panel-title">
  5. <i class="fa fa-line-chart"></i> Top metrics
  6. </h4>
  7. </div>
  8. <div class="panel-body">
  9. <div class="grid-informers">
  10. <div class="cell">
  11. <div class="informer">
  12. <span class="sparkbar sparkbar-1"></span>
  13. <span class="name">
  14. Clicks
  15. </span>
  16. <span class="val down">
  17. 370
  18. </span>
  19. </div>
  20. </div>
  21. <div class="cell">
  22. <div class="informer">
  23. <span class="sparkbar sparkbar-2"></span>
  24. <span class="name">
  25. Conversions
  26. </span>
  27. <span class="val down">
  28. 38
  29. </span>
  30. </div>
  31. </div>
  32. <div class="cell">
  33. <div class="informer">
  34. <span class="sparkbar sparkbar-5"></span>
  35. <span class="name">
  36. Events
  37. </span>
  38. <span class="val">
  39. 0
  40. </span>
  41. </div>
  42. </div>
  43. <div class="cell">
  44. <div class="informer">
  45. <span class="sparkbar sparkbar-3"></span>
  46. <span class="name">
  47. Revenue
  48. </span>
  49. <span class="val down">
  50. $ 83.6
  51. </span>
  52. </div>
  53. </div>
  54. <div class="cell">
  55. <div class="informer">
  56. <span class="sparkbar sparkbar-4"></span>
  57. <span class="name">
  58. AVG EPC
  59. </span>
  60. <span class="val down">
  61. $ 0.2259
  62. </span>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. <div class="panel panel-bordered panel-chart panel-table">
  69. <div class="panel-heading">
  70. <h4 class="panel-title">
  71. <i class="fa fa-area-chart"></i> Overview
  72. </h4>
  73. <div class="panel-tools">
  74. <ul class="data-tabs">
  75. <li class="active">
  76. <a href="#tabChartClicksAndConversions" class="tab" data-toggle="tab">Clicks & Conversions</a>
  77. </li>
  78. <li>
  79. <a href="#tabRevenue" class="tab " data-toggle="tab">Revenue</a>
  80. </li>
  81. </ul>
  82. </div>
  83. </div>
  84. <div class="panel-body">
  85. <div class="tab-content wrapper-chart">
  86. <div class="tab-pane active" id="tabChartClicksAndConversions">
  87. <div class="line-chart-1"></div>
  88. </div>
  89. <div class="tab-pane " id="tabRevenue">
  90. <div class="line-chart-2"></div>
  91. </div>
  92. </div>
  93. <div class="table-responsive">
  94. <table class="table table-hover table-panel-body dataTable table-colResizable table-dasboard-summary border-top table-bordered-col"
  95. id="dashboardCampaignsTable">
  96. <thead>
  97. <tr>
  98. <th class="t-col-30">
  99. <div class="relative">Campaign</div>
  100. </th>
  101. <th>
  102. <div class="relative">Format</div>
  103. </th>
  104. <th>
  105. <div class="relative">Clicks</div>
  106. </th>
  107. <th>
  108. <div class="relative">Total clicks</div>
  109. </th>
  110. <th>
  111. <div class="relative">Conversions</div>
  112. </th>
  113. <th>
  114. <div class="relative">Events</div>
  115. </th>
  116. <th>
  117. <div class="relative">Revenue, $</div>
  118. </th>
  119. <th>
  120. <div class="relative">CR %</div>
  121. </th>
  122. <th>
  123. <div class="relative">EPC, $</div>
  124. </th>
  125. </tr>
  126. </thead>
  127. <tbody>
  128. <tr>
  129. <td>
  130. <a href="/offers/campaign/10360241"
  131. target="_blank">(41369) [WEB+MOB] Aldi Voucher SOI /UK *Reward Program* - CPA - $2.20</a>
  132. </td>
  133. <td>CPA</td>
  134. <td class="text-right">114</td>
  135. <td class="text-right">129</td>
  136. <td class="text-right">11</td>
  137. <td class="text-right">0</td>
  138. <td class="text-right">24.20</td>
  139. <td class="text-right">9.65
  140. /8.53 </td>
  141. <td class="text-right">0.2123
  142. /0.1876</td>
  143. </tr>
  144. <tr>
  145. <td>
  146. <a href="/offers/campaign/10378395"
  147. target="_blank">(53634) [WEB+MOB] Morrinsons voucher /UK SOI *Reward Program* - CPA - $2.20</a>
  148. </td>
  149. <td>CPA</td>
  150. <td class="text-right">252</td>
  151. <td class="text-right">260</td>
  152. <td class="text-right">27</td>
  153. <td class="text-right">0</td>
  154. <td class="text-right">59.40</td>
  155. <td class="text-right">10.71
  156. /10.38 </td>
  157. <td class="text-right">0.2357
  158. /0.2285</td>
  159. </tr>
  160. <tr>
  161. <td>
  162. <a href="/offers/campaign/10379327"
  163. target="_blank">(51714) [WEB+MOB] Social Mainstream Non-Targeted /Global Non-Targeted traffic only - CPC - RevShare - %50.00</a>
  164. </td>
  165. <td>RevShare</td>
  166. <td class="text-right">4</td>
  167. <td class="text-right">10</td>
  168. <td class="text-right">0</td>
  169. <td class="text-right">0</td>
  170. <td class="text-right">0.00</td>
  171. <td class="text-right">0.00
  172. /0.00 </td>
  173. <td class="text-right">0.0000
  174. /0.0000</td>
  175. </tr>
  176. </tbody>
  177. <tfoot>
  178. <tr>
  179. <td>Total</td>
  180. <td></td>
  181. <td class="text-right">370</td>
  182. <td class="text-right">399</td>
  183. <td class="text-right">38</td>
  184. <td class="text-right">0</td>
  185. <td class="text-right">83.60</td>
  186. <td class="text-right">10.27
  187. /9.52 </td>
  188. <td class="text-right">0.2259
  189. /0.2095</td>
  190. </tr>
  191. </tfoot>
  192. </table>
  193. </div>
  194. </div>
  195. </div>
  196.  
  197. <script type="text/javascript">
  198.  
  199. $(function() {
  200. $('.sparkbar-1').sparkline([19, 4, 5, 1, 4, 6, 6, 23, 32, 45, 29, 35, 39, 31, 39, 43, 37, 1, 0, 0, 0, 0, 0, 0], {
  201. 'type': 'bar',
  202. 'height': '33px',
  203. 'width': '62px',
  204. 'disableInteraction': true,
  205. 'barColor': '#9acffc',
  206. 'barWidth': sparklineBarWidthDetect([19, 4, 5, 1, 4, 6, 6, 23, 32, 45, 29, 35, 39, 31, 39, 43, 37, 1, 0, 0, 0, 0, 0, 0]),
  207. });
  208.  
  209. $('.sparkbar-2').sparkline([3, 0, 2, 0, 2, 1, 0, 2, 1, 3, 3, 2, 4, 3, 3, 5, 4, 0, 0, 0, 0, 0, 0, 0], {
  210. 'type': 'bar',
  211. 'height': '33px',
  212. 'width': '62px',
  213. 'disableInteraction': true,
  214. 'barColor': '#0086d8',
  215. 'barWidth': sparklineBarWidthDetect([3, 0, 2, 0, 2, 1, 0, 2, 1, 3, 3, 2, 4, 3, 3, 5, 4, 0, 0, 0, 0, 0, 0, 0]),
  216. });
  217.  
  218. $('.sparkbar-5').sparkline([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], {
  219. 'type': 'bar',
  220. 'height': '33px',
  221. 'width': '62px',
  222. 'disableInteraction': true,
  223. 'barColor': '#72addf',
  224. 'barWidth': sparklineBarWidthDetect([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]),
  225. });
  226.  
  227. $('.sparkbar-3').sparkline([6.6, 0, 4.4, 0, 4.4, 2.2, 0, 4.4, 2.2, 6.6, 6.6, 4.4, 8.8, 6.6, 6.6, 11, 8.8, 0, 0, 0, 0, 0, 0, 0], {
  228. 'type': 'bar',
  229. 'height': '33px',
  230. 'width': '62px',
  231. 'disableInteraction': true,
  232. 'barColor': '#21b7d3',
  233. 'barWidth': sparklineBarWidthDetect([6.6, 0, 4.4, 0, 4.4, 2.2, 0, 4.4, 2.2, 6.6, 6.6, 4.4, 8.8, 6.6, 6.6, 11, 8.8, 0, 0, 0, 0, 0, 0, 0]),
  234. });
  235.  
  236. $('.sparkbar-4').sparkline([0.34736842105263, 0, 0.88, 0, 1.1, 0.36666666666667, 0, 0.19130434782609, 0.070967741935484, 0.17368421052632, 0.22758620689655, 0.14666666666667, 0.352, 0.22758620689655, 0.16923076923077, 0.25581395348837, 0.23783783783784, 0, 0, 0, 0, 0, 0, 0], {
  237. 'type': 'bar',
  238. 'height': '33px',
  239. 'width': '62px',
  240. 'disableInteraction': true,
  241. 'barColor': '#ffd238',
  242. 'barWidth': sparklineBarWidthDetect([0.34736842105263, 0, 0.88, 0, 1.1, 0.36666666666667, 0, 0.19130434782609, 0.070967741935484, 0.17368421052632, 0.22758620689655, 0.14666666666667, 0.352, 0.22758620689655, 0.16923076923077, 0.25581395348837, 0.23783783783784, 0, 0, 0, 0, 0, 0, 0]),
  243. });
  244.  
  245. var range = $('input[name="date_range"]').val();
  246. $.fn.dataTable.ext.errMode = 'none';
  247. oTable = $('#dashboardCampaignsTable').on( 'error.dt', function ( e, settings, techNote, message ) {
  248. console.log( 'An error has been reported by DataTables: ', message );
  249. } )
  250. .DataTable({
  251. "dom": '' +
  252. '<"top">rt<"table-bottom"' +
  253. '<"row"<"pull-left entries" l>' +
  254. '<"pull-right text-right" p>>>' +
  255. '<"clear">',
  256. "order": [[6, "desc"], [2, "desc"]],
  257. "pagingType": "full_numbers",
  258. "language": {
  259. "emptyTable": "No data available - Please choose a campaign for the report or decrease a report period",
  260. "paginate": {
  261. "previous": "<",
  262. "first": "<<",
  263. "next": ">",
  264. "last": ">>"
  265. },
  266. "sLengthMenu": "Show _MENU_ <span class='total'>entries from _TOTAL_ </span>"
  267. },
  268. "aLengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
  269. });
  270.  
  271. function showCharts() {
  272. $('.line-chart-1').highcharts({
  273. title: false,
  274. xAxis: [{
  275. categories: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
  276. crosshair: {
  277. width: 1,
  278. color: '#db5b5b',
  279. zIndex: 3
  280. },
  281. lineWidth: 2,
  282. lineColor: "#eaedf1"
  283. }],
  284. yAxis: [
  285. {
  286. gridLineWidth: 1,
  287. gridLineColor: '#eaedf1',
  288. title: {
  289. text: 'Conversions, Events'
  290. },
  291. labels: {
  292. format: ''
  293. }
  294.  
  295. }, {
  296. gridLineWidth: 0,
  297. title: {
  298. text: 'Clicks'
  299. },
  300. labels: {
  301. format: ''
  302. },
  303. opposite: true
  304. }],
  305. tooltip: {
  306. shared: true
  307. },
  308. credits: false,
  309. series: [{
  310. name: 'Conversions',
  311. type: 'column',
  312. color: '#9acffc',
  313. yAxis: 0,
  314. data: [3, 0, 2, 0, 2, 1, 0, 2, 1, 3, 3, 2, 4, 3, 3, 5, 4, 0, 0, 0, 0, 0, 0, 0]
  315. }, {
  316. name: 'Events',
  317. type: 'column',
  318. color: '#72addf',
  319. yAxis: 0,
  320. data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  321. }, {
  322. name: 'Clicks',
  323. type: 'line',
  324. color: '#0086d8',
  325. yAxis: 1,
  326. data: [19, 4, 5, 1, 4, 6, 6, 23, 32, 45, 29, 35, 39, 31, 39, 43, 37, 1, 0, 0, 0, 0, 0, 0],
  327. marker: {
  328. enabled: true,
  329. fillColor: '#0086d8',
  330. lineColor: '#fff',
  331. lineWidth: 2,
  332. radius: 5
  333. }
  334. }],
  335. legend: {
  336. itemStyle: {
  337. font: '14px "Source Sans Pro", sans-serif',
  338. color: '#4F5153'
  339. }
  340. }
  341. });
  342.  
  343. $('.line-chart-2').highcharts({
  344. title: false,
  345. xAxis: {
  346. categories: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
  347. lineWidth: 2,
  348. crosshair: {
  349. width: 1,
  350. color: '#db5b5b',
  351. zIndex: 3
  352. },
  353. lineColor: "#eaedf1"
  354. },
  355. yAxis: {
  356. title: {
  357. text: 'Revenue'
  358. },
  359. gridLineWidth: 1,
  360. gridLineColor: '#eaedf1',
  361. plotLines: [{
  362. value: 0,
  363. width: 1,
  364. color: '#808080'
  365. }]
  366. },
  367. legend: {
  368. layout: 'horizontal',
  369. align: 'center',
  370. verticalAlign: 'bottom',
  371. borderWidth: 0,
  372. itemStyle: {
  373. font: '14px "Source Sans Pro", sans-serif',
  374. color: '#4F5153'
  375. }
  376. },
  377. credits: false,
  378. series: [{
  379. name: 'Revenue',
  380. color: '#ffc600',
  381. fillOpacity: '0.2',
  382. type: 'area',
  383. data: [6.6, 0, 4.4, 0, 4.4, 2.2, 0, 4.4, 2.2, 6.6, 6.6, 4.4, 8.8, 6.6, 6.6, 11, 8.8, 0, 0, 0, 0, 0, 0, 0]
  384. }]
  385. });
  386. }
  387.  
  388. showCharts();
  389. $('.panel-heading .data-tabs a[data-toggle="tab"]').on('shown.bs.tab', function () {
  390. showCharts();
  391. });
  392. });
  393. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!