mirror of
https://github.com/adnexus/luxr-prototype.git
synced 2026-07-26 22:08:52 +00:00
408 lines
12 KiB
HTML
408 lines
12 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
|
||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||
|
||
<title>untitled</title>
|
||
<link rel="stylesheet" href="css/css.css" type="text/css" charset="utf-8" />
|
||
<link rel="stylesheet" href="css/matrix.css" type="text/css" charset="utf-8" />
|
||
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||
<script src="js/highcharts.src.js" type="text/javascript" charset="utf-8"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="container" class="campaign-view">
|
||
|
||
<div class="breadcrumb"><a href="matrix_li.html">Line Items</a> » <b>Norwest Bank — March (26586)</b></div>
|
||
|
||
<div class="content-wrap">
|
||
|
||
<div id="collapsed-lis" class="left-col">
|
||
<div class="shaded"><b>Line Items</b></div>
|
||
<ul class="li-thumbs">
|
||
<li class="current">
|
||
<h4>Norwest Bank — March (26586)</h4>
|
||
</li>
|
||
<li>Slumberland Q4 2011 (928632)</li>
|
||
<li>Essilor (21196)</li>
|
||
<li>All Saints (22756)</li>
|
||
<li>MattressLand (21194)</li>
|
||
<li>AT&T (22754)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div id="li-detail" class="right-col">
|
||
<!-- <div class="expanded-detail">
|
||
<h2>Norwest Bank — March (26586)</h2>
|
||
<div class="stats">
|
||
<dl>
|
||
<dt>State:</dt>
|
||
<dd>Active</dd>
|
||
<dt>Flight dates:</dt>
|
||
<dd>03/17/2011 — 04/22/2011</dd>
|
||
<dt>Lifetime budget:</dt>
|
||
<dd>Unlimited (set on campaign)</dd>
|
||
<dt>Daily budget:</dt>
|
||
<dd>Unlimited (set on campaign)</dd>
|
||
<dt>Revenue:</dt>
|
||
<dd>$3.00 CPM</dd>
|
||
<dt>Advertiser goals:</dt>
|
||
<dd>N/A</dd>
|
||
<dt>User frequency:</dt>
|
||
<dd>1 imp per user per day</dd>
|
||
</dl>
|
||
</div>
|
||
<div class="graphic">
|
||
<label>
|
||
<select name="charted_metric" id="charted-metric">
|
||
<option value="imps">Impressions</option>
|
||
<option value="rev">Revenue</option>
|
||
</select> by Day
|
||
</label>
|
||
<div id="pacing" class="chart">
|
||
|
||
</div>
|
||
</div>
|
||
<div class="actions">
|
||
<h3>Alerts</h3>
|
||
<ul>
|
||
<li class="alert"><a href="#" title="Show me this creative">1 creative has status <b>unauditable</b></a></li>
|
||
<li class="alert"><a href="#" title="Show me this campaign">1 campaign is <b>underdelivering</b></a></li>
|
||
<li><a href="#" title="Change this setting">Frequency cap is <b>very tight</b></a></li>
|
||
</ul>
|
||
</div>
|
||
</div> -->
|
||
<div id="campaigns">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th class="name">Campaign</th>
|
||
<th>Imps</th>
|
||
<th>Spend</th>
|
||
<th>Revenue</th>
|
||
<th>Clicks</th>
|
||
<th>Conversions</th>
|
||
<th>Days Into Flight</th>
|
||
<th>CTR</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="name">
|
||
<div>
|
||
<div class="expandable">▾<!-- ▼ --></div>
|
||
<h4>Norwest Flight 1 - personifi (58591)</h4>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<h3>6,765,720</h3>
|
||
<h5>/ 8,000,591</h5>
|
||
<div class="progress">
|
||
<div class="vr" style="left:85%"></div>
|
||
<div class="fill good" style="width:85%"></div>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<h3>$10,442.36</h3>
|
||
<h5>N/A</h5>
|
||
</td>
|
||
<td>
|
||
<h3>$20,297.16</h3>
|
||
<h5>/ $24,001.77</h5>
|
||
<div class="progress">
|
||
<div class="vr" style="left:85%"></div>
|
||
<div class="fill good" style="width:85%"></div>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<h3>2,089</h3>
|
||
<h5>N/A</h5>
|
||
</td>
|
||
<td>
|
||
<h3>0</h3>
|
||
<h5>N/A</h5>
|
||
</td>
|
||
<td>
|
||
<h3>27</h3>
|
||
<h5>/ 32</h5>
|
||
<div class="progress">
|
||
<div class="vr" style="left:77%"></div>
|
||
<div class="fill status" style="width:77%"></div>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<h3>0.031%</h3>
|
||
<h5>N/A</h5>
|
||
</td>
|
||
</tr>
|
||
<tr class="summary" style="display:none;">
|
||
<td class="expanded-detail-cell" colspan="8">
|
||
<div class="expanded-detail clearfix">
|
||
<h2><a href="#" title="View campaign details">Norwest Flight 1 Personifi (58951)</a></h2>
|
||
<div class="stats">
|
||
<dl>
|
||
<dt>State:</dt>
|
||
<dd>Active</dd>
|
||
<dt>Flight dates:</dt>
|
||
<dd>3/17/2011 – 04/17/2011</dd>
|
||
<dt>Lifetime budget:</dt>
|
||
<dd>3,922,948 imps</dd>
|
||
<dt>Daily budget:</dt>
|
||
<dd>1,000,000 imps (even pacing)</dd>
|
||
<dt>Buying strategy:</dt>
|
||
<dd>ECP (Min $0.00 CPM / Max $3.00 CPM / variable pricing enabled)</dd>
|
||
<dt>User frequency:</dt>
|
||
<dd>No limit per user</dd>
|
||
</dl>
|
||
</div>
|
||
<div class="graphic">
|
||
<label>
|
||
<select name="charted_metric" id="charted-metric">
|
||
<option value="imps">Impressions</option>
|
||
<option value="rev">Revenue</option>
|
||
</select> by Day
|
||
</label>
|
||
<div id="campaign-1-pacing" class="chart">
|
||
|
||
</div>
|
||
</div>
|
||
<div class="actions">
|
||
<h3>Alerts</h3>
|
||
<ul>
|
||
<li class="alert"><a href="#" title="Show me this creative">1 creative has status <b>unauditable</b></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="name">
|
||
<div>
|
||
<div class="expandable">▾<!-- ▼ --></div>
|
||
<h4>Norwest Flight 1 Behavior (58643)</h4>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<h3>2,323,187</h3>
|
||
<h5>/ 3,922,948</h5>
|
||
<div class="progress">
|
||
<div class="vr" style="left:85%"></div>
|
||
<div class="fill bad" style="width:59%"></div>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<h3>$3,677.33</h3>
|
||
<h5>N/A</h5>
|
||
</td>
|
||
<td>
|
||
<h3>$6,969.56</h3>
|
||
<h5>/ $11,768.84</h5>
|
||
<div class="progress">
|
||
<div class="vr" style="left:85%"></div>
|
||
<div class="fill bad" style="width:59%"></div>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<h3>478</h3>
|
||
<h5>N/A</h5>
|
||
</td>
|
||
<td>
|
||
<h3>0</h3>
|
||
<h5>N/A</h5>
|
||
</td>
|
||
<td>
|
||
<h3>27</h3>
|
||
<h5>/ 32</h5>
|
||
<div class="progress">
|
||
<div class="vr" style="left:77%"></div>
|
||
<div class="fill status" style="width:77%"></div>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<h3>0.021%</h3>
|
||
<h5>N/A</h5>
|
||
</td>
|
||
</tr>
|
||
<tr class="summary" style="display:none;">
|
||
<td class="expanded-detail-cell" colspan="8">
|
||
<div class="expanded-detail clearfix">
|
||
<h2><a href="#" title="View campaign details">Norwest Flight 1 Behavior (58643)</a></h2>
|
||
<div class="stats">
|
||
<dl>
|
||
<dt>State:</dt>
|
||
<dd>Active</dd>
|
||
<dt>Flight dates:</dt>
|
||
<dd>3/17/2011 – 04/17/2011</dd>
|
||
<dt>Lifetime budget:</dt>
|
||
<dd>3,922,948 imps</dd>
|
||
<dt>Daily budget:</dt>
|
||
<dd>1,000,000 imps (even pacing)</dd>
|
||
<dt>Buying strategy:</dt>
|
||
<dd>ECP (Min $0.00 CPM / Max $3.00 CPM / variable pricing enabled)</dd>
|
||
<dt>User frequency:</dt>
|
||
<dd>No limit per user</dd>
|
||
</dl>
|
||
</div>
|
||
<div class="graphic">
|
||
<label>
|
||
<select name="charted_metric" id="charted-metric">
|
||
<option value="imps">Impressions</option>
|
||
<option value="rev">Revenue</option>
|
||
</select> by Day
|
||
</label>
|
||
<div id="campaign-2-pacing" class="chart">
|
||
|
||
</div>
|
||
</div>
|
||
<div class="actions">
|
||
<h3>Alerts</h3>
|
||
<ul>
|
||
<li class="alert"><a href="#" title="Show me this creative">1 creative has status <b>unauditable</b></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
<script type="text/javascript" charset="utf-8">
|
||
var pacing, campaign1Pacing, campaign2Pacing,
|
||
disabled = { enabled: false },
|
||
noText = { text: null },
|
||
std = {
|
||
color: '#222',
|
||
fontSize: '11px',
|
||
fontFamily: 'Helvetica, Arial, sans-serif'
|
||
};
|
||
|
||
$(function(){
|
||
|
||
$('table tr td.name').not('.summary').bind('click', function(){
|
||
$(this).closest('tr').toggleClass('open').next('tr.summary').toggleClass('open').toggle();
|
||
});
|
||
|
||
campaign1Pacing = new Highcharts.Chart({
|
||
chart: {
|
||
backgroundColor: 'transparent',
|
||
renderTo: 'campaign-1-pacing',
|
||
spacingTop: 5,
|
||
spacingBottom: 5,
|
||
spacingRight: 5,
|
||
spacingLeft: 0,
|
||
type: 'line'
|
||
},
|
||
credits: disabled,
|
||
legend: disabled,
|
||
plotOptions: {
|
||
series: {
|
||
marker: disabled,
|
||
pointStart: Date.UTC(2010, 2, 17),
|
||
pointInterval: 24 * 3600 * 1000 // one day
|
||
}
|
||
},
|
||
title: noText,
|
||
xAxis: {
|
||
labels: {
|
||
formatter: function() {
|
||
return Highcharts.dateFormat('%d-%b', this.value);
|
||
},
|
||
style: std
|
||
},
|
||
tickPixelInterval: 70,
|
||
type: 'datetime'
|
||
},
|
||
yAxis: {
|
||
labels: {
|
||
formatter: function() {
|
||
return this.value;
|
||
},
|
||
style: std,
|
||
y: 4
|
||
},
|
||
gridLineWidth: 0,
|
||
lineWidth: 1,
|
||
maxPadding: 0.01,
|
||
min: 0,
|
||
tickPixelInterval: 20,
|
||
tickWidth: 1,
|
||
title: noText
|
||
},
|
||
series: [{
|
||
name: 'Budgeted Imps',
|
||
data: [250018, 500036, 750054, 1000072, 1250090, 1500108, 1750126, 2000144, 2250162, 2500180, 2750198, 3000216, 3250234, 3500252, 3750270, 4000288, 4250306, 4500324, 4750342, 5000360, 5250378, 5500396, 5750414, 6000432, 6250450, 6500468, 6750486, 7000504, 7250522, 7500540, 7750558, 8000576]
|
||
}, {
|
||
name: 'Actual Imps',
|
||
data: [260018, 520036, 780054, 1040072, 1300090, 1560108, 1820126, 2080144, 2340162, 2600180, 2860198, 3120216, 3380234, 3650252, 3960270, 4500288, 4600306, 4680324, 4800342, 5200360, 5310378, 5650396, 5800414, 5900432, 6130450, 6200468, 6780486]
|
||
}]
|
||
});
|
||
|
||
campaign2Pacing = new Highcharts.Chart({
|
||
chart: {
|
||
backgroundColor: 'transparent',
|
||
renderTo: 'campaign-2-pacing',
|
||
spacingTop: 5,
|
||
spacingBottom: 5,
|
||
spacingRight: 5,
|
||
spacingLeft: 0,
|
||
type: 'line'
|
||
},
|
||
credits: disabled,
|
||
legend: disabled,
|
||
plotOptions: {
|
||
series: {
|
||
marker: disabled,
|
||
pointStart: Date.UTC(2010, 2, 17),
|
||
pointInterval: 24 * 3600 * 1000 // one day
|
||
}
|
||
},
|
||
title: noText,
|
||
xAxis: {
|
||
labels: {
|
||
formatter: function() {
|
||
return Highcharts.dateFormat('%d-%b', this.value);
|
||
},
|
||
style: std
|
||
},
|
||
tickPixelInterval: 70,
|
||
type: 'datetime'
|
||
},
|
||
yAxis: {
|
||
labels: {
|
||
formatter: function() {
|
||
return this.value;
|
||
},
|
||
style: std,
|
||
y: 4
|
||
},
|
||
gridLineWidth: 0,
|
||
lineWidth: 1,
|
||
maxPadding: 0.01,
|
||
min: 0,
|
||
tickPixelInterval: 20,
|
||
tickWidth: 1,
|
||
title: noText
|
||
},
|
||
series: [{
|
||
name: 'Budgeted Imps',
|
||
data: [122592, 245184, 367776, 490368, 612960, 735552, 858144, 980736, 1103328, 1225920, 1348512, 1471104, 1593696, 1716288, 1838880, 1961472, 2084064, 2206656, 2329248, 2451840, 2574432, 2697024, 2819616, 2942208, 3064800, 3187392, 3309984, 3432576, 3555168, 3677760, 3800352, 3922944]
|
||
}, {
|
||
name: 'Actual Imps',
|
||
data: [22592, 245184, 447776, 690368, 712960, 755552, 818144, 830736, 893328, 925920, 948512, 971104, 993696, 1016288, 1038880, 1061472, 1084064, 1206656, 1329248, 1451840, 1574432, 1697024, 1819616, 1942208, 2204800, 2207392, 2209984]
|
||
}]
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|