433 lines
23 KiB
PHP
433 lines
23 KiB
PHP
<?=$this->extend('templates/front_example.php');?>
|
|
|
|
<?=$this->section('content');?>
|
|
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
|
|
<title>ZENITH</title>
|
|
</head>
|
|
<body>
|
|
<div class="sub-contents-wrap">
|
|
<div class="title-area">
|
|
<h2 class="page-title">페이스북 광고관리</h2>
|
|
<p class="title-disc">숫자 중심의 퍼포먼스 마케팅에 집중! 사람들이 어떤 콘텐츠에 반응하는가? 비용 대비 얼만큼의 성과가 있는가?</p>
|
|
</div>
|
|
|
|
<div class="search-wrap">
|
|
<form class="search d-flex justify-content-center">
|
|
<div class="term d-flex align-items-center">
|
|
<input type="text">
|
|
<button type="button"><i class="bi bi-calendar2-week"></i></button>
|
|
<span> ~ </span>
|
|
<input type="text">
|
|
<button type="button"><i class="bi bi-calendar2-week"></i></button>
|
|
</div>
|
|
<div class="input">
|
|
<input class="" type="text" placeholder="검색어를 입력하세요">
|
|
<button class="btn-primary" type="submit">조회</button>
|
|
</div>
|
|
</form>
|
|
<div class="detail row d-flex justify-content-center">
|
|
<dl class="col">
|
|
<dt>노출수</dt>
|
|
<dd>34,456</dd>
|
|
</dl>
|
|
<dl class="col">
|
|
<dt>클릭수</dt>
|
|
<dd>809</dd>
|
|
</dl>
|
|
<dl class="col">
|
|
<dt>클릭율</dt>
|
|
<dd>1.09</dd>
|
|
</dl>
|
|
<dl class="col">
|
|
<dt>지출액</dt>
|
|
<dd>1,234,123</dd>
|
|
</dl>
|
|
<dl class="col">
|
|
<dt>DB수</dt>
|
|
<dd>61</dd>
|
|
</dl>
|
|
<dl class="col">
|
|
<dt>DB당 단가</dt>
|
|
<dd>45,234</dd>
|
|
</dl>
|
|
<dl class="col">
|
|
<dt>전환율</dt>
|
|
<dd>7.34</dd>
|
|
</dl>
|
|
<dl class="col">
|
|
<dt>매출</dt>
|
|
<dd>23,456,900</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="client-list biz">
|
|
<h3><i class="bi bi-chevron-down"></i> 비즈니스 계정</h3>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="inner">
|
|
<button type="button">열혈 패밀리</button>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="inner">
|
|
<button type="button">케어랩스5</button>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="inner">
|
|
<button type="button">케어랩스7</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="client-list advertiser">
|
|
<h3><i class="bi bi-chevron-down"></i> 광고주</h3>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="inner">
|
|
<button type="button" class="active alert">[대전]상상의원_가나다라마마다먀라</button>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
|
|
<div class="txt">14/170</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="inner">
|
|
<button type="button" class="alert">플란치과_임플○</button>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
|
|
<div class="txt">14/170</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="inner">
|
|
<button type="button" class="active">비결뷰티센터</button>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
|
|
<div class="txt">14/170</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="inner">
|
|
<button type="button">[대전]상상의원_가나다라마마다먀라</button>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
|
|
<div class="txt">14/170</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="inner">
|
|
<button type="button">플란치과_임플○</button>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
|
|
<div class="txt">14/170</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="inner">
|
|
<button type="button">비결뷰티센터</button>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
|
|
<div class="txt">14/170</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="inner">
|
|
<button type="button">거무타</button>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
|
|
<div class="txt">14/170</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="inner">
|
|
<button type="button">마디척병원○</button>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
|
|
<div class="txt">14/170</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="inner">
|
|
<button type="button">[전국]상상의원_주름보톡스2*</button>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
|
|
<div class="txt">14/170</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="inner">
|
|
<button type="button">[대전]상상의원_가나다라마마다먀라</button>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
|
|
<div class="txt">14/170</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="inner">
|
|
<button type="button">플란치과_임플○</button>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
|
|
<div class="txt">14/170</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="inner">
|
|
<button type="button">비결뷰티센터</button>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
|
|
<div class="txt">14/170</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="inner">
|
|
<button type="button">[대전]상상의원_가나다라마마다먀라</button>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
|
|
<div class="txt">14/170</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="inner">
|
|
<button type="button">플란치과_임플○</button>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
|
|
<div class="txt">14/170</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="inner">
|
|
<button type="button">비결뷰티센터</button>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
|
|
<div class="txt">14/170</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-wrap">
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="campaign-tab" data-bs-toggle="tab" data-bs-target="#campaign-tab-pane" type="button" role="tab" aria-controls="campaign-tab-pane" aria-selected="true">캠페인</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="set-tab" data-bs-toggle="tab" data-bs-target="#set-tab-pane" type="button" role="tab" aria-controls="set-tab-pane" aria-selected="false">광고 세트</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="advertisement-tab" data-bs-toggle="tab" data-bs-target="#advertisement-tab-pane" type="button" role="tab" aria-controls="advertisement-tab-pane" aria-selected="false">광고</button>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<div class="tab-pane active" id="campaign-tab-pane" role="tabpanel" aria-labelledby="campaign-tab">
|
|
<div class="btn-wrap">
|
|
<button type="button" class="btn btn-outline-danger active">수동 업데이트</button>
|
|
<button type="button" class="btn btn-outline-danger">데이터 비교</button>
|
|
<button type="button" class="btn btn-outline-danger"><i class="bi bi-file-text"></i> 메모확인</button>
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-hover">
|
|
<colgroup>
|
|
<col style="width:10%">
|
|
<col style="width:5.5%">
|
|
<col style="width:5%">
|
|
<col style="width:5%">
|
|
<col style="width:7%">
|
|
<col style="width:6%">
|
|
<col style="width:4%">
|
|
<col style="width:7.5%">
|
|
<col style="width:7.5%">
|
|
<col style="width:5.5%">
|
|
<col style="width:7.5%">
|
|
<col style="width:5.5%">
|
|
<col style="width:5.5%">
|
|
<col style="width:5.5%">
|
|
<col style="width:5.5%">
|
|
<col style="width:6.5%">
|
|
</colgroup>
|
|
<thead class="table-dark">
|
|
<tr>
|
|
<th scope="col">캠페인명</th>
|
|
<th scope="col">상태</th>
|
|
<th scope="col">예산 <br>ai</th>
|
|
<th scope="col">목표 <br>ai</th>
|
|
<th scope="col">예산</th>
|
|
<th scope="col">현재 <br>DB단가</th>
|
|
<th scope="col">유효 <br>DB</th>
|
|
<th scope="col">지출액</th>
|
|
<th scope="col">수익</th>
|
|
<th scope="col">수익률</th>
|
|
<th scope="col">매출액</th>
|
|
<th scope="col">노출수</th>
|
|
<th scope="col">링크클릭</th>
|
|
<th scope="col">CPC</th>
|
|
<th scope="col">CTR</th>
|
|
<th scope="col">DB <br>전환률</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="col" class="text-center">캠페인 11건 결과</th>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>₩22,345,222</td>
|
|
<td>₩30,342</td>
|
|
<td>515</td>
|
|
<td>₩18,345,342</td>
|
|
<td>₩6,235,666</td>
|
|
<td>29.45%</td>
|
|
<td>₩21,345,678</td>
|
|
<td>654,345</td>
|
|
<td>9,457</td>
|
|
<td>₩1,778</td>
|
|
<td>1.13%</td>
|
|
<td>6.34%</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="col">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="check01">
|
|
<label class="form-check-label" for="check01">[02.22][케랩7_마디척병원_부위별통증] evt_5721 @15 진선_주말OFF_규칙</label>
|
|
</div>
|
|
<div class="btn-area">
|
|
<button type="button" class="btn btn-outline-secondary btn-paper"><i class="bi bi-file-text"></i></button>
|
|
</div>
|
|
</th>
|
|
<td>
|
|
<button type="button" class="btn btn-outline-secondary btn-sm">활성</button>
|
|
<div class="btn-area">
|
|
<button type="button" class="btn btn-outline-secondary btn-reflesh"><i class="bi bi-arrow-counterclockwise"></i>새로고침</button>
|
|
</div>
|
|
</td>
|
|
<td>ON</td>
|
|
<td>ON</td>
|
|
<td>₩100,000
|
|
<div class="btn-area d-flex justify-content-between">
|
|
<button type="button" class="btn btn-secondary btn-arrow"><i class="bi bi-arrow-up-short"></i></button>
|
|
<button type="button" class="btn btn-secondary btn-arrow"><i class="bi bi-arrow-down-short"></i></button>
|
|
</div>
|
|
</td>
|
|
<td>0</td>
|
|
<td>0</td>
|
|
<td>₩15,345</td>
|
|
<td>₩-15,678</td>
|
|
<td>0%</td>
|
|
<td>₩0</td>
|
|
<td>631</td>
|
|
<td>3</td>
|
|
<td>₩5,345</td>
|
|
<td>0.48%</td>
|
|
<td>0%</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="col">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="check01">
|
|
<label class="form-check-label" for="check01">[02.22][케랩7_마디척병원_부위별통증] evt_5721 @15 진선_주말OFF_규칙</label>
|
|
</div>
|
|
<div class="btn-area">
|
|
<button type="button" class="btn btn-outline-secondary btn-paper"><i class="bi bi-file-text"></i></button>
|
|
</div>
|
|
</th>
|
|
<td>
|
|
<button type="button" class="btn btn-outline-secondary btn-sm">활성</button>
|
|
<div class="btn-area">
|
|
<button type="button" class="btn btn-outline-secondary btn-reflesh"><i class="bi bi-arrow-counterclockwise"></i>새로고침</button>
|
|
</div>
|
|
</td>
|
|
<td>ON</td>
|
|
<td>ON</td>
|
|
<td>₩100,000
|
|
<div class="btn-area d-flex justify-content-between">
|
|
<button type="button" class="btn btn-secondary btn-arrow"><i class="bi bi-arrow-up-short"></i></button>
|
|
<button type="button" class="btn btn-secondary btn-arrow"><i class="bi bi-arrow-down-short"></i></button>
|
|
</div>
|
|
</td>
|
|
<td>0</td>
|
|
<td>0</td>
|
|
<td>₩15,345</td>
|
|
<td>₩-15,678</td>
|
|
<td>0%</td>
|
|
<td>₩0</td>
|
|
<td>631</td>
|
|
<td>3</td>
|
|
<td>₩5,345</td>
|
|
<td>0.48%</td>
|
|
<td>0%</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="col">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="check01">
|
|
<label class="form-check-label" for="check01">[02.22][케랩7_마디척병원_부위별통증] evt_5721 @15 진선_주말OFF_규칙</label>
|
|
</div>
|
|
<div class="btn-area">
|
|
<button type="button" class="btn btn-outline-secondary btn-paper"><i class="bi bi-file-text"></i></button>
|
|
</div>
|
|
</th>
|
|
<td>
|
|
<button type="button" class="btn btn-outline-secondary btn-sm">활성</button>
|
|
<div class="btn-area">
|
|
<button type="button" class="btn btn-outline-secondary btn-reflesh"><i class="bi bi-arrow-counterclockwise"></i>새로고침</button>
|
|
</div>
|
|
</td>
|
|
<td>ON</td>
|
|
<td>ON</td>
|
|
<td>₩100,000
|
|
<div class="btn-area d-flex justify-content-between">
|
|
<button type="button" class="btn btn-secondary btn-arrow"><i class="bi bi-arrow-up-short"></i></button>
|
|
<button type="button" class="btn btn-secondary btn-arrow"><i class="bi bi-arrow-down-short"></i></button>
|
|
</div>
|
|
</td>
|
|
<td>0</td>
|
|
<td>0</td>
|
|
<td>₩15,345</td>
|
|
<td>₩-15,678</td>
|
|
<td>0%</td>
|
|
<td>₩0</td>
|
|
<td>631</td>
|
|
<td>3</td>
|
|
<td>₩5,345</td>
|
|
<td>0.48%</td>
|
|
<td>0%</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="set-tab-pane" role="tabpanel" aria-labelledby="set-tab">
|
|
광고 세트
|
|
</div>
|
|
<div class="tab-pane" id="advertisement-tab-pane" role="tabpanel" aria-labelledby="advertisement-tab">
|
|
광고
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
<?=$this->endSection();?>
|