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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Does this work now?