Piwik

Les articles publiés sur le site

• How to create a custom theme in Piwik – Introducing the Piwik Platform

  23 août 2014, par Thomas Steur — Development

  This is the start of a new blog series where we introduce the capabilities of the Piwik platform. You’ll learn how to write custom plugins & themes, how to use our HTTP APIs and more.

  We have been greatly simplifying our APIs over the last year focusing primarily on one design principle:

  The complexity of our API should never exceed the complexity of your use case.

  In other words, if you have a simple use for our API, we want it to be simple for you to accomplish it. If you have a complex, big, hairy, change-the-world idea, then maybe we can’t make it simple for you to accomplish it, but we want it to be possible.

  Over the next weeks and months you will learn what exactly we mean by this and how we accomplished it.

  FYI, don’t worry if you’re currently using our APIs, we keep them backwards compatible and we announce breaking changes in our platform changelog.

  Getting started

  In this series of posts, we assume that you have already set up your development environment. If not, visit the Piwik Developer Zone where you’ll find the tutorial Setting up Piwik.

  To summarize the things you have to do to get setup:

  • Install Piwik (for instance via git).
  • Activate the developer mode: ./console development:enable --full.
  • And if you want, generate some test data: ./console visitorgenerator:generate-visits --idsite=1 --limit-fake-visits=600. This can take a while and requires the VisitorGenerator plugin from the Marketplace.

  Let’s start creating our own theme

  We start by using the Piwik Console to create a blank theme:

  ./console generate:theme

  The command will ask you to enter a name, description and version number for your theme. I will simply use “CustomTheme” as the name of the theme. There should now be a folder plugins/CustomTheme which contains some files to get you started easily.

  Before we modify our theme, we have to activate it by visiting the Settings => Themes admin page in our Piwik installation, or alternatively by running the command ./console core:plugin activate YourCustomTheme. If the theme is not activated, we won’t see any changes.

  Theme Contents

  The most important files in our theme are plugins/CustomTheme/stylesheets/theme.less, plugins/CustomTheme/stylesheets/_colors.less and plugins/CustomTheme/stylesheets/_variables.less:

  • theme.less is the file that will be included when your theme is activated. In this file you would include other stylesheet files and overwrite CSS styles.
  • _colors.less contains many less variables allowing you to easily change the colors Piwik uses.
  • _variables.less contains currently only one variable to change the font family. More variables will be added in the future. Note: This is a new feature and the file will be only there in case you have installed Piwik using Git or at least Piwik 2.6.0.

  Changing the font family

  To change the font family simply overwrite the variable @theme-fontFamily-base: Verdana, sans-serif; in _variables.less. That’s it.

  Changing colors

  To change a color, uncomment the less variables of the colors you want to change in _colors.less. I will shortly explain some of them. Usually changing only these colors will be enough to adjust Piwik’s look to your corporate design or to create a look that pleases you:

  @theme-color-brand:                    #d4291f; // The Piwik red which is for instance used in the menu, it also defines the color of buttons, the little arrows and more
  @theme-color-brand-contrast:           #ffffff; // Contrast color to the Piwik red. Usually you need to change it only in case you define a light brand color. For instance to change the text color of buttons
  @theme-color-link:                     #1e93d1; // The link color which is usually a light blue
  
  @theme-color-widget-title-text:        #0d0d0d; // The text and background color of the header of a widget (Dashboard)
  @theme-color-widget-title-background:  #f2f2f2;
  
  @theme-color-menu-contrast-text:       #666666; // The text color of a menu item in the reporting sub menu and the admin menu
  @theme-color-menu-contrast-textActive: #0d0d0d; // The text color of an active menu item
  @theme-color-menu-contrast-background: #f2f2f2; // The background color of a menu item
  
  @graph-colors-data-series[1-8]:        #000000; // The different colors used in graphs

  Making the change visible

  To make a color or font change actually visible when you reload a page in Piwik you will have to delete the compiled CSS file after each change like this:

  rm tmp/assets/asset_manager_global_css.css

  Publishing your Theme on the Marketplace

  In case you want to share your theme with other Piwik users you can do this by pushing your theme to GitHub and creating a tag. Easy as that. Read more about how to distribute a theme.

  Advanced features

  Isn’t it easy to create a custom theme? All we had to do is to change some less variables. We never even created a file! Of course, based on our API design principle, you can accomplish more if you want. For instance, you can change icons, CSS stylesheets, templates and more.

  For further customising your Piwik, you can even change the logo and favicon in the Settings => General settings page.

  Would you like to know more about theming? Go to our Theme guide in the Piwik Developer Zone.

  If you have any feedback regarding our APIs or our guides in the Developer Zone feel free to send it to us.

  PS: see also this related FAQ: How do I White Label Piwik?

