ghost/admin/app/components/posts/analytics.hbs
<section class="gh-canvas {{if (feature "audienceFeedback") "feature-audienceFeedback"}}" {{did-insert this.loadData}}>
<GhCanvasHeader class="gh-canvas-header gh-post-analytics-header">
<div class="flex flex-column flex-grow-1">
<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>
<div class="gh-post-analytics-meta">
<div class="gh-post-analytics-meta-text">
{{#if this.post.hasBeenEmailed }}
{{#if this.post.emailOnly}}
Sent
{{else}}
Published and sent
{{/if}}
{{else}}
Published
{{#if @post.didEmailFail}}
but failed to send
{{else}}
on your site
{{/if}}
{{/if}}
{{#let (moment-site-tz this.post.publishedAtUTC) as |publishedAt|}}
on
{{moment-format publishedAt "D MMM YYYY"}}
at
{{moment-format publishedAt "HH:mm"}}
{{/let}}
</div>
<div style="display: flex; gap: 8px;">
<GhTaskButton
@buttonText="Refresh"
@task={{this.fetchPostTask}}
@showIcon={{true}}
@idleIcon="reload"
@successText="Refreshed"
@class="gh-btn gh-btn-icon refresh"
@successClass="gh-btn gh-btn-icon refresh" />
{{#unless this.post.emailOnly}}
<button type="button" class="gh-btn gh-btn-icon share" {{on "click" this.togglePublishFlowModal}}>
<span>{{svg-jar "share" title="Share post"}} Share</span>
</button>
{{/unless}}
<span class="dropdown">
<GhDropdownButton
@dropdownName="analytics-actions-menu"
@classNames="gh-btn gh-btn-icon icon-only gh-btn-action-icon"
@title="Analytics Actions"
data-test-button="analytics-actions"
>
<span>
{{svg-jar "dotdotdot"}}
<span class="hidden">Actions</span>
</span>
</GhDropdownButton>
<GhDropdown
@name="analytics-actions-menu"
@tagName="ul"
@classNames="gh-analytics-actions-menu dropdown-menu dropdown-triangle-top-right"
@closeOnClick={{true}}
>
<li>
<LinkTo class="edit-post" @route="lexical-editor.edit" @models={{array this.post.displayName this.post.id}}>Edit post</LinkTo>
</li>
<li>
<a class="view-browser" href="{{this.post.url}}" target="_blank" rel="noopener noreferrer">View in browser</a>
</li>
<li>
<button
type="button"
class="delete-post mr2"
{{on "click" this.confirmDeleteMember}}
data-test-button="delete-post"
>
<span class="red">Delete post</span>
</button>
</li>
</GhDropdown>
</span>
</div>
</div>
</div>
</GhCanvasHeader>
<Tabs::Tabs class="gh-tabs-analytics {{if (eq this.post.hasBeenEmailed null) "no-tabs"}}" @forceRender={{true}} as |tabs|>
{{#if this.post.hasBeenEmailed}}
<tabs.tab>
<h3>
{{svg-jar "analytics-tab-sent-large"}}
<span class="animated-number sent" {{did-update this.applyClasses this.post.email.emailCount}}>{{split-number this.post.email.emailCount this.previousSentCount}}</span>
</h3>
<p>{{svg-jar "analytics-tab-sent"}}<span class="analytics-tab-label">Sent</span></p>
</tabs.tab>
<tabs.tabPanel>
<Posts::PostActivityFeed
@post={{this.post}}
@eventType="sent"
@linkQuery={{hash filterParam=(concat "emails.post_id:" this.post.id) }}
/>
</tabs.tabPanel>
{{#if this.post.showEmailOpenAnalytics }}
<tabs.tab>
<h3>
{{svg-jar "analytics-tab-opened-large"}}
<span class="animated-number opened" {{did-update this.applyClasses this.post.email.openedCount}}>{{split-number this.post.email.openedCount this.previousOpenedCount}}</span>
</h3>
<p>{{svg-jar "analytics-tab-opened"}}<span class="analytics-tab-label">Opened<span class="analytics-tab-percentage"> — {{this.post.email.openRate}}%</span></span></p>
</tabs.tab>
<tabs.tabPanel>
<Posts::PostActivityFeed
@post={{this.post}}
@eventType="opened"
@linkQuery={{hash filterParam=(concat "opened_emails.post_id:" this.post.id) }}
/>
</tabs.tabPanel>
{{/if}}
{{#if this.post.showEmailClickAnalytics }}
<tabs.tab>
<h3>
{{svg-jar "analytics-tab-clicked-large"}}
<span class="animated-number clicked" {{did-update this.applyClasses this.post.count.clicks}}>{{split-number this.post.count.clicks this.previousClickedCount}}</span>
</h3>
<p>{{svg-jar "analytics-tab-clicked"}}<span class="analytics-tab-label">Clicked<span class="analytics-tab-percentage"> — {{this.post.clickRate}}%</span></span></p>
</tabs.tab>
<tabs.tabPanel>
<Posts::PostActivityFeed
@post={{this.post}}
@eventType="clicked"
@linkQuery={{hash filterParam=(concat "clicked_links.post_id:" this.post.id) }}
/>
</tabs.tabPanel>
{{/if}}
{{#if this.post.isFeedbackEnabledForEmail }}
<tabs.tab>
<h3>
{{svg-jar "analytics-tab-feedback-large"}}
<span class="animated-number feedback" {{did-update this.applyClasses this.totalFeedback}}>{{split-number this.totalFeedback this.previousFeedbackCount}}</span>
</h3>
<p>{{svg-jar "analytics-tab-feedback"}}<span class="analytics-tab-label">Feedback<span class="analytics-tab-percentage"> — {{this.post.sentiment}}%</span></span></p>
</tabs.tab>
<tabs.tabPanel>
<Posts::PostActivityFeed
@post={{this.post}}
@eventType="feedback"
@data={{this.feedbackChartData}}
/>
</tabs.tabPanel>
{{/if}}
{{/if}}
{{#if this.post.showAttributionAnalytics }}
<tabs.tab>
<h3>
{{svg-jar "analytics-tab-conversions-large"}}
{{#if this.post.hasBeenEmailed}}
<span class="animated-number conversions" {{did-update this.applyClasses this.post.count.conversions}}>{{split-number this.post.count.conversions this.previousConversionsCount}}</span>
{{else}}
Conversions
{{/if}}
</h3>
<p>{{svg-jar "analytics-tab-conversions"}}<span class="analytics-tab-label">{{gh-pluralize this.post.count.conversions "Conversions" without-count=true}}</span></p>
</tabs.tab>
<tabs.tabPanel>
<Posts::PostActivityFeed @post={{this.post}} @eventType="conversion" />
</tabs.tabPanel>
{{/if}}
</Tabs::Tabs>
{{#if this.isLoaded }}
<div class="gh-post-analytics-split {{if this.showMentions "gh-post-analytics-with-mentions"}}">
{{#if this.showLinks }}
{{#if (is-empty this.links) }}
{{!-- Empty state --}}
{{else}}
<Posts::LinksTable
@links={{this.links}}
@updateLink={{this.updateLink}}
@showSuccess={{this.showSuccess}}
/>
{{/if}}
{{/if}}
{{#if this.showMentions }}
<div class="gh-post-analytics-box gh-post-analytics-mentions {{unless this.showLinks "is-full-width"}}">
<h3 class="gh-post-analytics-mentions-header">Mentions</h3>
<div class="gh-post-analytics-mentions-list">
{{#if this.mentions}}
{{#each this.mentions as |mention|}}
<a href="{{mention.source}}" class="gh-post-analytics-mention" rel="noreferrer noopener" target="_blank">
<img src="{{mention.sourceFavicon}}" alt="{{mention.sourceSiteTitle}}" class="w5 h5 mr2 flex-shrink-0" />
<span class="gh-post-analytics-mention-title">{{if mention.sourceTitle mention.sourceTitle mention.source}}</span>
<span class="gh-post-analytics-mention-timestamp">{{moment-from-now mention.timestamp}}</span>
</a>
{{/each}}
{{else}}
<div>
<p>No mentions yet.</p>
</div>
{{/if}}
</div>
{{#if this.mentions}}
<div class="gh-dashboard-list-footer">
<LinkTo @route="posts.mentions" @model={{this.post.id}}>View all mentions →</LinkTo>
</div>
{{/if}}
</div>
{{/if}}
</div>
<div class="gh-post-analytics-box resources">
<a href="https://ghost.org/help/post-analytics/" target="_blank" class="gh-post-analytics-resource" rel="noopener noreferrer">
<div class="thumbnail" style="background-image: url(assets/img/marketing/analytics-1.jpg);"></div>
<div class="flex flex-column justify-between">
<div>
<h4 class="gh-main-section-header small bn">
Ghost help
</h4>
<div>
<h3>Understanding analytics in Ghost</h3>
<p>Find out how to review the performance of your content and get the most out of post analytics in Ghost.</p>
</div>
</div>
<div class="gh-btn gh-btn-link">Read more →</div>
</div>
</a>
<a href="https://ghost.org/resources/content-distribution/" target="_blank" class="gh-post-analytics-resource" rel="noopener noreferrer">
<div class="thumbnail" style="background-image: url(assets/img/marketing/analytics-2.jpg);"></div>
<div class="flex flex-column justify-between">
<div>
<h4 class="gh-main-section-header small bn">
Ghost resources
</h4>
<div>
<h3>How to get your content seen online</h3>
<p>Use these content distribution tactics to get more people to discover your work and increase engagement.</p>
</div>
</div>
<div class="gh-btn gh-btn-link">Read more →</div>
</div>
</a>
</div>
{{else}}
<div class="gh-post-analytics-loading">
<div class="gh-loading-spinner-outer">
<div class="gh-loading-spinner"></div>
</div>
</div>
{{/if}}
</section>