Create the ultimate Google Analytics Dashboard for Drupal – Part 2

In the first part of this series, we discussed how to install and configure the Google Analytics Reports module for Drupal and display some basic metrics. In this second part, we are going to examine how to create your own custom dashboards, using the Google Analytics Core Reporting API. The latest update of the API on September 18th, added a lot of new Metrics and Dimensions related to social and mobile and now gives us the ability to create more useful marketing reports.

So, for our example, we are going to create a Social Media Dashboard, to track social activities and see if and how they drive engaged users and qualified traffic. Here’s how the final Dashboard will look like:

To create these reports, you have to to use the 7.x-3.x-dev version of theGA Reports module, as it offers integration with Views 3. You also need toapply this patch that adds all the new "datapoints" as Views Fields.

After the module installation, you will be able to create a new view, with the option to use Google Analytics data:

In order to build the Dashboard, first you have to create different Views Content Panes and then, using Page manager to build a custom Dashboard page with Panels. To create the Views, you can use all the available GA dimensions and metrics as fields, filters and sort criteria.
The first pane, named Social Visits, displays the most important Social Networks that drive traffic to the site, sorted by the number of visits.. In order to build it, you have to use the following settings:

There are three fields: The dimension ga:socialNetwork will represent the different Social Networks as rows in the table and the metrics ga:visits and ga:visitBounceRate will represent the two columns that display visits and bounce rate.

The second pane, Social Mobile Visits, displays identical data, but only for visitors that used a mobile device. The view is similar, but this time you have to use an extra filter for the mobile users.

The next pane, Social Mobile Visits by Device, displays the specific mobile devices that the visitors from Social Networks used. Google Analytics provides again the right metrics to track this kind of data:

In our fourth report, Landing Pages for Social, tracks the major Landing Pages for Social Networks Visits, helping to understand and optimize the visitor’s flow.

The fifth report, Social Actions, tracks the social actions that visitors perform in the site. If you’re using social buttons, you have to follow the directions from Google Analytics documentation, in order to track Facebook likes or tweets in the website.

In the final report, Goal Completion by Source, we display the total number of conversions for the main social sources.

The final step is to create a Page from Page Manager (admin/structure/pages/add) and add the View Panes to the Panels Layout:

Using the same method and with a little help from the Google Analytics API Documentation and Query Explorer, you can create any dashboard for different departments or specific needs (ex. Newsletter Dashboard, SEO Dashboard etc) and you can give access only to specific users or roles.

In the next part of this series, we are going to examine how we can use the Google Charts API to produce charts and present the Google Analytics data in a more interesting and useful manner.

Create the ultimate Google Analytics Dashboard for Drupal – Part 3

This is the third and final part of this blog series. In the first part we installed and customized the Google Analytics Reports module and in the second part we created a Social Media Dashboard that displays the data in table format using Views.

The dashboard that we created in the previous part displays useful information, but the real fun starts when we create charts to visualize the data and make them easily understandable to everyone.

 

Following a similar procedure as in the previous post, you first have to create different Views panes for every specific metric and then use Page Manager to display all of them together in the dashboard.

 

Unfortunately, the Google Analytics Views module does not still support the “Chart” format, so you have to use the Views Dataviz module. After the installation, there is a new “Dataviz” format in Views, which you can use to create the charts.

 

 

The Dataviz settings are really simple, allowing you to customize the chart display:

 

 

Grouping field: If your report contains multiple dimensions, you have the ability to group your chart by one or more fields and display it in a more meaningful way.

 

Type: From this menu, you can select the type of the chart. Depending on your selection, there may be a secondary menu with more options. For example, for the line chart you can select if you want line smoothing or not and for the pie chart you can define if the text on the pie slices will be a percentage, the actual value, the label of this figure, or just nothing. Usually, it makes sense to experiment with different chart types, trying to find the optimal way to present the data. 

 

Width, Height: You can also define the exact width and height of every chart, or just leave it blank to use the default values.

 