• How to create a custom theme in Piwik – Introducing the Piwik Platform

  23 août 2014, par Thomas Steur — Development

  This is the start of a new blog series where we introduce the capabilities of the Piwik platform. You’ll learn how to write custom plugins & themes, how to use our HTTP APIs and more.

  We have been greatly simplifying our APIs over the last year focusing primarily on one design principle:

  The complexity of our API should never exceed the complexity of your use case.

  In other words, if you have a simple use for our API, we want it to be simple for you to accomplish it. If you have a complex, big, hairy, change-the-world idea, then maybe we can’t make it simple for you to accomplish it, but we want it to be possible.

  Over the next weeks and months you will learn what exactly we mean by this and how we accomplished it.

  FYI, don’t worry if you’re currently using our APIs, we keep them backwards compatible and we announce breaking changes in our platform changelog.

  Getting started

  In this series of posts, we assume that you have already set up your development environment. If not, visit the Piwik Developer Zone where you’ll find the tutorial Setting up Piwik.

  To summarize the things you have to do to get setup:

  • Install Piwik (for instance via git).
  • Activate the developer mode: ./console development:enable --full.
  • And if you want, generate some test data: ./console visitorgenerator:generate-visits --idsite=1 --limit-fake-visits=600. This can take a while and requires the VisitorGenerator plugin from the Marketplace.

  Let’s start creating our own theme

  We start by using the Piwik Console to create a blank theme:

  ./console generate:theme

  The command will ask you to enter a name, description and version number for your theme. I will simply use “CustomTheme” as the name of the theme. There should now be a folder plugins/CustomTheme which contains some files to get you started easily.

  Before we modify our theme, we have to activate it by visiting the Settings => Themes admin page in our Piwik installation, or alternatively by running the command ./console core:plugin activate YourCustomTheme. If the theme is not activated, we won’t see any changes.

  Theme Contents

  The most important files in our theme are plugins/CustomTheme/stylesheets/theme.less, plugins/CustomTheme/stylesheets/_colors.less and plugins/CustomTheme/stylesheets/_variables.less:

  • theme.less is the file that will be included when your theme is activated. In this file you would include other stylesheet files and overwrite CSS styles.
  • _colors.less contains many less variables allowing you to easily change the colors Piwik uses.
  • _variables.less contains currently only one variable to change the font family. More variables will be added in the future. Note: This is a new feature and the file will be only there in case you have installed Piwik using Git or at least Piwik 2.6.0.

  Changing the font family

  To change the font family simply overwrite the variable @theme-fontFamily-base: Verdana, sans-serif; in _variables.less. That’s it.

  Changing colors

  To change a color, uncomment the less variables of the colors you want to change in _colors.less. I will shortly explain some of them. Usually changing only these colors will be enough to adjust Piwik’s look to your corporate design or to create a look that pleases you:

  @theme-color-brand:                    #d4291f; // The Piwik red which is for instance used in the menu, it also defines the color of buttons, the little arrows and more
  @theme-color-brand-contrast:           #ffffff; // Contrast color to the Piwik red. Usually you need to change it only in case you define a light brand color. For instance to change the text color of buttons
  @theme-color-link:                     #1e93d1; // The link color which is usually a light blue
  
  @theme-color-widget-title-text:        #0d0d0d; // The text and background color of the header of a widget (Dashboard)
  @theme-color-widget-title-background:  #f2f2f2;
  
  @theme-color-menu-contrast-text:       #666666; // The text color of a menu item in the reporting sub menu and the admin menu
  @theme-color-menu-contrast-textActive: #0d0d0d; // The text color of an active menu item
  @theme-color-menu-contrast-background: #f2f2f2; // The background color of a menu item
  
  @graph-colors-data-series[1-8]:        #000000; // The different colors used in graphs

  Making the change visible

  To make a color or font change actually visible when you reload a page in Piwik you will have to delete the compiled CSS file after each change like this:

  rm tmp/assets/asset_manager_global_css.css

  Publishing your Theme on the Marketplace

  In case you want to share your theme with other Piwik users you can do this by pushing your theme to GitHub and creating a tag. Easy as that. Read more about how to distribute a theme.

  Advanced features

  Isn’t it easy to create a custom theme? All we had to do is to change some less variables. We never even created a file! Of course, based on our API design principle, you can accomplish more if you want. For instance, you can change icons, CSS stylesheets, templates and more.

  For further customising your Piwik, you can even change the logo and favicon in the Settings => General settings page.

  Would you like to know more about theming? Go to our Theme guide in the Piwik Developer Zone.

  If you have any feedback regarding our APIs or our guides in the Developer Zone feel free to send it to us.

  PS: see also this related FAQ: How do I White Label Piwik?

