Ghost/ghost/admin/app/templates/posts/analytics.hbs

137 lines
5.5 KiB
Handlebars
Raw Normal View History

<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header stacked gh-post-analytics-header">
<div class="gh-canvas-breadcrumb">
<LinkTo @route="posts">
Posts
</LinkTo>
{{svg-jar "arrow-right-small"}}Analytics
</div>
<h2 class="gh-canvas-title gh-post-title">
{{this.post.title}}
</h2>
<p class="gh-post-analytics-meta">
{{#if
(or this.post.isSent
(and this.post.isPublished this.post.email)
this.post.willEmail
)
}}
{{#if this.post.emailOnly}}
Sent
{{else}}
Published and sent
{{/if}}
{{else}}
Published on your site
{{/if}}
{{#let (moment-site-tz this.post.publishedAtUTC) as |publishedAt|}}
on
{{moment-format publishedAt "D MMM YYYY"}}
at
{{moment-format publishedAt "HH:mm"}}
{{/let}}
</p>
</GhCanvasHeader>
<h4 class="gh-main-section-header small bn">
Engagement
</h4>
<div class="gh-post-analytics-box">
<div class="gh-post-analytics-item">
<h3>{{format-number this.post.email.emailCount}}</h3>
<p>Sent</p>
</div>
<div class="gh-post-analytics-item">
<h3>{{this.post.email.openRate}}<sup>%</sup></h3>
<p><strong>{{format-number this.post.email.openedCount}}</strong> opened</p>
</div>
<div class="gh-post-analytics-item">
<h3>{{this.post.clickRate}}<sup>%</sup></h3>
<p><strong>{{format-number this.post.count.clicks}}</strong> clicked</p>
</div>
<div class="gh-post-analytics-item">
<h3>{{format-number this.post.count.signups}}</h3>
<p><span class="hide-when-small">Free </span>{{gh-pluralize this.post.count.signups "signup" without-count=true}}</p>
</div>
<div class="gh-post-analytics-item">
<h3>{{format-number this.post.count.conversions}}</h3>
<p><span class="hide-when-small">Paid </span>{{gh-pluralize this.post.count.conversions "conversion" without-count=true}}</p>
</div>
</div>
<h4 class="gh-main-section-header small bn">
Link clicks
</h4>
<div class="gh-post-analytics-box column">
<div class="gh-links-list">
<div class="gh-links-list-item">
<a href="#">https://vanschneider.com/blog/#/portal/signup</a>
<p class="gh-links-list-clicks">18</p>
</div>
<div class="gh-links-list-item">
<a href="#">https://vanschneider.com/blog/an-unsolicited-portfolio-review-featuring-2/</a>
<p class="gh-links-list-clicks">16</p>
</div>
<div class="gh-links-list-item">
<a href="#">https://vanschneider.com/blog/#/portal/unsubscribe</a>
<p class="gh-links-list-clicks">3</p>
</div>
<div class="gh-links-list-item">
<a href="#">https://vanschneider.com/blog/#/portal/signin</a>
<p class="gh-links-list-clicks">0</p>
</div>
</div>
</div>
{{#if (feature 'sourceAttribution')}}
<h4 class="gh-main-section-header small bn" {{did-insert this.loadData}}>
Source attribution
</h4>
{{#if this.sources}}
<div class="gh-post-analytics-box resources">
<div style="display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 64px;
">
<MemberAttribution::SourceAttributionTable @sources={{this.sources}} />
<div style="border-left: 1px solid #eceef0; padding-left: 48px;display: flex;justify-content: center;align-items: center;">
<div style="max-width: 200px;">
<MemberAttribution::SourceAttributionChart @sources={{this.sources}} />
</div>
</div>
</div>
</div>
{{/if}}
{{/if}}
<h4 class="gh-main-section-header small bn">
Get started with analytics
</h4>
<div class="gh-post-analytics-box resources">
<div class="gh-post-analytics-resource">
<div class="thumbnail" style="background-image: url(assets/img/marketing/analytics-1.jpg);"></div>
<div class="flex flex-column justify-between">
<div>
<h3>📈 Understand analytics in Ghost</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="gh-btn gh-btn-link">Become an expert &rarr;</div>
</div>
</div>
<div class="gh-post-analytics-resource">
<div class="thumbnail" style="background-image: url(assets/img/marketing/analytics-2.jpg);"></div>
<div class="flex flex-column justify-between">
<div>
<h3>How to best share your shiz</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="gh-btn gh-btn-link">Sharing is caring &rarr;</div>
</div>
</div>
</div>
</section>