Colors: In this field, you can select the specific colors for your chart, separated by a comma. Accepted values are hex colors (like #6495ED) and color names (like LightCoral).

 

Enable interactivity:  This checkbox defines if the charts will be interactive or not. 

 

So, by keeping the same field definition that we used in the previous postand changing the format from Table to Dataviz, you can easily transform your dashboard. For the specific reports that we built, I preferred to use the Pie Chart type for the three top ones, the column chart for the two next ones and the line chart for the last one. Of course, you can experiment with different types and decide what makes more sense for your case.

 

The final result can be seen in the following image:

 

 

Using Views to display Google Analytics data is the easiest way to do it, but sometimes it’s not that flexible. If you have specific requirements for a report, which cannot be created with Views, you can always write your custom code, using the Google Chart API module.  There are some code examples on the module's documentation page. We will examine more complex use cases with custom code, in one of our future blog posts. 

When do we refactor code?

If you are a developer it is almost certain that you had to refactor code at some point. Refactoring is no joy, especially if it is not your code and badly written.

In the bigger picture refactoring is ever-present. Just take a look at the Drupal ecosystem. You could refactor content types, display suite fields or views.

 

In this blog post I will give you an insight in how we deal with code refactoring at Amazee Labs.

 

The three code states

I like to think that the code we write can have three states:

• stable code: code that is subject to almost no changes, and at the same time permits to easily add new functionality.
• code to be refactored: this is the code that we are working on, or it is marked with @todo and a comment regarding why and what should be refactored.
• bad code: code that should be refactored, but nobody is aware of it - at least not yet... You will only notice when the client reports a bug or a feature request that cannot be implemented without changes in that portion of code.

Managing @todos

One of the though lessons learned is that when you set a @todo, unless you reserve exclusive time for code refactoring, you will not refactor that code until it is subject of a bug. Since, our first rule regarding code refactoring is actually to try to avoid it, or to make it really early in the development stage, and not let too many @todos go into production. But in the real world, this rarely happens, there always will be @todo in the code.

 

The next thing is how you report a @todo. A bad example is:

 

// @todo: This code has to be refactored.

 

This does not give a clue what the code does now or why the code should be changed. You should always point out the reason why the code needs to be refactored.

 

 

Refactoring

Then, when the time comes to actually refactor the code, the question is: How do you refactor? It depends on the code that has to be refactored, but most of the time it involves moving code into a separate function, changing the structure of a classes tree or moving the implementation from a function oriented to an object oriented approach.

Finally, you have to check if your refactored code really works. Because you refactored the code, this does not mean that you fixed the bugs. You could even have introduced new ones. So to ensure this didn't happen, the best thing is  to have automated tests that you run on your code, which is not always a trivial task to do.

 

The five conclusions

1. If possible, try to avoid having many @todos in your code, especially in the one that goes to production.
2. Always write good documentation for what you have to refactor. It would be good to specify why the code has to be refactored, the priority and optionally why you've chosen not to refactor yet. 
3. Refactor the code as soon as possible. Ideally is in the development stage.
4. Always test the new code. If you refactor it, it does not mean that that code is correct.
5. Avoid writing code you know that you will have refactore it in the future.

If you are looking for a more general blog post on code refactoring you should take a look at SourceMaking's "Introduction to Refactoring".

Create the ultimate Google Analytics Dashboard for Drupal – Part 1

As the ability to calculate digital marketing return on investment (ROI) is critical and even the C-suite cares about conversion rates, web analytics are becoming more important. All the members of an organization start to demand more information about the web site’s statistics. As it is not enough any more to just create reports about visits and pageviews, the access to different data for different persons became necessary.

Of course, we could start creating custom dashboards inside Google analytics, but then we would have to create credentials for different persons and also train them on how to use Google Analytics (GA) and how to locate important to them information.

 

Using the Google Analytics Reports module, we can begin by easily creating a dashboard with the basic metrics inside our Drupal web site. Then, by using the Google Analytics Data Export API, we can create custom reports, to inform for example the management for KPI’s of different channels, like SEO, social media or newsletter campaigns. There reports will be easily accessible by just signing in with their Drupal accounts, without the need to use an external system. 

 

The first step is to install the Google Analytics Reports module. Prerequisites are the Google Charts API module and the OAth module. Do not forget to set the module’s permissions about who has access to the reports.

 

After installing the modules, you have to authorize your site to use data from Google Analytics, from admin/config/system/google-analytics-reports. If your domain is registered with Google Apps for Business, you can enter it in the related field. The easiest way is to authenticate with your Google Analytics account, by clicking on “Start setup and authorize account”.  

 

 

In the next step, you allow access to your Google Analytics account from the website, to obtain access to the data. If you have multiple GA profiles, you choose the appropriate one. In this step you can also choose a Query cache period, as the GA quota is 50,000 requests per project per day. 

 

 

After this step, the basic dashboard is ready at: admin/reports/google-analytics. The layout and the provided information are too basic, but at least we now have a framework to start creating our ideal dashboards.

 

 

There are also two blocks named “Google Analytics page traffic” and “Google Analytics site visits” that can be enabled for specific roles.

 

 

In the next part we are going to examine how we can use the Google Analytics Data Export API, to create more useful reports and how we can customize their layout.

Drupal SEO Checklist for 2013

The SEO environment has changed significantly during the last 18 months, especially after the Panda and Penguin updates. What worked a couple of years ago, is just not relevant anymore. Before those updates, it was much easier to achieve high rankings in search engines just by building or buying links from low quality sites. Post-penguin SEO requires a more holistic approach, with focus on quality content but also requires a technical perfection.

But, Drupal is already SEO friendly; you are going to answer. Of course it is, but that does not mean that it is perfect right out of the box, but that it has the flexibility to become a SEO-perfect platform. A plain Drupal installation does not provide everything that is required so, here are the basic steps to optimize it to the last detail.

Planning

1. Begin with the Search Optimization planning, before beginning to build the site. The development of the website is the not the final destination after all, it’s just the medium for the creation and promotion of site’s content. 
2. Do your keyword research to understand what people are looking for and how you can help them to find it. Plan your site architecture, hierarchy and layout based on your findings. Use the Keyword Tools from Google or Bing. For a more advanced tool, use KeywordSpy (paid, with a free trial).

Setting up Drupal

3. Create a redirect between the www and the non-www version of your site. If you don’t, search engines will index both versions and you will have a duplicate content issue. It really does not matter which version you’re using, but stick to one. To enable it, open the .htaccess file and uncomment the related lines (lines 81-82 with the www version, lines 87-88 without the non-www version).
4. Install the SEO Checklist module. This module does not provide any functionality by itself, but it gives you a 58-points checklist for the most important actions related to the On-Site SEO. It helps to keep things organized and it also provides some automated tests for installed modules etc.
5. Enable Clean URLs. This one is more than obvious, must check it just in case.
6. Install and configure Pathauto module. The default URL for a Drupal node page is node/nid. Use this module to define URL patterns for every content type, taxonomy and user pages. Now, every time you create something new, a URL alias will be created automatically, which will be search engine friendly. For better results, try to limit the URL length to 115 characters.
7. Install and configure Global Redirect module. In the previous step, we actually created a duplicate URL for every piece of content. When search engine’s spiders visit the site, they will actually track two different pages and it’s very possible to have a duplicate content penalty. This module solves this problem by creating 301 redirects from the original to the alias URL.
8. Install and configure Redirect module. If you change the URL in a page which is already indexed in a search engine, when a user clicks on this specific result will land on a 404 error page on your site. You’ll also lose the benefit that you had from existing incoming links to this page. This module creates redirects from the old to the new alias and improves the search experience of the users.
9. Install and configure Pathologic module. It fixes images paths and URLs inside your content, so that you can move them in different domains, subdomains or folders without creating broken links.
10. Install and customize Transliteration module if you are creating a web site in a language different than English and you want to use only US-ASCII characters in your URLs.
11. Create an account in Google Analytics and install and configureGoogle Analytics module. Google Analytics does not only have information about traffic, but it can also provide useful insights about the performance of the site’s landing pages for different keywords.
12. Install XML sitemap module. Do not forget to configure the module and declare the content types and taxonomy terms that you want to be included in it the XML sitemap. 
13. Create an account in Google Webmasters Tools and submit the XML sitemap. This is a step, which is often overlooked. After the creation of the XML sitemap do not forget to submit it in GWT. Make a check a after a while that it was submitted successfully and there were no errors.
14. Create an account in Bing Webmasters Tools and submit the XML sitemap. We all tend to focus on Google, but as Bing has now a market share of 16%, it is an important player that you cannot ignore.
15. The default robots.txt of Drupal works fine in most cases, but some minor changes are usually required. In many cases you want to hide specific pages or folders of the site for search engines, by adding a new line with the “Disallow” command and the name of file or folder.
    Also, add the URL of the XML sitemap inside the robots.txt file.
    If you’re running a multi-site Drupal installation, use RobotsTxtto generate different files for every one of them.

Optimizing Pages

16. Install Meta tags module. It allows the creation of patterns for automated generation of meta tags in the <head> section of the page. You can define global settings, but also different settings for every content type, taxonomy, file type or users.
17. Configure page titles from meta tags settings.  Every URL should have a page title; it is the main definition for search engines and their users, about the page’s content.  To be compatible with the main search engines, try to limit the title’s length to 65 characters. Also, avoid duplicate page titles.
18. Configure meta descriptions from meta tags settings. Meta description is not a ranking factor, but is the text that users read in the search engine results pages.  The automated generation method uses the first paragraph from your text, so it’s not always ideal. It’s better to take a quick look before posting a node and adjust accordingly.  Avoid duplicate meta descriptions and try to limit their length to 156 characters.
19. Do not bother to use the keyword tag. Search engines stopped using it several years ago, so it’s not a ranking factor anymore. Actually, it can only help your competitors, as they can easily understand what keywords you are targeting for.
20. Use proper heading tags. Drupal usually does it right by default, as node pages ,pages created by the Page Manager or Views, are using <h1> titles. Also, secondary elements like blocks or panes are using <h2> titles. Things to watch: some themes are using <h1> to display the site name, so be sure that you do not have two <h1> tags per page. Also, when you are creating your template overrides, be sure that you are using the appropriate markup for heading tags.
21. Add the rel=”canonical” link element to declare the preferred version for search engines, among the different URLs that a Drupal page has. It can be performed through the meta tags module settings. 
22. Use the <alt> attribute for your images. Without it, search engines cannot understand the content of the image. Remember that you can have search engine visibility not only for pages, but for images as well.
    When you’re using an image field, you can enable the alt attribute, through the field settings and then add it for every new image.
23. Optimize your image file names. Using a descriptive file name helps to achieve better rankings. Also, it is the first piece of text that is displayed in Google Images results, so an appropriate file name will attract more clicks.
24. In many cases you create nodes in Drupal (like images, or tweets), with the only purpose to be included in other nodes, views or panels. To completely hide those pages from search engines, you can use the Rabbit Hole module, which creates redirects from this nodes to custom paths, so they are not visible or crawlable.
25. Pay special attention when you are creating multilingual web sites. Translating only the site’s content and header tags is not enough. Every important element like page titles, page descriptions and alt attributes should be translated as well.
26. Install and customize microdata module. Using microdata to markup you pages according to schema.org specifications, will increase the change for rich snippets to be displayed in search engine results pages and will have as a result increased visibility for your web site and clicks from the search engines. Alternatively, you can use RDFa.
27. Social signals are becoming an important ranking factor, so it’s good to add social share buttons to your pages. There are many different modules for this task, like Social Share or Share This. Even better use custom code, as described in the Google Analytics social integration guidelines.
28. You may read that Google+ is a failure or it’s dead. The truth is that even if it’s still a small network, it’s growing fast. In many cases Google+ is an important ranking factor for Google. So, creating a page in Google+ is a beneficial strategy.  Also, use rel=”publisher” to connect your website with your Google+ page. 
29. Google authorship provides several benefits related to SEO. In many cases, it adds the author’s picture in the search results, thus increasing trustworthiness and click-through rates. Also, it generates a “more from author” button, to check other posts from the same author.  So, first ask your site authors to create personal profiles in Google+ and add the site details in them.  Then, add the rel=”author” attribute, a way to do it in Drupal isdescribed here.
30. If you’re creating a news website, optimize your site for Google news. Generate a Google news site map by installing the relatedmodule Also, consider using the news keyword metatag (yes, it’s a keyword metatag!) to help Google to better understand your content. 
31. Be careful when you’re using https. Many times both the http and the https versions of your pages will be indexed as separate pages.  Search in Google for “site:yourdomain.com inurl:https”  to locate duplicate content. Use robots.txt to keep search engines from indexing https pages.
    Consider also to switch the whole site to https, as Matt Cutts from Google says in a comment that it’s OK to do it.
32. Unfortunately, Views or Panels do not have meta tags by default. Install and configure the Meta Tags Quick module, which allows the addition of the main meta tags for any path that is generated by Drupal.
33. For the pager links of paginated content like Views, use rel=“next” and rel=“prev”. An easy way to do it is described here.
34. Faceted Search is a great feature and very helpful for site visitors. If it’s not handled right though, it can cause serious problems to the site’s SEO. First of all, the generated URLs are containing a lot of parameters and are not search engine friendly. Faceted API Pretty Paths module solves this problem, as it allows the creation of URLs with an appropriate format. Also, as every filter and every sorting option creates a new URL with an extra parameter, even a small site with a few nodes can generate thousands of different URLs and gave a duplicate content issue. The correct use of canonical tags can eliminate this conflict.

Launching and beyond

35. Hide or delete your development site. Your client will not like it when it is ranked higher than the production site in search engines. 
36. On the other hand, if you put a “Disallow: /” in your robots.txt file, remember to remove it, so that search engine’s spiders can crawl your new web site.
37. Site speed is a factor in search rankings, and it also affects conversion rates.  Read carefully the Drupal caching, speed and performance guide and optimize every aspect to your web site to the maximum.
38. Use Screaming Frog to quick analyze your site and detect possible issues. Check for client and server errors, broken links, titles, headers, images and be sure that your new site is error-free.
39. Forget the traditional link-building methods. Create a content creation and promotion plan and acquire links through social media and relationship building. Do not expect to rank well just because you stuffed some nice keywords and you are using Drupal.
40. Be a part of the Search Engine Optimization Drupal group or chat on irc://irc.freenode.net/drupal-seo

SEO does not end with site launch, but it is a continuous process. Google algorithm changes about 500-600 times a year, so you have to be sure that everything is up-to-date. Make monthly audits in your website, study your analytics, check that all the new content is SEO optimized and make sure that no issues were causes by new functionality or updated modules.

The new face of Omega 4

We've been big cheerleaders for Omega as a responsive base-theme for Drupal for a while now… since around the time of DrupalCon London. And although the community has HUGELY embraced Omega… making it the second-most-installed Drupal theme after Zen, there has always been a bit of controversy surrounding Omega 3 in terms of how it approached responsive web design.

Some of those critiques included:

• Omega 3 was more "adaptive" than truly responsive (due to the definition of set breakpoints based on device widths).
• Configuring Zones and Regions was confusing and laborious.
• Omega 3 did not take a mobile-first approach.

The good news is that Omega 4 has addressed these issues of its predecessor head-on. In fact, Omega 4 looks quite a bit different than Omega 3.

If you're more of a skimmer, here's a quick overview (in list-form) of how Omega 4's changed:

• Zones & regions: GONE
• SASS out of the box
• A new (pluggable!) layout & grid system
• Optional polyfills for CSS3 & HTML5 support in older browsers

Zones & Regions

For starters, zones and regions have been totally abandoned. There have been many folks who have tried to explain how to wrap your head around how to configure these things. Remember this screen?

Well, no more. Omega 4 has gone back to the tried and true page.tpl.php file which is a) standardized for Drupal and b) better for markup control. Themer purists will undoubtedly appreciate this reversion.

