<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Piwik sample | Angulartics</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="lib/angular.js"></script>
<script src="lib/angular-route.js"></script>
<script src="lib/angulartics.js"></script>
<script src="lib/angulartics-piwik.js"></script>
<!-- Piwik -->
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['setDocumentTitle', "Test Page"]);
_paq.push(["trackPageView"]);
_paq.push(["enableLinkTracking"]);
(function() {
var u=(("https:" == document.location.protocol) ? "https" : "http") + "://xxx.xxx.xxx.xxx/piwik/";
_paq.push(["setTrackerUrl", u+"piwik.php"]);
_paq.push(["setSiteId", "5"]);
var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Piwik Code -->
</head>
<body ng-app="sample">
<!--
<div class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#/">My App</a>
</div>
<div>
<ul class="nav navbar-nav">
<li><a href="#/a" analytics_on="menu" analytics_event="Page A">Page A</a></li>
<li><a href="#/b" analytics_on="menu">Page B</a></li>
<li><a href="#/c" analytics_on>Page C</a></li>
</ul>
</div>
</div>
<div class="container">
<div ng-view></div>
<hr>
<button analytics-on="click" analytics-event="Button 1" analytics-category="Commands" class="btn btn-default">Button 1</button>
-->
<!-- same as analytics-on="click", because 'click' is the default -->
<!-- <button analytics-on analytics-event="Button 2" analytics-category="Commands" class="btn btn-primary">Button 2</button> -->
<!-- same as analytics-event="Button 3", because is inferred from innerText -->
<!-- <button analytics-on analytics-category="Commands" class="btn btn-success">Button 3</button> -->
<!-- note that analytics-category is never inferred, and is required by GA... if you leave it out, no event will be tracked -->
<!-- <button analytics-on analytics-category="Commands" analytics-label="Button4 label" analytics-value="1" class="btn btn-info">Button 4</button> -->
<!-- <hr> -->
<!--
<p class="alert alert-success">
Open the network inspector in your browser, click any of the nav options or buttons above and you'll see the analytics
request being executed. Then check <a class="alert-link" href="http://www.google.com/analytics/web/">your Google Analytics dashboard</a>.
</p>
</div>
<script>
angular.module('sample', ['ngRoute', 'angulartics', 'angulartics.piwik'])
.config(function ($routeProvider, $analyticsProvider) {
$routeProvider
.when('/', { templateUrl: 'partials/root.tpl.html', controller: 'SampleCtrl' })
.when('/a', { templateUrl: 'partials/a.tpl.html', controller: 'SampleCtrl' })
.when('/b', { templateUrl: 'partials/b.tpl.html', controller: 'SampleCtrl' })
.when('/c', { templateUrl: 'partials/c.tpl.html', controller: 'SampleCtrl' })
.otherwise({ redirectTo: '/' });
})
.controller('SampleCtrl', function ($analytics) {$analytics.pageTrack('/piwik');});
</script>
-->
<!--
<script>
angular.module('myApp', ['angulartics.scroll'])
<section id="features" analytics-on="scrollby">
</script>
-->
<p>
<font size="3"> 본 테스트 결과 화면은 https://xxx.xxx.xxx.xxx/piwik site의 웹사이트 'PIWIKTEST' 에서 확인 가능합니다 </font>
<p>
<p> [piwik / 활동 / 외부 링크 수] 에서 확인 가능
<p> add the 'piwik_link' css class to the link
<pre>
<a href='https://xxx.xxx.xxx.xxx/piwik/index.php?idSite=5' target='_blank' class='piwik_link'> Track outlink to go PIWIKTest </a>
</pre>
<a href='https://xxx.xxx.xxx.xxx/piwik/index.php?idSite=5' target='_blank' class='piwik_link'> Track outlink to go PIWIKTest </a>
<p>
<hr>
<p> All API reference http://developer.piwik.org/api-reference/tracking-javascript
<p>
<p><font size="5">Document Title!</font></p>
<p>
<p>[piwik / 활동 / 페이지 제목] 에서 확인 가능 1 depth
<pre>
_paq.push(['setDocumentTitle', 'Test Track Event page']);
_paq.push(['setCustomVariable',1,'E_NAME322','E_VALUE322','hahaValue']);
</pre>
<button onclick="trackTitle1Function()">Send Normal Title Event</button>
<script>
function trackTitle1Function() {
var title = prompt('Please enter Page Title', 'New Title Name...');
_paq.push(['setDocumentTitle', title]);
_paq.push(['trackPageView']);
}
</script>
<p>
<p>[piwik / 활동 / 페이지 제목] 에서 확인 가능 2 depth
<pre>
var mainTitle = prompt('Please enter Page MainTitle', 'New Main Title Name...');
var subTitle = prompt('Please enter page SubTitle', 'New sub Tiutle Name...');
_paq.push(['setDocumentTitle', mainTitle + "/" + subTitle]);
_paq.push(['trackPageView']);
</pre>
<button onclick="trackSubTitleFunction()">Send SubTile Event</button>
<script>
function trackSubTitleFunction() {
var mainTitle = prompt('Please enter Page MainTitle', 'New Main Title Name...');
var subTitle = prompt('Please enter page SubTitle', 'New sub Title Name...');
_paq.push(['setDocumentTitle', mainTitle + "/" + subTitle]);
_paq.push(['trackPageView']);
}
</script>
<p>
<p>[piwik / 활동 / 페이지 제목] 에서 확인 가능 3 depth
<pre>
var mainTitle = prompt('Please enter Page MainTitle', 'New Main Title Name...');
var subTitle = prompt('Please enter page SubTitle', 'New sub Title Name...');
var thirdTitle = prompt('Please enter page third Title', 'New third Title Name...');
_paq.push(['setDocumentTitle', mainTitle + "/" + subTitle + "/" + thirdTitle ]);
_paq.push(['trackPageView']);
</pre>
<button onclick="traceThirdTitleFunction()">Send Third Title Event</button>
<script>
function trackThirdTitleFunction() {
var mainTitle = prompt('Please enter Page MainTitle', 'New Main Title Name...');
var subTitle = prompt('Please enter page SubTitle', 'New sub Title Name...');
var thirdTitle = prompt('Please enter page third Title', 'New third Title Name...');
_paq.push(['setDocumentTitle', mainTitle + "/" + subTitle + "/" + thirdTitle ]);
_paq.push(['trackPageView']);
}
</script>
<p>
<p>[piwik / 활동 / 페이지 제목] 에서 확인 가능 4 depth
<pre>
var mainTitle = prompt('Please enter Page MainTitle', 'New Main Title Name...');
var subTitle = prompt('Please enter page SubTitle', 'New sub Title Name...');
var thirdTitle = prompt('Please enter page third Title', 'New third Title Name...');
var fourthTitle = prompt('Please enter page fourth Title', 'New fourth Title Name...');
_paq.push(['setDocumentTitle', mainTitle + "/" + subTitle + "/" + thirdTitle + "/" + fourthTitle]);
_paq.push(['trackPageView']);
</pre>
<button onclick="trackFourthTitleFunction()">Send Fourth Title Event</button>
<script>
function trackFourthTitleFunction() {
var mainTitle = prompt('Please enter Page MainTitle', 'New Main Title Name...');
var subTitle = prompt('Please enter page SubTitle', 'New sub Title Name...');
var thirdTitle = prompt('Please enter page third Title', 'New third Title Name...');
var fourthTitle = prompt('Please enter page fourth Title', 'New fourth Title Name...');
_paq.push(['setDocumentTitle', mainTitle + "/" + subTitle + "/" + thirdTitle + "/" + fourthTitle]);
_paq.push(['trackPageView']);
}
</script>
<p>
<p>[piwik / 활동 / 페이지 제목] 에서 확인 가능 5 depth
<pre>
var mainTitle = prompt('Please enter Page MainTitle', 'New Main Title Name...');
var subTitle = prompt('Please enter page SubTitle', 'New sub Title Name...');
var thirdTitle = prompt('Please enter page third Title', 'New third Title Name...');
var fourthTitle = prompt('Please enter page fourth Title', 'New fourth Title Name...');
var fifthTitle = prompt('Please enter page fifth Title', 'New fifth Title Name...');
_paq.push(['setDocumentTitle', mainTitle + "/" + subTitle + "/" + thirdTitle + "/" + fourthTitle + "/" + fifthTitle] );
_paq.push(['trackPageView']);
</pre>
<button onclick="trackFifThTitleFunction()">Send Fifth Title Event</button>
<script>
function trackFifThTitleFunction() {
var mainTitle = prompt('Please enter Page MainTitle', 'New Main Title Name...');
var subTitle = prompt('Please enter page SubTitle', 'New sub Title Name...');
var thirdTitle = prompt('Please enter page third Title', 'New third Title Name...');
var fourthTitle = prompt('Please enter page fourth Title', 'New fourth Title Name...');
var fifthTitle = prompt('Please enter page fifth Title', 'New fifth Title Name...');
_paq.push(['setDocumentTitle', mainTitle + "/" + subTitle + "/" + thirdTitle + "/" + fourthTitle + "/" + fifthTitle] );
_paq.push(['trackPageView']);
}
</script>
<p>
<p>
<hr>
<p>
<p>
<p><font size="5">Search Tracking!</font></p>
<p>
<p>[piwik / 활동 / 사이트검색 ] 에서 확인
<p> - 사이트 검색어 : Search Keyword
<p> - 검색 카테고리 : Search Category (searchCount는 확인 불가)
<p> [ trackSiteSearch(keyword, category, searchCount)
<pre>
_paq.push(['setDocumentTitle', 'Search Page']);
var key = prompt('Please enter Search Keyword', 'keyword...');
var cat = prompt('Please enter Search Category', 'category...');
_paq.push(['trackSiteSearch',key,cat,0]);
</pre>
<button onclick="SendSearchFunction()">Send Search Page</button>
<script>
function SendSearchFunction() {
_paq.push(['setDocumentTitle', 'Search Page']);
var key = prompt('Please enter Search Keyword', 'keyword...');
var cat = prompt('Please enter Search Category', 'category...');
_paq.push(['trackSiteSearch',key,cat,0]);
}
</script>
<p>
<p>
<hr>
<p>
<p>
<p><font size="5">Track Event!</font></p>
<p>
<p> [piwik / 활동 / Events ] 에서 확인
<p> one depth 하위 내용씩 확인 가능
<p> - Event Categoris : Category와 Action 확인 가능
<p> - Event Actions : Action 과 Name 확인 가능
<p> - Event Names : Name 과 Action 확인 가능 (value는 확인 불가)
<p> _paq.push(['trackEvent', category, action, name, value]);
<p>
<pre>
_paq.push(['setDocumentTitle', 'Track Event Page']);
var cat = prompt('Please enter Cagegory', 'E-Category...');
var act = prompt('Please enter Action', 'E-Action...');
var name = prompt('Please enter Name', 'E-Name...');
var val = prompt('Please enter Value', 'E-Value...');
_paq.push(['trackEvent',cat,act,name,val]);
</pre>
<button onclick="SendTrackEventFunction()">Send Track Event</button>
<script>
function SendTrackEventFunction() {
_paq.push(['setDocumentTitle', 'Track Event Page']);
var cat = prompt('Please enter Cagegory', 'E-Category...');
var act = prompt('Please enter Action', 'E-Action...');
var name = prompt('Please enter Name', 'E-Name...');
var val = prompt('Please enter Value', 'E-Value...');
_paq.push(['trackEvent',cat,act,name,val]);
}
</script>
<p>
<p>
<hr>
<p>
<p>
<p><font size="5">Custom variable!</font></p>
<p>
<p> "visit" or "page" 두개의 scope을 사용 가능
<p> scope은 'setCustomValue'의 4번째(마지막) value로 설정
<p> - 'visit' 설정시 DB에 저장되며, visit(session)당 5개의 custome value를 저장 가능
<p> - 'page' 설정시 pageView에 저장되며, page view 당 5개의 custome value를 저장 가능
<p>
<p> [ visit ]
<p> [piwik / 방문자 기록 or 맞춤변수] 에서 확인 가능
<p> index가 같은 value 인 경우, overwrite 됨. index = 1~5
<pre>
_paq.push(['setDocumentTitle', 'Test Custome variable for visit']);
var idx = prompt('Index, the number from 1 to 5 where this custom variable name is stored', '1');
var name = prompt('Name, the name of the variable', 'Test Name');
var val = prompt('Value...', 'Test Value');
_paq.push(['setCustomVariable',idx,name,val,'visit']);
_paq.push(['trackPageView']);
</pre>
<button onclick="trackCustomVisitFunction()">Send CustomVariable Event for visit</button>
<script>
function trackCustomVisitFunction() {
_paq.push(['setDocumentTitle', 'Test Custome variable for visit']);
var idx = prompt('Index, the number from 1 to 5 where this custom variable name is stored', '1');
var name = prompt('Name, the name of the variable', 'Test Name');
var val = prompt('Value...', 'Test Value');
_paq.push(['setCustomVariable',idx,name,val,'visit']);
_paq.push(['trackPageView']);
}
</script>
<p>
<p> [ page ]
<p> [piwik / 방문자 맞춤변수] 에서 확인 가능
<p> index가 같은 value 인 경우, overwrite 됨. index = 1~5
<pre>
_paq.push(['setDocumentTitle', 'Test Custome variable for page']);
var idx = prompt('Index, the number from 1 to 5 where this custom variable name is stored', '1');
var name = prompt('Name, the name of the variable', 'Test Name');
var val = prompt('Value...', 'Test Value');
_paq.push(['setCustomVariable',idx,name,val,'page']);
_paq.push(['trackPageView']);
</pre>
<button onclick="trackCustomPageFunction()">Send CustomVariable Event for page</button>
<script>
function trackCustomPageFunction() {
_paq.push(['setDocumentTitle', 'Test Custome variable for page']);
var idx = prompt('Index, the number from 1 to 5 where this custom variable name is stored', '1');
var name = prompt('Name, the name of the variable', 'Test Name');
var val = prompt('Value...', 'Test Value');
_paq.push(['setCustomVariable',idx,name,val,'page']);
_paq.push(['trackPageView']);
}
</script>
<p>
<p>
<hr>
<p>
<p>
<p><font size="5">Recording a click as a download!</font></p>
<p>
<p> [piwik / 활동 / 다운로드 수] 에서 확인 가능
<p> add the 'piwik_download' css class to the link
<pre>
<a href='meng.jpg' target='_blank' class='piwik_download'> Link I want to track as a download </a>
</pre>
<a href='meng.jpg' target="_blank" class='piwik_download'> Link I want to track as a download </a>
<p>
<!--
<p>
<p>
<hr>
<p>
<p>
<p><font size="5">Custom Dimensions!</font></p>
<p>
<p> 'visit'과 'page' 이외에 추가로 scope을 지정해 줄수 있는 기능
<p> 추가 Plugin 'CustomDimensions'를 설치(unzip)해야 함. ./piwik/plugins/
<p> ./console plugin:activate CustomDimensions 실행 [piwik server]
<p>
-->
<p>
<p>
<hr>
<p>
</body>
</html>