mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-25 11:55:03 +03:00
Tidied up the page a bit more with the source attribution included
- Has the source attribution chart and table with some basic styles - Added in a edit button to the analytics page refs https://github.com/TryGhost/Team/issues/1920
This commit is contained in:
parent
0541dbc79b
commit
729935eca7
@ -3,7 +3,7 @@
|
||||
<div class="gh-dashboard-list-title">Sources</div>
|
||||
<div class="gh-dashboard-list-title">Signups</div>
|
||||
{{#if this.membersUtils.paidMembersEnabled}}
|
||||
<div class="gh-dashboard-list-title">Paid Conversions</div>
|
||||
<div class="gh-dashboard-list-title"><span class="hide-when-small">Paid </span>Conversions</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="gh-dashboard-list-body" style="max-height: 230px; overflow-y: clip; justify-content: flex-start;">
|
||||
|
@ -157,12 +157,12 @@
|
||||
{{#if (not-eq this.settings.membersSignupAccess "none")}}
|
||||
<div class="flex flex-column items-end">
|
||||
{{#if (and (not this.session.user.isContributor) (or @post.isSent @post.isPublished) (or this.settings.emailTrackClicks (feature "memberAttribution")))}}
|
||||
<LinkTo @route="posts.analytics" @model={{@post}} class="gh-post-list-cta stats {{if this.isHovered "is-hovered"}}">
|
||||
{{svg-jar "stats"}}
|
||||
<LinkTo @route="posts.analytics" @model={{@post}} class="gh-post-list-cta stats {{if this.isHovered "is-hovered"}}" title="View post analytics">
|
||||
{{svg-jar "stats" title="View post analytics"}}
|
||||
</LinkTo>
|
||||
{{else}}
|
||||
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="gh-post-list-cta edit {{if this.isHovered "is-hovered"}}">
|
||||
{{svg-jar "pen"}}
|
||||
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="gh-post-list-cta edit {{if this.isHovered "is-hovered"}}" title="Edit this post">
|
||||
{{svg-jar "pen" title="Edit this post"}}
|
||||
</LinkTo>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
@ -622,7 +622,7 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gh-post-analytics-item .hide-when-small {
|
||||
.hide-when-small {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -735,9 +735,19 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
|
||||
}
|
||||
|
||||
.gh-post-analytics-meta {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.gh-post-analytics-meta-text {
|
||||
color: var(--midlightgrey-d2);
|
||||
font-size: 1.35rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.gh-post-analytics-box {
|
||||
@ -860,6 +870,33 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.gh-attribution-box {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background: var(--white);
|
||||
box-shadow: 0 1px 4px -1px rgba(0,0,0,0.1);
|
||||
border-radius: var(--border-radius);
|
||||
display: flex;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.gh-attribution-chart-column {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gh-attribution-chart-column-inner {
|
||||
padding: 0 24px;
|
||||
max-width: 296px;
|
||||
}
|
||||
|
||||
.gh-attribution-table-column {
|
||||
flex: 2;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.gh-links-list {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
@ -1001,7 +1038,7 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
|
||||
}
|
||||
|
||||
|
||||
.gh-posts-list-item-labs a.gh-post-list-cta {
|
||||
a.gh-post-list-cta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: max-content;
|
||||
@ -1014,39 +1051,44 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
|
||||
transition: all .2s ease;
|
||||
}
|
||||
|
||||
.gh-posts-list-item-labs a.gh-post-list-cta.stats.is-hovered {
|
||||
a.gh-post-list-cta.stats.is-hovered {
|
||||
color: var(--green);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.gh-posts-list-item-labs a.gh-post-list-cta.stats.is-hovered:hover {
|
||||
a.gh-post-list-cta.stats.is-hovered:hover {
|
||||
border-color: var(--lightgrey);
|
||||
color: var(--green-d1);
|
||||
}
|
||||
|
||||
.gh-posts-list-item-labs a.gh-post-list-cta.edit.is-hovered {
|
||||
a.gh-post-list-cta.edit.is-hovered {
|
||||
color: var(--pink-l2);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.gh-posts-list-item-labs a.gh-post-list-cta.edit.is-hovered:hover {
|
||||
a.gh-post-list-cta.edit.is-hovered:hover,
|
||||
a.gh-post-list-cta.edit:not(.is-hovered):hover {
|
||||
border-color: var(--lightgrey);
|
||||
color: var(--pink-l1);
|
||||
}
|
||||
|
||||
.gh-posts-list-item-labs .gh-post-list-cta svg {
|
||||
a.gh-post-list-cta svg {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.gh-posts-list-item-labs .gh-post-list-cta.edit svg {
|
||||
a.gh-post-list-cta.edit svg {
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.gh-posts-list-item-labs .gh-post-list-cta svg path {
|
||||
a.gh-post-list-cta svg path {
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.gh-post-analytics-meta a.gh-post-list-cta {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1080px) {
|
||||
.gh-post-analytics-box.resources {
|
||||
flex-direction: column;
|
||||
@ -1058,6 +1100,15 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gh-attribution-box {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gh-attribution-chart-column-inner {
|
||||
padding: 8px;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.gh-post-analytics-item {
|
||||
border-left: 0 none;
|
||||
border-bottom: 1px solid var(--whitegrey-d1);
|
||||
|
@ -10,29 +10,34 @@
|
||||
<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
|
||||
<div class="gh-post-analytics-meta">
|
||||
<div class="gh-post-analytics-meta-text">
|
||||
{{#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 and sent
|
||||
Published on your site
|
||||
{{/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>
|
||||
{{#let (moment-site-tz this.post.publishedAtUTC) as |publishedAt|}}
|
||||
on
|
||||
{{moment-format publishedAt "D MMM YYYY"}}
|
||||
at
|
||||
{{moment-format publishedAt "HH:mm"}}
|
||||
{{/let}}
|
||||
</div>
|
||||
<LinkTo @route="editor.edit" @models={{array this.post.displayName this.post.id}} class="gh-post-list-cta edit" title="Edit this post">
|
||||
{{svg-jar "pen" title="Edit this post"}}
|
||||
</LinkTo>
|
||||
</div>
|
||||
</GhCanvasHeader>
|
||||
|
||||
<h4 class="gh-main-section-header small bn">
|
||||
@ -60,11 +65,10 @@
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
|
||||
{{#if (and (feature 'memberAttribution') (not this.post.emailOnly)) }}
|
||||
<div class="gh-post-analytics-item">
|
||||
<h3>{{format-number this.post.count.signups}}</h3>
|
||||
<p>{{gh-pluralize this.post.count.signups "Signup" without-count=true}}</p>
|
||||
<p>{{gh-pluralize this.post.count.signups "signup" without-count=true}}</p>
|
||||
</div>
|
||||
|
||||
{{#if this.membersUtils.paidMembersEnabled}}
|
||||
@ -77,49 +81,47 @@
|
||||
</div>
|
||||
|
||||
{{#if (and this.settings.emailTrackClicks (or this.post.isSent (and this.post.isPublished this.post.email)))}}
|
||||
<h4 class="gh-main-section-header small bn">
|
||||
Link clicks
|
||||
</h4>
|
||||
{{#if (not-eq this.links null)}}
|
||||
<div class="gh-post-analytics-box column">
|
||||
<div class="gh-links-list">
|
||||
{{#if (is-empty this.links) }}
|
||||
There are no links in this email.
|
||||
{{else}}
|
||||
{{#if (is-empty this.links) }}
|
||||
{{!-- Empty state --}}
|
||||
{{else}}
|
||||
<h4 class="gh-main-section-header small bn">
|
||||
Link clicks
|
||||
</h4>
|
||||
<div class="gh-post-analytics-box column">
|
||||
<div class="gh-links-list">
|
||||
{{#each this.links as |link|}}
|
||||
<div class="gh-links-list-item">
|
||||
<a href="{{link.link.to}}">{{link.link.title}}</a>
|
||||
<p class="gh-links-list-clicks">{{link.count.clicks}}</p>
|
||||
</div>
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
Loading...
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{#if (and (feature 'sourceAttribution') (not this.post.emailOnly))}}
|
||||
<h4 class="gh-main-section-header small bn">
|
||||
Source attribution
|
||||
</h4>
|
||||
{{#if (not-eq this.sources null) }}
|
||||
{{#if (is-empty this.sources) }}
|
||||
No data yet.
|
||||
{{!-- Empty state --}}
|
||||
{{else}}
|
||||
<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;">
|
||||
<h4 class="gh-main-section-header small bn">
|
||||
Source attribution
|
||||
</h4>
|
||||
<div class="gh-post-analytics-box column">
|
||||
<div class="gh-attribution-box">
|
||||
<div class="gh-attribution-chart-column">
|
||||
<div class="gh-attribution-chart-column-inner">
|
||||
<MemberAttribution::SourceAttributionChart @sources={{this.sources}} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-attribution-table-column">
|
||||
<MemberAttribution::SourceAttributionTable @sources={{this.sources}} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
@ -132,17 +134,17 @@
|
||||
Get started with analytics
|
||||
</h4>
|
||||
<div class="gh-post-analytics-box resources">
|
||||
<div class="gh-post-analytics-resource">
|
||||
<a href="https://ghost.org/help/" 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>
|
||||
<h3>📈 Understand analytics in Ghost</h3>
|
||||
<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 →</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-post-analytics-resource">
|
||||
</a>
|
||||
<a href="https://ghost.org/resources" 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>
|
||||
@ -151,7 +153,7 @@
|
||||
</div>
|
||||
<div class="gh-btn gh-btn-link">Sharing is caring →</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
Loading…
Reference in New Issue
Block a user