Edit: For those that want the old UI we are working on it to make that an option and will allow you the same power that to control things as was in 3.x but now we're not forcing it on everyone. This is largely what's holding back the RC release but we're working quick to fix that! (See excerpt from Cellar Door's comment below.)

SASS

Omega 4 ships with SASS out of the box. This addition will be hugely important for keeping Omega a cutting-edge contender as a popular Drupal base-theme.

And for those looking to improve their SASS skills, the media queries, variables, and mixins that ship with Omega 4 are a great learning tool for novice or intermediate SASS-ers:

Just look at all that SASSY goodness!

Pluggable Layouts

In the Omega 4 theme settings, you can now choose to enable layouts. Layouts are a new feature that provide functionality much like what theDelta and the Context modules achieved together. Essentially, you can have completely unique layouts for different sections or pages of your site.

There is currently only one available layout, Epiqo, to use as a starting point, but it's chock-full of more SASS techniques.

If you'd like to employ this built-in feature in an upcoming Omega 4 project, simply copy the Epiqo layout into your sub-theme, and rename it and its contents much in the same way you would when manually creating a sub-theme. From there, you should add only layout-specific code, and nothing relating to styles (colors, typography, etc...).

Polyfills

For anyone responsible for browser testing or device testing, polyfills are becoming essential scripts to include on your site. Polyfills provide themers the ability to quickly enable CSS3 and HTML5 technologies in legacy browsers, saving hours of testing and work-arounds.

In Omega 4, there are already 5 optional scripts available to enable across your site:

While this certainly doesn't mark every improvement, these are the changes we felt most during the development of our first and second Omega 4 projects.