Embed chart on your site

Simple Analytics has a script which you can use to embed public website statistics.

Do you want to access your stats with even more freedom? Use our API for that!

<p>
  This website has <span id="pageviews"></span> page views in the last month.
</p>
<div
  data-sa-graph-url="https://simpleanalytics.com/example.com?color=75b5aa"
  data-sa-page-views-selector="#pageviews"
>
  <p>
    Ad blockers don't like the Simple Analytics embed, disable yours to view
    this chart.
  </p>
</div>
<script src="https://scripts.simpleanalyticscdn.com/embed.js"></script>

Change example.com to your own website

Example

Simple Analytics has ... page views in the last month.

Customize

You can give the charts different colors by adding ?color=75b5aa to the url of the data-sa-graph-url attribute. If you like to show the total page views you can use the data-sa-page-views-selector attribute. It will be filled via JavaScript textContent attribute (so it only works on text tags like span, p, h2).

You can just copy paste links from the normal dashboard, like these:

• https://simpleanalytics.com/example.com
• https://simpleanalytics.com/example.com/contact (stats of contact page)
• https://simpleanalytics.com/example.com/ (stats of home page)
• https://simpleanalytics.com/example.com?color=ff6600
• https://simpleanalytics.com/example.com?start=2018-09-17&end=2018-09-23

If you include multiple charts on your website make sure you include <script src="https://scripts.simpleanalyticscdn.com/embed.js"></script> only once.

Spikes

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-limit parameter. To limit your chart to – let’s say 50,000 page views – you can add it like this: https://simpleanalytics.com/example.com?y-limit=50000 .

Scaling issues

Sometimes the chart does not stretch to the full page width. This can be caused by adding the div with the data-sa-graph-url-attribute in a flex element with align-items: center. This makes the div not stretch to the full width anymore. It can be solved by adding align-self: stretch to the div with the data-sa-graph-url-attribute. See this example:

<div class="your-parent-class">
  <p>
    This website has <span id="pageviews"></span> page views in the last month.
  </p>
  <div
    class="your-chart-class"
    data-sa-graph-url="https://simpleanalytics.com/example.com?color=75b5aa"
    data-sa-page-views-selector="#pageviews"
  >
    <p>
      Ad blockers don't like the Simple Analytics embed, disable yours to view
      this chart.
    </p>
  </div>
</div>

<script src="https://scripts.simpleanalyticscdn.com/embed.js"></script>

<style>
  .your-parent-class {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .your-chart-class {
    align-self: stretch; /* This is the needed styling */
  }
</style>

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.