Marketing, SEO, PPC

Setting up Goals in Google Analytics for your Drupal site

"Setting goals is the first step in turning the invisible into the visible."
        - Tony Robbins

Quick - what percentage of all the visitors to your website use your Contact Us page to request more information?  On your "Download our Guide to Norwegian Cheeses" landing page, how many people give you their imformation and submit the form, and how many aren't convinced and decide to get their Norway cheese info somewhere else?  Are those numbers going up ... or going down?

You can't tell how well your page design and marketing efforts are working if you aren't measuring goals and conversions.  Fortunately for Drupal sites, with a little help from Google it's easy to do.

Let's start with your Contact Us page, and assume you are using the core Contact module.  If not, first set one up.  You will also need to set up Google Analytics and the related Drupal module if not already installed.  Once those are working, head over to Google Analytics, click on Access Google Analytics on the upper right side, select your website and All Web Site Data to get to your home Analytics page.  Look under Conversions >> Goals >> Overview to see all your configured goals ... which at the moment is likely none.

First step in setting up goals in Google Analytics

So let's set some up by clicking on the Set up goals button.  You should see this:

Click on +New Goal.  Google Analytics provides many templates for configuring your goal - choose Contact us and then Next Step.  You should then see this:

Step 2 of configuring a goal in Google Analytics

It is asking you to configure how you will consider this goal met.  The default type, and only one that makes sense for our Contact Us page is Destination, meaning that Google Analytics will consider the goal met when the user visits a certain page.  Specifically we need a thank-you page - a page that is only reached after the user submits the Contact Us form.  We can't use the URL of the Contact Us page itself - that only tells us that the user viewed that page, not that she submitted it.  After she clicks the Send Message button, she should then be shown a new page that thanks her for sending the message, and perhaps has some additional sales and marketing info on it.  But the important thing is that it is a different page, so we can track it.

Which is now a problem for us, as the Drupal core Contact module doesn't have the option to specify a redirect page that the site viewer is shown after submitting the Contact Us form.  When a user submits the form, she simply sees a standard green Drupal status message and stays on the Contact Us page, like this:

Not an especially good User Experience, and more importantly, it doesn't give us what we need to trigger the goal.  Adding that important functionality has been discussed for many years, and there is work going on now to put it into Drupal 8 ... but what do we do for all our Drupal 8 sites now?  We could use the Webform module to create our Contact Us page, which does have the redirect page option as well as many other additional features, but at the cost of highercomplexity and effort to implement.

Fortunately there is a perfect module that adds just the functionality we need - Contact Plus.  Install in your preferred manner.  Now, when we edit our sitewide contact form (Structure » Contact form >> Edit), we see a new configuration field for Redirect path.  

The default is to redirect to the front page, but that isn't useful.  Instead, create a new Basic Page that thanks the site user for submitting her info, promising them to get back to her shortly, and any other marketing messages you may want.  Set the URL to something like http://yoursitename.com/thank-you-for-contacting-us.  Put that entire URL into the Redirect path field (the module can't handle a relative path unfortunately) and save.

We now have what we need to finish configuring our goal in Google Analytics.  Go back to that browser tab, make sure Destination is selected and click Next step.

Enter just the relative path of your thank-you URL (the part after the site name) and click Create Goal. You can leave the other advanced options set to off. If you use a social tracking system that adds more characters to the end of all your website URLs (like ?JK8uejshl), then change Equals to to Begins with or your goal won't trigger.

We are done!  Well, except for viewing the results on Google Analytics, which right now there won't be any.  Run a test on your Contact Us form, wait a day or so for Google Analyics to record the event, then check back at Google Analytics, Conversions >> Goals >> Overview to see your goal completion data.  We will go into more advanced Goals and Conversions methods in a future blog post, but for now you working toward a goal.

And be sure to use the FireRoad Digital Contact Us form to see what you get after pressing Send Message!

HTTPS is now a Google Ranking Factor

You may have noticed that when you use your web browser to do online banking or shopping, and it generally switches to HTTPS / SSL mode (with the little lock graphic) for added security.  Looks like Google wants to make that the standard for everyone soon. According to the Official Google Webmaster Central Blog

"Over the past few months we’ve been running tests taking into account whether sites use secure, encrypted connections as a signal in our search ranking algorithms. We've seen positive results, so we're starting to use HTTPS as a ranking signal."

When HTTPS mode is enabled, all traffic is encrypted between your computer and the web server. Which is generally a good thing, but does add a small performance penalty for the time it takes to encrypt and decrypt all the traffic.  Often this is done on non-ecommerce Drupal websites just for the user login and user editing pages, as most content is really not that security sensitive.  But with this announcement from Google, it's time to start thinking about switching your entire site over to HTTPS.

