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
You can’t perform that action at this time.