title | category | skip_pjax | permalink | redirect_from | last_modified_at | ||
---|---|---|---|---|---|---|---|
Embed chart on your site |
features |
true |
/embed-chart-on-your-site |
|
2022-04-14 |
Simple Analytics allows you to embed a chart of your public website statistics on your website. In this chart we show you the visitors (...) and page views (...) of simpleanalytics.com:
Chart is not loading. It might be blocked by an ad-blocker.
The chart above is highly customizable. You can overwrite colors, which data types to show, period to show, and much more.
Want to built your own dashboard with your website data? Check out our APIs.
To include this chart, you'll need to add a script and some HTML to your website. The minimal working version of this code that you can copy into the HTML of your page:
<div id="chart" data-hostname="example.com" style="aspect-ratio: 2/1">
<p style="margin: 0">Loading chart...</p>
</div>
<script
async
data-chart-selectors="#chart"
src="https://scripts.simpleanalyticscdn.com/embed.js"
></script>
Make sure to replace
example.com
with your own website.
The following parameters are customizable:
<div
id="chart"
style="aspect-ratio: 2/1"
data-hostname="example.com"
data-start="{{ "now" | date: '%s' | minus: 2592000 | date: '%Y-%m-%d' }}"
data-end="{{ "now" | date: '%Y-%m-%d' }}"
data-types="visitors"
data-page-views-selector="#pageviews"
data-visitors-selector="#visitors"
data-pages="/,/contact"
data-y-max="60000"
data-timezone="Europe/Amsterdam"
data-border-width="1"
data-text-color="#ff6600"
data-page-views-color="#ff6600"
data-visitors-color="#cc2200"
data-area-opacity="10"
data-show-logo="true"
></div>
We recommend to keep the style="aspect-ratio: 2/1"
to prevent the page from jumping when the chart is loading.
If you leave the data-text-color
empty, the chart will grab the text color from a paragraph and use that. It even works after you change your website to dark mode.
data-area-opacity
is the opacity in percent of the areas below the line charts.
Chart is not loading. It might be blocked by an ad-blocker.
If you leave data-timezone
empty, it will grab the time zone from the visitor.
The border-width
is the width in pixels of the data lines in the chart.
You can hide the logo by adding data-show-logo="false"
.
<!-- Chart 1 with data from simpleanalytics.com -->
<div
id="chart-id-1"
data-hostname="simpleanalytics.com"
style="aspect-ratio: 2/1"
>
<p style="margin: 0;">
Chart is not loading. It might be blocked by an ad-blocker.
</p>
</div>
<!-- Chart 2 with data from blog.simpleanalytics.com -->
<div
id="chart-id-2"
data-hostname="blog.simpleanalytics.com"
style="aspect-ratio: 2/1"
>
<p style="margin: 0;">
Chart is not loading. It might be blocked by an ad-blocker.
</p>
</div>
<!-- One script tag for multiple charts -->
<script
async
data-chart-selectors="#chart-id-1,#chart-id-2"
src="https://scripts.simpleanalyticscdn.com/embed.js"
></script>
You can apply the data-
settings from customize on the <script>
as well to apply settings to all charts.
When you include multiple charts on your website make sure you include
<script src="https://scripts.simpleanalyticscdn.com/embed.js"></script>
only once.
It happens that some data has huge spikes. This is great traffic-wise, but you might want to cut off the spike in the chart to make more sense out of your data before and after the spikes. You can change this with the y-max
parameter. To limit your chart to – let's say 50,000 page views – you can add it like this to your <div>
-tag: data-y-max="50000"
.
By adding data-pages="/"
you get only data for the home page of your website. Use data-pages="/,/contact"
to get data for only your home page (/
) and your contact page (/contact
). See "get data for specific pages" in our API docs to learn what is possible.
<script>
function onLoad(ok) {
if (ok) console.log("All charts loaded successfully");
else {
// Hide all elements that show charts
// ...
}
}
</script>
<div id="chart" style="aspect-ratio: 2/1" data-hostname="example.com"></div>
<script
async
src="https://scripts.simpleanalyticscdn.com/embed.js"
data-chart-selectors="#chart"
data-onload="onLoad"
></script>
Our public scripts are always open-source, so feel free to look at the embed script code in more detail on GitHub.
If you have other issues, please let us know because we love to help you! Do you want to access your stats with even more freedom? Use our API for that.