So, how to do that in Drupal? The complete process is too complex for the scope of this blog post, and you will need to make changes on both the webserver and the Drupal sides.  On the server side, you will need to install an X.509 SSL certificate and make some configuration changes. Many web hosts will greatly help with that process, including our hosting partner, Pantheon. On the Drupal side, the easiest way to enable HTTPS mode is by using the Secure Pages module.

Screenshot of Drupal Secure Pages module configuration

The Secure Pages module will not let you engage secure mode until the server is correctly configured to use SSL.  To best comply with the Google initiative, you should select Make every page secure .. and delete all the pages listed in the Pages box, so that every page runs in HTTPS.

Ironically, that Google blog post (and the entire website) is not running in HTTPS mode.

Google And Drupal : Alt and Title Tags for Images

Generally when you see an image on a webpage, the <img> HTML tag is being used on that web page to instruct the browser which image file to display and how.  The code looks like a little something like this (from this very page):
 
<img src="http://fireroaddigital.com/sites/default/files/frd-blog-alt-title-tags.jpg" alt="Squirrel using a video camera">
 
Simple enough, but what’s that alt tag?  
 
The alt attribute is used to help search engines and assistive technology such as screen readers for the visually impaired to understand the image.  Googlebots are getting smarter and smarter, but may not yet know that image is of a 1940’s film camera being operated by a 1940’s squirrel. Or that it might be an Australian spotted flying squirrel.  Or maybe it’s a muskrat.  I’m a human and I can’t even really tell what it is.
 
Sites like Google Images use this alt data to help categorize their collections of images, and the use of alt tags across your site is known to be one of the many Google search engine ranking factors.  So, not only is the use of the alt tag required to achieve HTML conformance, it’s good for SEO.
 
So how do we enable it on our Drupal sites?  Easily, of course.  First we make sure our Drupal site is providing a place for a content editor to enter the alt text for all images and that the resulting text is included in the resulting HTML code.
 
For an example, let’s look at the default Drupal content type Article. Navigate on your admin menu to Structure >> Content types, then under Article, click on manage fields.  If you haven't changed the default Article content type, it should look like this:
 
Figure 1- Screen shot showing Article content type fields

Figure 1: Article content type

The Article content type comes with an Image field by default.  You can also add an Image field to any new content types that you create. Click on edit under Image. Scroll down about halfway until you see this.

Figure 2- Screen shot showing how to enable the Alt tag on the Drupal Article content type

Figure 2 - Enable Alt Field on Article content type

On the Article content type, the Enable Alt field checkbox should already be checked- comes that way by default.  But it won't when you add an Image field to a new content type you created. You will need to check that box.  And notice the Enable Title field checkbox?  Go ahead and check it too - we will talk about it shortly.

So then how do you enter Alt text for images?  Let's create a new Article and find out.  Navigate to Content >> Add Content >> Article.  Enter title & body content.  Scroll down to the Image section.

Figure 3 - Screen shot showing adding an Image to an Article

Figure 3 - Adding an Image to an Article

Choose a file and upload it. I've chosen a picture of four lovely donkeys standing in field.  It's also generally a good idea to name the field descriptively (and use keywords related to your content if applicable).

Figure 4 - Screen shot showing Added Image

Figure 4 - Added Image

Save the node and you are done!  The alt text will show up in your page HTML code.

A few more loose ends though:

  • what about all those little design-element images throughout your website- do they need alt text?
  • what about inline images I add to a page using the WYSIWYG editor- how do I add alt text to them?
  • what about that title attribute you said you'd talk about later?

Ahh good- you've been paying attention.  Let's start with the first one.  You probably have small graphics, lines, shadows etc. all over your website, sprucing up the design.  The W3C standards say that for images that have no semantic meaning to the viewer, you can set the alt tag to null.  ".. if the alt text is set to null (i.e. alt="") it indicates to assistive technology that the image can be safely ignored."

For inline images (like all screenshots I've included in this post) - your Drupal WYSIWYG editor should have a way to enter the alt text.  We use CKEditor on this site, which looks like this while inserting an image. Other editors work similarly.

Figure 5- Screen shot showing setting the title tag for inline images using CKEditor

Figure 5 - Setting the alt tag for inline images using CKEditor

And finally, the title tag.  It tells the browser what to display as a tooltip when the viewer hovers his cursor over the image.  It is generally more useful when the image serves as a link, either to a larger version of itself or to another webpage.  The best practice then is to put a description of what will happen when the user clicks on the image.  It is generally not thought by the community to have any search engine ranking value.  But it is a good practice to follow for good user interaction, which may indirectly lead to better conversions.

If you check the Enable title field checkbox on the Image field in the content type, it will add an additional field under alt for you to enter title text for images.  In CKEditor, the title text can be entered under Advisory Title on the Advanced tab.  

Pages