Embedding Piwik is easy. It works much like embedding a YouTube video. You just need to copy and paste a line of code into any context where you can use an iframe tag. Many blogs and most websites will let you do this. Let’s take a look at how you can embed Piwik in a WordPress website. WordPress is one of the most popular open source content management systems. The process is very similar whatever piece of software you are using.
Change User Permissions
First, you have to configure permissions. By default, Piwik will not let other people see your data. You can make your data public in one of two ways:
-
** Publish in a public website or app**
Set the view permission for the anonymous user in the User Management section of Piwik (see Manage Users documentation), or -
** Embed Piwik widgets on a password protected or private page**
We recommend in this case that you create a new user and give it view access to the website you wish to embed in your password protected page.
Then, copy the ‘token_auth’ of this user from the Manage Users page, and paste it at the end of the widget URL in the widget embed HTML code:&token_auth=your_token_auth_here
Embed a Piwik report in a HTML page
The next step is to choose which Piwik reports you want to embed. All of the widgets are listed, with live preview, on the Widgets page, which you can access from the top bar. When you preview any widget you will see the embed code (highlighted here in red) underneath the preview:
When you have chosen a widget to embed and copied its code, just go to the website in which you wish to insert it, and paste the code where you want it. In the below image, the top downloads report is inserted into a page of its own.
Note: HTML view is selected because an iframe HTML tag is being pasted in:
When you click save, you will see the familiar Piwik interface embedded in your site:
Embed the Piwik dashboard in a HTML page
As well as embedding single reports, you can also embed the full Piwik Dashboard. In Piwik, click on “Widgets”, and you will find the link to embed the full dashboard. This can be very useful for users who wish to integrate Piwik inside another dashboard or app.
Embed the full Piwik app anywhere
You may also embed the full Piwik application within an Iframe. To do so, a small change to the config file is required, see this FAQ.
Embed a static image graph of your analytics data
It is also possible to include a PNG image (line graph, vertical bar graph or pie chart) that plots the data for any Piwik report. For more information, check out the documentation about Embedding Static Graph Images.
Customising the widgets
To customise the widget date, website id or initial view (table, graph chart, table showing goal metrics) you can edit the parameters in the URL in the embed code:
- idSite – website ID
- period – day, week, month, or year
- date – a date (YYYY-MM-DD), date range (YYYY-MM-DD,YYYY-MM-DD), or alias (e.g., ‘today’)
- disableLink – typically set to 1; when enabled, clicking on the evolution graph redirects the page to the Piwik dashboard
- viewDataTable – defines the widget ‘view’, and can have the following values:
- tableAllColumns
- tableGoals
- table
- cloud
- graphPie
- graphVerticalBar
- graphEvolution
For example, to show widget data as a Bar Chart by default, you can set in the widget URL
&viewDataTable=graphVerticalBar