mailtrain/views/campaigns/clicked.hbs

<ol class="breadcrumb">
    <li><a href="/">{{#translate}}Home{{/translate}}</a></li>
    <li><a href="/campaigns">{{#translate}}Campaigns{{/translate}}</a></li>
    {{#if parent}}
        <li><a href="/campaigns/view/{{parent.id}}">{{parent.name}}</a></li>
    {{/if}}
    <li><a href="/campaigns/view/{{id}}">{{name}}</a></li>
    <li class="active">{{#translate}}Link info{{/translate}}</li>
</ol>

<h2><span class="glyphicon glyphicon-inbox" aria-hidden="true"></span> {{name}} <small>{{#translate}}Link info{{/translate}}</small> <a class="btn btn-default btn-xs" href="/campaigns/view/{{id}}?tab=links" role="button"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> {{#translate}}View campaign{{/translate}}</a></h2>

<hr>

{{#if description}}
    <div class="well well-sm">{{{description}}}</div>
{{/if}}

<div class="table-responsive">
    <table class="table table-bordered table-hover">
        <thead>
            <th>
                {{#translate}}URL{{/translate}}
            </th>
            <th class="col-md-1">
                {{#translate}}Clicks{{/translate}}
            </th>
            <th class="col-md-1">
                {{#translate}}% of clicks{{/translate}}
            </th>
            <th class="col-md-1">
                {{#translate}}% of messages{{/translate}}
            </th>
        </thead>
        <tbody>
            <tr class="success">
                {{#if aggregated}}
                    <th>
                        {{#translate}}Aggregated clicks{{/translate}}
                    </th>
                    <th>
                        {{clicks}}
                    </th>
                    <th>
                        –
                    </th>
                    <th>
                        CTR {{clicksRate}}%
                    </th>
                {{else}}
                    <td>
                        <a href="{{link.url}}">{{link.short}}</a>
                    </td>
                    <td>
                        {{link.clicks}}
                    </td>
                    <td>
                        {{link.relPercentage}}
                    </td>
                    <td>
                        {{link.totalPercentage}}
                    </td>
                {{/if}}
            </tr>
        </tbody>
    </table>

    <div class="panel panel-info">
        <!-- Default panel contents -->
        <div class="panel-heading">{{#if aggregated}}{{#translate}}Subscribers who clicked on a link:{{/translate}}{{else}}{{#translate}}Subscribers who clicked on this link:{{/translate}}{{/if}}</div>
        <div class="panel-body">
            {{#if aggregated}}{{else}}
            <div class="table-responsive">
              <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
              <table class="table table-bordered table-hover data-piechart-ajax display nowrap">
                <thead>
                    <tr>
                        <th>
                            {{#translate}}Stats by country{{/translate}}
                        </th>
                        <th>
                            {{#translate}}Stats by device type{{/translate}}
                        </th>
                    </tr>
                    <tr>
                        <th>
                            <div class="data-stats-pie-chart" data-topic-url="/campaigns/clicked" data-column="country" data-topic-id="{{id}}/{{link.id}}"></div>
                        </th>
                        <th>
                            <div class="data-stats-pie-chart" data-topic-url="/campaigns/clicked" data-column="device_type" data-topic-id="{{id}}/{{link.id}}"></div>
                        </th>
                    </tr>
                </thead>
              </table>
            </div>
            {{/if}}
            <div class="table-responsive">
                <table data-topic-url="/campaigns/clicked" data-topic-id="{{id}}/{{link.id}}" data-sort-column="1" data-sort-order="asc" class="table table-bordered table-hover data-table-ajax display nowrap" width="100%" data-row-sort="0,1,1,1,1,1,0">
                    <thead>
                        <tr>
                            <th class="col-md-1">
                                #
                            </th>
                            <th>
                                {{#translate}}Address{{/translate}}
                            </th>
                            <th>
                                {{#translate}}First Name{{/translate}}
                            </th>
                            <th>
                                {{#translate}}Last Name{{/translate}}
                            </th>
                            <th>
                                {{#translate}}First click time{{/translate}}
                            </th>
                            <th>
                                {{#translate}}Click count{{/translate}}
                            </th>
                            <th></th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>