{"id":9406,"date":"2016-11-11T23:05:19","date_gmt":"2016-11-11T22:05:19","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=9406"},"modified":"2026-01-12T09:11:56","modified_gmt":"2026-01-12T09:11:56","slug":"248-how-i-used-highcharts-cloud-and-user-engagement","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/248-how-i-used-highcharts-cloud-and-user-engagement\/","title":{"rendered":"Double your user engagement by exposing your Google Analytics data"},"content":{"rendered":"

One of the best things I\u2019ve done to date to grow the number of subscribers to my website has been creating a community page<\/a><\/b> where I exposed my website stats. Why? New visitors are looking for good quality content, and are therefore looking for immediate cues to \u201cworthiness\u201d or they will leave. Equally important: existing users get their choice validated and behavior reinforced as well.<\/p>\n

Let me give you a little background. One day, I was talking to a friend of mine, who had visited my website, and he asked me, \u201cHey, how is your website doing?\u201d He was under the impression that he was one of my first visitors. When I told him about the amount of traffic that my website was getting, he was surprised. He had no idea.<\/p>\n

This is a real problem, and one a lot of bloggers struggle with, at least at the beginning. It is hard to get traffic, and those visitors that do come to the website leave quickly, if they find no indication that other people have found it useful, interesting, helpful, etc. It is hard to get them to return, or subscribe, and it\u2019s hard to keep the traffic numbers steady.<\/p>\n

This problem really struck me: How could I show people that my website is the real deal? I decided that I should make my website more transparent, and find a way to show the user that there is a diverse community behind it and that it is growing. Thankfully, HighCharts offered the solution.<\/p>\n

HOW TO USE BUILD TRUST AND TRANSPARENCY WITH YOUR WEBSITE VISITORS<\/h2>\n

The set-up works as follows: Google Sheets add-on grabs Google Analytics data for my website from GA API, and outputs it into tables in Google Sheets. Visualizations in Highcharts Cloud use data from Google Sheets and embedded, dashboard-style, on the community page<\/a><\/b>.<\/p>\n

Here is what the final dashboard looks like:\u00a0\"Macintosh<\/a><\/p>\n

Let\u2019s dive into the details on how to make this all happen. It\u2019s a lot easier than you may think.<\/p>\n

STEP 1: PREPARE THE DATA<\/h2>\n

First, create a new Google sheet. Go to the menu and select \u2018Get Add-Ons\u2019. Search for \u201cGoogle Analytics\u201d. A few add-ons will pop up. I\u2019ve tried Google Analytics and Analytics Canvas, and both are great. Using the add-on of your choice, select the Google Analytics account that holds your data. Select the dimensions and metrics that you want to display.<\/p>\n

Using Google Analytics is completely optional. You can also create a dataset in Excel, to include any data you want, and just copy and paste it into HighCharts.<\/p>\n

There is one thing to keep in mind here: your charts shouldn\u2019t look like you are bragging. Select your data carefully. Pick something that your users will be able to identify with. I\u2019ve intentionally included country and age because these enable my users to identify generically with each other \u2013 everyone, after all, has an age group and a country that they belong to.<\/p>\n

STEP 2: BUILD YOUR CHARTS<\/h2>\n

Building embeddable charts is easy in HighCharts Cloud. In fact, I don\u2019t feel like I need to explain how it works, but I\u2019ll do it anyway!<\/p>\n

If you haven\u2019t already, create a HighCharts Cloud account. Once you\u2019ve logged in, click on the New tab at the top of the screen.<\/p>\n

The process of creating a chart includes four steps:\"Macintosh<\/p>\n

    \n
  1. Data import<\/strong><\/b><\/li>\n<\/ol>\n

    You can copy and paste your data from a CSV file or an Excel file. You can also use Google Sheet Import (available for advanced plan users), or create a table right in the browser.<\/p>\n

      \n
    1. Template selection<\/strong><\/b><\/li>\n<\/ol>\n

      HighCharts offers a great selection of prebuilt charts that you can use. It includes line charts, area charts, bar charts, polar charts, and my personal favorite \u2013 combination charts.\"Macintosh<\/p>\n

        \n
      1. Customization<\/strong><\/b><\/li>\n<\/ol>\n

        You can customize every aspect of your chart: titles, appearance, labels, tooltips and more. You can even select your brand colors and fonts.\"Macintosh<\/p>\n

          \n
        1. Share<\/strong><\/b><\/li>\n<\/ol>\n

          You will need to save your work before you share it.<\/p>\n

          STEP 3: EMBED YOUR CHARTS<\/h2>\n

          Finally, select how you would like to share your chart. HighCharts offers direct posting to Twitter, Facebook, Google +, or LinkedIn. \u00a0But the best way to share your data visualization is to embed it on your site using the code that HighCharts generates.\"Macintosh<\/p>\n

          Go to your website. If you have a WordPress site, simply paste the code that HighCharts provided, anywhere on your page. If you are using a blogging tool that doesn\u2019t recognize HTML code, head for the iframe embed feature. When you publish your website, the charts will appear on the webpage. That\u2019s it!<\/p>\n

          The beauty of this is that all the charts are interactive \u2013 your website visitors will be able to click and hover over, to learn more. This will also increase time spent on the site.\"Screen<\/p>\n

          Just take a look at the screenshot above. It compares the website performance between two user segments: those who visited data community page, and those who didn\u2019t. Spending time on building the data visualization paid off. I was able to double user engagement KPIs.<\/p>\n

          Editor note<\/strong><\/b>:
          \nIt may also be worth mentioning that there are other ways to embed these charts to your site, depending on your technical skill level. The newly released Highcharts Editor<\/a><\/b> lets you install a chart editor as a WordPress, TinyMCE or CKEditor plugin (with more integrations coming). Developers may also skip the editor part completely and use the Highcharts JavaScript library directly in combination with the data module<\/a><\/b>.<\/p>\n

          —————
          \nAbout the Author<\/em><\/strong>
          \n Olga is a data professional and analytics junkie. She writes about analytics tactics, visualization tricks and all things data on her blog\u00a0          olgatsubiks.com<\/a><\/b>.<\/em>
          \n Follow\u00a0Olga\u00a0on Twitter:\u00a0          @OlgaTsubiks.<\/a><\/b><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

          How I used HighCharts Cloud to bring transparency to my blog and double user engagement.<\/p>\n","protected":false},"author":35,"featured_media":10580,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1098,1094],"coauthors":[743],"class_list":["post-9406","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-data-connectors","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/9406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=9406"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/9406\/revisions"}],"predecessor-version":[{"id":29080,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/9406\/revisions\/29080"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/10580"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=9406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=9406"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=9406"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=9406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}