• Piwik Mobile 2.1 Beta for Android

  14 août 2014, par Thomas Steur — Piwik Mobile Releases

  Four years ago we published the first version of Piwik Mobile! To celebrate this event, the next beta of Piwik Mobile 2 for Android is now available.

  Download Piwik Mobile 2.1 Beta for Android 4+

  What’s new in Piwik Mobile 2.1?

  Over the last weeks we’ve been working on this update which includes several performance and UI improvements, bugfixes and new features:

  • Support for Segmentation [#3243] – you can now apply your custom segments in Piwik Mobile
  • Better support for Events
  • Clickable URL’s in a visitor’s actions list
  • Expose a general setting to configure SSL certificate validation [#5282]
  • Fixed the Real-Time Map was not working on Android 4.4+ [#4413]
  • List of all closed issues

  We have also updated the underlying framework for better compatibility with new devices and changed some code to improve performance.

  Give us feedback

  Start using Piwik Mobile 2.1 now and send us any feedback or create an issue on our new Piwik Mobile 2 Issue Tracker.

  While the app should be already quite stable we can improve Piwik Mobile much better with your help!

  Download now

  Download Piwik Mobile 2.1 Beta for Android 4+

• Piwik Mobile 2.1 Beta for Android

  14 août 2014, par Thomas Steur — Piwik Mobile Releases

  Four years ago we published the first version of Piwik Mobile! To celebrate this event, the next beta of Piwik Mobile 2 for Android is now available.

  Download Piwik Mobile 2.1 Beta for Android 4+

  What’s new in Piwik Mobile 2.1?

  Over the last weeks we’ve been working on this update which includes several performance and UI improvements, bugfixes and new features:

  • Support for Segmentation [#3243] – you can now apply your custom segments in Piwik Mobile
  • Better support for Events
  • Clickable URL’s in a visitor’s actions list
  • Expose a general setting to configure SSL certificate validation [#5282]
  • Fixed the Real-Time Map was not working on Android 4.4+ [#4413]
  • List of all closed issues

  We have also updated the underlying framework for better compatibility with new devices and changed some code to improve performance.

  Give us feedback

  Start using Piwik Mobile 2.1 now and send us any feedback or create an issue on our new Piwik Mobile 2 Issue Tracker.

  While the app should be already quite stable we can improve Piwik Mobile much better with your help!

  Download now

  Download Piwik Mobile 2.1 Beta for Android 4+

• Announcing our latest open source project : DeviceDetector

  30 juillet 2014, par Stefan Giehl — Community, Development, Meta, DeviceDetector

  This blog post is an announcement for our latest open source project release: DeviceDetector! The Universal Device Detection library will parse any User Agent and detect the browser, operating system, device used (desktop, tablet, mobile, tv, cars, console, etc.), brand and model.

  Read on to learn more about this exciting release.

  Why did we create DeviceDetector?

  Our previous library UserAgentParser only had the possibility to detect operating systems and browsers. But as more and more traffic is coming from mobile devices like smartphones and tablets it is getting more and more important to know which devices are used by the websites visitors.

  To ensure that the device detection within Piwik will gain the required attention, so it will be as accurate as possible, we decided to move that part of Piwik into a separate project, that we will maintain separately. As an own project we hope the DeviceDetector will gain a better visibility as well as a better support by and for the community!

  DeviceDetector is hosted on GitHub at piwik/device-detector. It is also available as composer package through Packagist.

  How DeviceDetector works

  Every client requesting data from a webserver identifies itself by sending a so-called User-Agent within the request to the server. Those User Agents might contain several information such as:

  • client name and version (clients can be browsers or other software like feed readers, media players, apps,…)
  • operating system name and version
  • device identifier, which can be used to detect the brand and model.

  For Example:

  Mozilla/5.0 (Linux; Android 4.4.2; Nexus 5 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.99 Mobile Safari/537.36

  This User Agent contains following information:

  Operating system is Android 4.4.2, client uses the browser Chrome Mobile 32.0.1700.99 and the device is a Google Nexus 5 smartphone.

  What DeviceDetector currently detects

  DeviceDetector is able to detect bots, like search engines, feed fetchers, site monitors and so on, five different client types, including around 100 browsers, 15 feed readers, some media players, personal information managers (like mail clients) and mobile apps using the AFNetworking framework, around 80 operating systems and nine different device types (smartphones, tablets, feature phones, consoles, tvs, car browsers, cameras, smart displays and desktop devices) from over 180 brands.

  Note: Piwik itself currently does not use the full feature set of DeviceDetector. Client detection is currently not implemented in Piwik (only detected browsers are reported, other clients are marked as Unknown). Client detection will be implemented into Piwik in the future, follow #5413 to stay updated.

  Performance of DeviceDetector

  Our detections are currently handled by an enormous number of regexes, that are defined in several .YML Files. As parsing these .YML files is a bit slow, DeviceDetector is able to cache the parsed .YML Files. By default DeviceDetector uses a static cache, which means that everything is cached in static variables. As that only improves speed for many detections within one process, there are also adapters to cache in files or memcache for speeding up detections across requests.

  How can users help contribute to DeviceDetector?

  Submit your devices that are not detected yet

  If you own a device, that is currently not correctly detected by the DeviceDetector, please create a issue on GitHub
  In order to check if your device is detected correctly by the DeviceDetector go to your Piwik server, click on ‘Settings’ link, then click on ‘Device Detection’ under the Diagnostic menu. If the data does not match, please copy the displayed User Agent and use that and your device data to create a ticket.

  Submit a list of your User Agents

  In order to create new detections or improve the existing ones, it is necessary for us to have lists of User Agents. If you have a website used by mostly non desktop devices it would be useful if you send a list of the User Agents that visited your website. To do so you need access to your access logs. The following command will extract the User Agents:

  zcat ~/path/to/access/logs* | awk -F'"' '{print $6}' | sort | uniq -c | sort -rn | head -n20000 > /home/piwik/top-user-agents.txt

  If you want to help us with those data, please get in touch at devicedetector@piwik.org

  Submit improvements on GitHub

  As DeviceDetector is free/libre library, we invite you to help us improving the detections as well as the code. Please feel free to create tickets and pull requests on Github.

  What’s the next big thing for DeviceDetector?

  Please check out the list of issues in device-detector issue tracker.

  We hope the community will answer our call for help. Together, we can build DeviceDetector as the most powerful device detection library!

  Happy Device Detection,