Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Analytify dashboard sections on frontend as shortcodes
<style>
.analytify_status_box_wraper {
border: 1px solid #e2e5e8;
margin-bottom: 20px;
background: #fff;
line-height: 1.5;
font-family: 'Roboto', sans-serif;
color: #848484;
font-size: 14px;
}
.analytify_status_box_wraper * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.analytify_status_header {
border-bottom: 1px solid #e2e5e8;
background: #f9fafa;
padding: 20px 20px;
position: relative;
text-align: left;
}
.analytify_wraper h3 {
color: #444444;
font-size: 18px;
font-family: 'Roboto Slab', serif;
line-height: 1.2;
margin: 0;
font-weight: 400;
}
.analytify_status_footer {
border-top: 1px solid #e2e5e8;
background: #f9fafa;
padding: 15px 20px;
}
.analytify_general_status_boxes_wraper {
padding-bottom: 20px;
text-align: left;
}
.analytify_general_status_box {
width: calc(33% - 24px);
margin: 20px 0px 0px 20px;
border: 1px solid #e2e5e8;
background: #fff;
display: inline-block;
text-align: center;
position: relative;
padding: 20px 20px 50px;
vertical-align: top;
font-size: 14px;
}
.analytify_general_status_box h4 {
position: relative;
font-weight: 700;
color: #848484;
font-size: 14px;
text-transform: uppercase;
}
.analytify_general_status_box h4:after {
display: block;
max-width: 100px;
height: 1px;
background: #e2e5e8;
content: "";
margin: 7px auto 10px;
}
.analytify_general_stats_value {
font-size: 48px;
color: #444444;
font-weight: 100;
}
.analytify_wraper p {
font-size: 14px;
line-height: 1.5;
margin: 0;
}
.analytify_general_status_footer_info {
position: absolute;
bottom: 0px;
left: 0px;
background: #f2f2f2;
text-align: center;
border-top: 1px solid #e2e5e8;
width: 100%;
padding: 10px;
font-size: 11px;
color: #00c853;
}
.analytify_status_footer p {
position: relative;
display: inline-block;
padding: 3px 0px 3px 37px;
}
.analytify_status_footer p span {
color: #fa5825;
}
@media screen and (max-width: 768px) {
.analytify_general_status_box {
width: calc(50% - 24px);
}
.analytify_general_status_boxes_wraper {
padding-right: 20px;
}
}
@media screen and (max-width: 639px) {
.analytify_general_status_box {
width: calc(100% - 24px);
}
}
</style>
<div class="analytify_status_box_wraper">
<div class="analytify_status_header">
<h3>General Statistics</h3>
</div>
<div class="analytify_general_status_boxes_wraper">
<div class="analytify_general_status_box">
<h4>Sessions</h4>
<div class="analytify_general_stats_value">[analytify-stats metrics="ga:sessions" permission_view=""]</div>
Total number of Sessions within the date range. A session is the period time a user is actively engaged with your website. app. etc.
</div>
<div class="analytify_general_status_box">
<h4>Visitors</h4>
<div class="analytify_general_stats_value">[analytify-stats metrics="ga:users" permission_view=""]</div>
Users that have had at least one session within the selected date range. Includes both new and returning users.
</div>
<div class="analytify_general_status_box">
<h4>Page views</h4>
<div class="analytify_general_stats_value">[analytify-stats metrics="ga:pageviews" permission_view=""]</div>
Pageviews is the total number of pages viewed. Repeated views of a single page are counted.
</div>
</div>
</div>
@latheeshvmv

This comment has been minimized.

Copy link

@latheeshvmv latheeshvmv commented Oct 6, 2019

Does this work now?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment