BlogmyQuery – BMQ

Before the very first page of a book has been read, you’ve already analyzed it in countless ways without even noticing. The paper stock, the thickness of the binding, the aroma, the color of the type and even the texture of the cover; the very character of the book is being dissected by the hand and eye at every moment.

In this brief second there is a dialogue between the reader and the object. This conversation is subtle and complex, but for most people it is entirely subconscious. This is because we rarely think about these things  —  we feel them instead.

Before this dialogue can take place however, the ideas of the author must be given shape. By examining the relationship between the form of the book and the information contained within, we can begin to understand how these visual and sensory components work, but it will also teach us how to create long-lasting emotional bonds that we’ll want to keep forever.

Lost In Translation

I recently read The Greatest Show on Earth by Richard Dawkins. His book explores the wonder of evolution and scientific discovery in fabulous detail and also goes into explicit detail as to how these ideas better our society and affect our perspective of morality and philosophy. But its uncomfortable size and shape as well as its flimsy typesetting gives the book characteristics of apathy and exhaustion.

The object reveals much about the world in which it was made: a heartless, ignorant and illiterate world, filled with people that viewed the author and the reader as a stepping stone to the top of the New York Times bestseller list.

And yet, these aesthetic and ergonomic failures are more than skin deep as they interfere with the relationship between writer and reader. Dawkins’ evidence seems less empirical, less established and somehow less wonderful, as the book miserably fails to explain the poetry of its content.

Notice how jarring and uncomfortable it is as these glossy, brightly colored pages sit next to ordinary blocks of text.

Dawkins’ argument is damaged by these cluttered, noisy and mistreated illustrative pages. Whilst he describes the wonderful and unique beauty of life, his ideas feel ordinarily ugly. The images to the left of the spread, their jarring and chaotic arrangement, the tension built by their seemingly random position, fail to reflect the ideas of wonder, beauty and order that the writer so eloquently describes.

The ideas contained within have lasted centuries, yet this book has barely lasted a single reading.

Walk into any large, commercial bookstore and you’ll see thousands of books treated in a similar way  —  each with layer upon layer of unnecessary information that conflicts with the intent of the author. Something crucial is destroyed in this journey as the object disrupts vital information on transit.

To understand why these books are not working, we must first examine how information passes from writer to reader.

The Journey

For centuries, the book was a tool that existed for a single purpose; to transfer information from one mind to another. Although much has changed, there will always be a problem with this form of communication, and in our reliance on systems to safely relay data.

In bookmaking these systems are traditionally enforced by a publisher, as they have complete control over the quality of the binding, the typographic details, the use of color and the overall physical identity of the idea. All of these visual and sensory elements combine to produce the system by which the idea is given form. However, as in the case of the majority of books out there, this system poisons and infects it.

These systems comprise of an immense number of components, such as the combination of typefaces, the paper density, the use of color, the printing method, the measure, the width of margins, and other typographic details. But the problem with these systems is that they are incapable of reflecting the ideas of the writer with the form of the book. They act as a barrier that the information must travel through to be able to find the reader.

Cheap paper, bad typesetting and an awkward binding cause confusion and disrespect to the author’s ideas. But if we understand how these elements work together we can make systems that provide useful signs to the reader, and also manage to safely transport the ideas of the writer at the same time.

Emotional Information

When a visual component accurately represents the ideas of the writer, it becomes a source of emotional information. This aids in the transferral of ideas, and promotes and persuades the reader that the content is worthy of their precious time.

It’s more than just a pretty cover, visual pun or marketing gimmick that creates emotional information. It’s everything from the size of the type to the texture of the page, because these components not only help to explain the content of the book but also continue to engage and stimulate the reader throughout.

The Vintage Classics edition of As I Lay Dying is almost lifeless, whereas Trevor Baum’s redesign provides the reader with an emotional experience as they must carry this dying woman in their hands, much like the characters in the novel.

A system can bind the ideas of the writer to the form of the book with these carefully chosen elements, but it’s when the form and the idea become inseparable that unique relationships begin to emerge.

Take for example Do You Know What It Means to Miss New Orleans? that was published by the Chin Music Press back in 2008. The book is focused primarily on the aftermath of Hurricane Katrina and the impact it had on the music, economy and spirit of the city.

The physical elements of the book act as a rhetorical device, directing the reader with subtlety and charm.

Nineteenth century engravings flourish beside carefully set blocks of text and each page has been lavishly printed on high quality paper. These components, amongst many others, combine to create a distinct sense of pace that sets itself apart from legions of other books. The idea of the book and the form of the book become one  —  they merge into an emotional cornucopia that is impossible to ignore.

The texture of the page, the subtle typographic details and the distinctive illustrations implies a specific tone and atmosphere.

This is emotional information and it coerces the reader to take notice of the subject and to read each page with as much attention and focus as those that designed and published it.

Another book that provides the reader with emotional information is the Book of war, mortification and love. The author, Ruud Linssen, investigates why people suffer voluntarily whether it be for love, war, religion or art. The blend of fiction and non-fiction, and the haunting accounts of depression and loneliness are only reinforced by the physical elements of the object.

The text also acts as a specimen for the typeface Fakir. This dark blackletter eloquently explains the subject and forewarns the reader of the book’s ghostly nature. It is even printed with the author’s own blood, the ink on the cover blends into the background as if the words are shaking with anxiety.

Texture, ink, type: three dimensions of emotional data that captures the spirit of the writer’s intent.

It’s these extra pieces of information, these tangible components of a unique sensory and visual language that must be pieced together in order to accurately reflect the author’s ideas. It is the format, the texture, and the combination of the printed word and the weight of the object that ignites this special relationship, and aids in the transfer of information between writer and reader. Ideally, these extra pieces of information provide the reader with the unspoken history, idea and argument of the book. Without them, the conversation between the book and the reader would be less interactive and engaging.

Of course, not every book can feel like Do You Know What It Means to Miss New Orleans?, or Book of war, mortification and love – but then why should they? Each book should be treated as a unique problem requiring a distinct and innovative solution.

Emotionless Systems

This is the problem with the current state of ebooks. As e-readers split content numerically or into ‘real’ turning pages they impersonate the form of the book, whilst disregarding the unique nature of the writer’s ideas. This gives us books that all feel and look the same.

The Picture of Dorian Gray by Oscar Wilde and Shit My Dad Says by Justin Halpern look and feel the same, but are different in every meaningful way.

The system disregards the writer almost entirely; all ideas have the same graphic character, tone and appearance. But just as unique and brilliant writers follow a certain pattern and rhythm within their work, so too must the visual and sensory elements of a system. This indicates to the reader that the content is one of a kind and worthy of their precious time, but these systems are also capable of creating emotional experiences that can entertain, persuade, teach and inspire.

So the problems on screen are very similar to that of the problems on paper: the system is acting as a barrier into the author’s ideas.

Why Should We Design Emotional Systems?

In a perfect world we would share ideas through a semipermeable membrane; we would absorb ideas via osmosis and send them around the world as casually as we breathe. Sadly, we cannot do this. Instead, we have systems set in place to communicate. The problem is that these systems are failing us. They are hurting us. They are making beautiful things boring and are getting in between us and the ideas that we need.

This is not about nostalgia or the glorification of a particular medium. This is about information, and how best to communicate the content as a visual and sensory device. These systems have an obligation to not only safely and quickly transfer data, but also to make us care.

Of course, this is subjective and very little of this article goes into the specifics as to how to create emotional experiences, but this is because each idea requires a different visual and sensory tone. Some books require explosive typography and thick paper to feel revolutionary, others require a softer and more delicate tone to feel calm or charming.

The form of the book is merely a tool, a sometimes wonderfully beautiful and effective tool, but a tool nonetheless. It is the ideas within that give us wonder, and these tools must be built for their purpose if they are not to be thrown away, lost or forgotten.

We can embed within these systems a lasting piece of our culture if only we are willing to change the way we think. So instead of us asking the question, “How do these things look?� perhaps we should rather be asking, “How do these things feel?�

Further Reading

• The Crystal Goblet
  The classic essay by Beatrice Warde on the art of printing, still applicable to book and Web design today.
• Designing for Emotion
  The lead UX designer at MailChimp, Aaron Walter, discusses how emotion can be used in interfaces.
• On Book Design
  Richard Hendel examines how and why books are designed in the way that they are.

(il)

© Robin Rendle for Smashing Magazine, 2012.

When conducting user research, we all know that asking the right questions is just as important as how you ask them, but how do you know exactly what questions to ask? What if the discussion topic is very personal? How do you get a complete stranger to open up? There is a better way to conduct an in-depth interview, and it doesn’t involve a clipboard. Just imagine what you could discover if the participant’s answers weren’t limited to a predetermined set of questions. This is where collaging can help.

Collaging is a projective technique by which participants select images that represent how they feel about a particular topic. The participants then explain to the moderator the reason they chose each image. The collage becomes an instrument through which participants are able to express needs and feelings that they might not otherwise have been able to articulate. This information enables us to better understand the user’s world and how to design for it.

A Picture Is Worth A Thousand Words

So, you might be asking yourself, “Why should I have people make collages, rather than just ask them point-blank questions about their needs and feelings?� It’s a great question, and the answer is, sometimes the most valuable answer is not in response to a direct question, but one that’s elicited. An image can be a powerful stimulus that evokes a strong response, triggers a memory and draws out feelings that exist below a person’s own level of awareness.

Gerald Zaltman, author of How Customers Think, states that “95% of our thoughts and feelings are unconscious.� There is just so much that we carry around in thought but never share until something triggers it. When we ask a participant a set of pre-defined questions, we are predetermining the scope of the interview. Instead, by presenting a visual stimulus, we are letting the participant start the conversation and bring up topics that are meaningful to them.

There are also times when you don’t know the right question to ask. Sometimes you do, but you don’t know how to ask it. Depending on what you’re researching, participants might have difficulty opening up to you. The research topic might be too personal, controversial or sensitive for the participant to just open up and start discussing with a complete stranger. The collage becomes a catalyst for discussion, an ice-breaker.

What You Can Learn

Collaging is a method of building empathy with your users. You gain an emotional understanding of the user’s feelings, problems, state of mind and so on, which is imperative to know when designing for them. Collaging can also help you better understand the user’s needs, in turn helping you to address them in your product.

The wonderful thing about this method is that participants might reveal stories that prompt a line of questioning about a topic that you never expected to explore (as we’ll see in the examples below). You honestly don’t know what you will learn from each participant’s collage.

A Brief History Of Projective Techniques

Collaging is not new. The method has been well used to conduct qualitative marketing research for at least 40 years. Its use in marketing has mainly been to assess feelings towards brands and products. Other projective techniques — tests such as the Rorschach, word and sentence completion, draw-a-person, and thematic apperception — date back to the early 19th century. All of these methods are rooted in psychology, but their application has expanded to other fields such as advertising, management, sociology, anthropology and, more recently, user experience (UX), to name a few. Collaging as a user research method has yet to be widely adopted in our industry, but I’ve seen a steady increase in its use and popularity over the past few years.

Conducting A Collaging Exercise

Listed below are all the steps necessary to conduct your own collaging study. Let’s walk through them together.

1. Choose Your Topic of Interest

The collaging exercise should focus on a specific topic. You will be asking participants to choose pictures that reflect how they feel about this topic. For example, if I were redesigning a website, I might ask the participant,

“Select pictures that reflect how you would and would not want the new website to greet you.�

You could word this in a lot of different ways, such as,

“Create a story about how you would want the website to communicate with you. What qualities should it have? What qualities should it not have?�

Or, to learn more about a participant’s day-to-day struggle with a problem, you could simply say,

“Select pictures that reflect your experience with using [x].�

2. Create a Collage Board and Get Pictures

You will need a board or a large piece of paper to which the participant can tape their pictures. It doesn’t need to be fancy. In the past, I have just used 11 × 17-inch ledger paper. If I were asking the participant to create two separate collages, I would divide the paper by drawing a line down the middle. I’ve seen other people put a target on a collage board and ask participants to stick pictures on the board according to how closely they “hit homeâ€� for them. Feel free to be creative here, and find what works best for you.

Example of a completed collage.

Participants will need to be able to choose from a pool of about 150 to 200 pictures. The pool of pictures must be a mixture of random pictures. They should not have a running theme (i.e. no pictures of just animals or people or medical scenes or nature, etc). The pool should be a good mixture of all sorts of pictures. You can use stock photography or even pictures clipped from magazines. Here are some online sources of free images:

• Flickr Creative Commons,
• morgueFile,
• FreePhotosBank,
• FreeMediaGoo.com,
• FreeDigitalPhotos.net.

Print the pictures small enough (approximately 3 × 3 inches) for participants to have plenty of room to put as many as they want in their collage. You’ll also want multiple copies of pictures to replace the ones used by participants. In the past, I’ve printed pictures on stickers, which worked well but was a little more expensive.

3. Moderate the Study

1. Set up the room.
   Lay out all of the pictures on a big long table. Make sure they do not overlap so that the participant can see them all. Put the collage board, some tape and a pen on another table.
2. Give the topic and instructions.
   Instruct the participant to pick out at least four or five pictures that reflect how they feel about the given topic. Then ask them to tape those pictures to the collage board, and add a caption to each one explaining why they chose it.
3. Leave the room.
   I prefer to leave the room for five to ten minutes to give the participant time to peruse the pictures without feeling any pressure. When I reenter the room, I tell them to take as long as they need and to let me know when they have completed the collage.
4. Discuss the collage.
   The collage is finished. Now comes the fun part! Have the participant explain to you why they chose each picture. This is your opportunity to learn as much as you can about how the participant feels about the topic. Let the collage and the participant guide the interview. Be sure to follow up with questions and to probe deeper when needed and appropriate. Keep in mind that the experience can be very personal and revealing for some participants, depending on the sensitivity of the topic. The collage might make it easy for a participant to open a door that they don’t necessarily want to walk through. Be mindful of the participant’s comfort level when probing deeper into something personal.

4. Conduct Analysis

When conducting your analysis, keep in mind that what’s really important is not the pictures they chose, but why they chose them. The analysis and report should focus on what the collage reveals about the participant, not the collage itself. It would be interesting if multiple participants chose the same pictures, but even more interesting if they chose them for the same reasons.

When to Conduct a Collaging Exercise

Consider collaging during the early stages of product development, when user requirements are being gathered. The method is also helpful at any time in the product’s development if you feel the design team is having trouble understanding and identifying with the users. Sometimes designers need to step back and remember exactly who they are designing for.

As mentioned, this method can be most useful if the topic is sensitive, but it’s great for impassive topics, too. Collaging can be used if you just need a fun activity to put the participant at ease and break the ice before a formal interview. For example, I have conducted collaging exercises with cancer patients, with people dealing with chronic pain and even with women about their menstrual cycles and feelings about birth control. On the other hand, I’ve conducted collages to learn more about people’s daily commutes and how they feel about public transportation — much lighter topics.

Collage Examples

The examples below are from collage exercises that I’ve moderated. Each one shows how a picture can change the line of questioning in an interview. The topics, which were discussed because of these images, might never have been brought up in a traditional interview.

Picture from a collage done for research on people suffering from chronic pain.

The participant wrote the caption, “That’s my daughter consoling me when I’m in pain.� When discussing this picture, I was able to probe deeper into how the participant’s pain affects their family and how they deal with it. We were then able to discuss what role family plays in how they manage their pain.

Picture from a collage done for research on how people feel about their commute.

The participant wrote the caption, “Wish my commute was this enjoyable.� I was able to follow up with questions about what their ideal commute to work would be like and what they wished they could change about their current commute.

Picture from a collage done for research on cancer patients.

The participant wrote the caption, “Vomiting!� This led to a line of questioning about the side effects of the participant’s cancer treatments and their coping mechanisms.

Pitfalls To Avoid

Sometimes a stimulus can be too strong and can disrupt a participant’s train of thought and be a distraction. The example below resulted from two participants choosing the same image for the same study:

The participants wrote the captions “Disgusting� and “Gross.� Their captions and their reasons for choosing the image were similar, but in no way did they relate to the topic of interest, which was pain management. The participants couldn’t explain how the image related to what they felt about the topic, but they still chose it because they were drawn to it and it provoked a strong emotion. In this case, we decided to remove the image from the pool because it was obviously a distraction. When conducting a collaging exercise, remove any pictures that you find derail the participants.

Conclusion

Collaging is a great method for learning more about your end users. Depending on when the collaging study is conducted during the product’s development cycle, your findings could do any or all of the following:

• Aid in persona development,
• Be used in early ideation for creating new products,
• Reveal how people feel about the experience of using an existing product,
• Help to define new requirements or enhancements for features.

The method might not be right for every user research initiative, but try it if you feel something is lacking from your traditional interviews. You will be amazed at what you can learn when you throw away the clipboard and let participants direct the interview.

Resources

• How Customers Think: Essential Insights Into the Mind of the Market, Gerald Zaltman
• Customer Intimacy: Pick Your Partners, Shape Your Culture, Win Together, Fred Wiersema

(al) (il)

© Kyle Soucy for Smashing Magazine, 2012.

Custom post types add a level of flexibility to WordPress that makes this open-source Web development platform more useful on many levels. Whenever I have been faced with a Web-based task, especially one that involves organizing information, the first thing I do is examine WordPress to determine if it can handle the job. It usually can.

Image Source

As an Internet marketer and analyst, I need to be able to organize online marketing campaigns in a way that is trackable in Google Analytics. This is the perfect task for WordPress custom post types.

In this article, we’ll explain how to create a WordPress plugin that enables you to organize Internet marketing campaigns using trackable URLs, shortened versions of those URLs, and trackable QR codes that you can also use for offline marketing activities.

We’ll show you how to create this plugin in a way that maximizes ease of use and functionality. If you have other methods that you have found useful, please share them in the comments. Also, let’s remember that we are standing on the shoulders of WordPress developers who have laid the foundation for easier coding.

Here are the criteria for our custom post type plugin:

• It must provide a form in which users can specify a landing page to be tracked, the anchor text or content, the term (if this link is a PPC ad), and any additional information about this link.
• It must provide three custom taxonomy types, so that users can select the URL variables for source, medium and campaign name. This is a taxonomy type because they will be reusable across campaigns and posts.
• It must be organizable in the admin area and be displayed in the user interface.
• The output must include a Google Analytics campaign-trackable URL, the information about the URL in human-readable format, a shortened version of the URL using a URL shortener, and a QR code of the shortened URL.

The File Structure

This plugin will use three files. To set up the structure, create a plugin folder named campaign-tracker. Inside the campaign-tracker folder, create the following three PHP files:

• campaign-tracker.php
• ga-functions.php
• campaign-template.php

After you have created the files, we are ready to start adding the code.

The Plugin File

The main plugin file will be campaign-tracker.php. The content of this file will begin the standard way, by providing WordPress with the information that it needs to recognize it is as plugin. We then dive into setting up the CampaignTracker10 class and functions. We will set up our campaign custom post type and register the taxonomies that we will need. We will also initiate our admin interface.

   <?php
   /*
   Plugin Name: Campaign Tracking 1.0
   Plugin URI: http://www.convergeconsulting.org
   Description: Google Analytics Campaign Tracking system for WordPress 3.0 and above.
   Author: Joshua Dodson
   Version: 1.0
   Author URI: http://www.convergeconsulting.org
   */

   // Include the ga-functions.php helper functions
   include_once('ga-functions.php');

   if(!class_exists('CampaignTracker10'))
   {

      class CampaignTracker10 {

         var $meta_fields = array("gaca10-gaurl","gaca10-gaterm","gaca10-gacontent","gaca10-gadescription");

         // This function will create the custom post type. Thanks to Konstantin Kovshenin's example for additional examples of how to construct custom post types (http://kovshenin.com/2010/03/custom-post-types-in-wordpress-3-0-2089/), which inspired much of this.
         function __construct(){
            // Register custom post types
            register_post_type('campaign', array(
            'label' => _x('Campaigns','campaigns label'), // We're labeling the custom posts as Campaigns and also accounting for gettext appropriately
            'singular_label' => _x('Campaign','campaign singular label'), // Each post will be called a Campaign
            'public' => true, // These will be public
            'show_ui' => true, // Show the UI in admin panel
            '_builtin' => false, // This is a custom post type, not a built in post type
            '_edit_link' => 'post.php?post=%d',
            'capability_type' => 'post',
            'hierarchical' => false,
            'rewrite' => array("slug" => "campaign"), // This is for the permalinks
            'query_var' => "campaign", // This goes to the WP_Query schema
            'supports' => array('title'/* We only need the default title field, but we could use others such as 'author', 'excerpt', 'editor' ,'custom-fields'*/)
            ));

            add_filter("manage_edit-campaign_columns", array(&$this, "edit_columns"));
            add_action("manage_posts_custom_column", array(&$this, "custom_columns"));

            // Register custom taxonomies gasource (for the Campaign Source), gamedium (for the Campaign Medium), and ganame (for Campaign Name)
            // Campaign Source
            register_taxonomy("gasource", array("campaign"), array("hierarchical" => true, "label" => _x( 'Campaign Sources', 'campaign sources taxonomy label' ), "singular_label" => "Campaign Source", "rewrite" => true));
            // Campaign Medium
            register_taxonomy("gamedium", array("campaign"), array("hierarchical" => true, "label" => _x( 'Campaign Mediums', 'campaign mediums taxonomy label' ), "singular_label" => "Campaign Medium", "rewrite" => true));
            // Campaign Name
            register_taxonomy("ganame", array("campaign"), array("hierarchical" => true, "label" => _x( 'Campaign Names', 'campaign names taxonomy label' ), "singular_label" => "Campaign Name", "rewrite" => true));

            add_action("admin_init", array(&$this, "admin_init"));
            add_action("template_redirect", array(&$this, 'template_redirect'));

            add_action("wp_insert_post", array(&$this, "wp_insert_post"), 10, 2);

         }

Let’s give the columns on the admin screen some headings:

   function edit_columns($columns)
   {
      $columns = array(
      'cb' => '<input type="checkbox" />',
      'title' => _x('Campaign Title','campaign title label for edit columns'),
      'gaca10_ganame' => _x('Campaign Name','campaign name label for edit columns'),
      'gaca10_gasources' => _x('Campaign Source','campaign source label for edit columns'),
      'gaca10_gasmedium' => _x('Campaign Medium','campaign medium label for edit columns'),
      );
      return $columns;
   }

Let’s specify which columns we would like to show up on the admin screen for this custom post type. We’ll have columns for campaign source, medium and name, in addition to the post’s title.

   function custom_columns($column)
   {
      global $post;
      switch ($column)
      {
         // The campaign source
         case "gaca10_gasources":
         $gasources = get_the_terms(0, "gasource");
         if ( $gasources && ! is_wp_error( $gasources ) ) :
         $gasources_html = array();
         foreach ($gasources as $gasource)
         array_push($gasources_html, '<a href="' . get_term_link($gasource->slug, "gasource") . '">' . $gasource->name . '</a>');

         echo implode($gasources_html, ", ");
         endif;
         break;

         // The campaign medium
         case "gaca10_gasmedium":
         $gamediums = get_the_terms(0, "gamedium");
         if ( $gamediums && ! is_wp_error( $gamediums ) ) :
         $gamediums_html = array();
         foreach ($gamediums as $gamedium)
         array_push($gamediums_html, '<a href="' . get_term_link($gamedium->slug, "gamedium") . '">' . $gamedium->name . '</a>');

         echo implode($gamediums_html, ", ");
         endif;
         break;

         // The campaign name
         case "gaca10_ganame":
         $ganames = get_the_terms(0, "ganame");
         if ( $ganames && ! is_wp_error( $ganames ) ) :
         $ganames_html = array();
         foreach ($ganames as $ganame)
         array_push($ganames_html, '<a href="' . get_term_link($ganame->slug, "ganame") . '">' . $ganame->name . '</a>');

         echo implode($ganames_html, ", ");
         endif;
         break;
      }
   }

Once our columns are set up appropriately, we should see the following columns (note that this example is with one campaign already added):

The next section enables us to specify which template we would like to use to display this custom post type. We will be using the campaign-template.php template:

   function template_redirect()
   {
      global $wp;

      // If the post type is set and is campaign…
      if (isset($wp->query_vars["post_type"])) {
         if ($wp->query_vars["post_type"] == "campaign")
         {
            // Then use the campaign-template.php file from this plugin directory
            include WP_PLUGIN_DIR.'/campaign-tracker/campaign-template.php';
            die();
         }
      }
   }

If a post is inserted or updated, then loop through the array and update or add the post’s meta data.

   function wp_insert_post($post_id, $post = null)
   {
      if ($post->post_type == "campaign")
      {
         foreach ($this->meta_fields as $key)
         {
            $value = $_POST[$key];
            if (empty($value))
            {
               delete_post_meta($post_id, $key);
               continue;
            }

            if (!is_array($value))
            {
               if (!update_post_meta($post_id, $key, $value))
               {
                  add_post_meta($post_id, $key, $value);
               }
            }
            else
            {
               delete_post_meta($post_id, $key);

               foreach ($value as $entry){
                  add_post_meta($post_id, $key, $entry);
               }
            }
         }
      }
   }

With the following function, we can add custom meta boxes for the admin screen where we edit the campaign:

   function admin_init()
   {
      // Add custom meta boxes for the edit campaign screen
      add_meta_box("gaca10-meta", "Campaign Information", array(&$this, "meta_options"), "campaign", "normal", "core");
   }

The following function is for the admin post meta contents. This lets us create the form in which we specify some of the variables for our trackable URL (except for the taxonomies). It also provides a read-only field that shows the shortened URL after the URL variables have been saved.

   function meta_options()
   {
      global $post;
      $custom = get_post_custom($post->ID);
      if($custom["gaca10-gaurl"][0]){
         $gaurl = $custom["gaca10-gaurl"][0];
      }
      else{ $gaurl = ''; }
      if($custom["gaca10-gaterm"][0]) {
         $gaterm = $custom["gaca10-gaterm"][0];
      }
      else { $gaterm = ''; }
      if ($custom["gaca10-gacontent"][0]) {
         $gacontent = $custom["gaca10-gacontent"][0];
      }
      else { $gacontent = ''; }
      if ($custom["gaca10-gadescription"][0]) {
         $gadescription = $custom["gaca10-gadescription"][0];
      }
      else { $gadescription = ''; }

      $url = trackable_url();
      if ($custom["campaign_tinyurl"][0]) {
         if($gaurl == '') { $shortenedurl = ''; }
         else{ $shortenedurl = create_tiny_url($url); }
      }

      ?>
      <label><?php _ex('Website URL:','website url label'); ?></label><input name="gaca10-gaurl" value="<?php echo $gaurl; ?>" /><br />
      <em><?php _ex('(e.g., http://www.google.com)','website url example'); ?></em><br /><br />

      <label><?php _ex('Campaign Term:','campaign term label'); ?></label><input name="gaca10-gaterm" value="<?php echo $gaterm; ?>" /><br />
      <em><?php _ex('(identify the paid keywords)','campaign term information'); ?></em><br /><br />
      <label><?php _ex('Campaign Content:','campaign content label'); ?></label><input name="gaca10-gacontent" value="<?php echo $gacontent; ?>" /><br />
      <em><?php _ex('(use to differentiate ads)','campaign content information'); ?></em><br /><br />

      <label><?php _ex('Campaign Description:','campaign description label'); ?></label><input name="gaca10-gadescription" value="<?php echo $gadescription; ?>" /><br />
      <em><?php _ex('(use to remind yourself about this specific link)','campaign description information'); ?></em><br /><br />

      <label><?php _ex('Shortened URL:','shortened URL label'); ?></label><input name="gaca10-gashortened-url" value="<?php echo $shortenedurl; ?>" readonly="readonly" /><br />

      <?php
   }
}

}

Here is how the “Add/Edit Campaign� screen will appear:

If CampaignTracker10 exists, then we initiate the plugin:

   if(class_exists('CampaignTracker10')){

      // Initiate the plugin
      add_action("init", "CampaignTracker10Init");

      function CampaignTracker10Init() {
         global $gaca10;
         $gaca10 = new CampaignTracker10();

      }
   }

Combine these functions into the campaign-tracker.php file.

The following taxonomy examples should also be on the “Add/Edit Campaign� screen after everything has been added. Here is the “Campaign Names� taxonomy:

Here is the “Campaign Mediums� taxonomy:

Here is the “Campaign Sources� taxonomy:

Similar to how traditional post categories are set up, you can create new categories or select previous categories.

A note on usage: When you begin to use the system, try to select only one category each from name, source and medium. One category per taxonomy type will prove to be most useful in your actual analysis in Google Analytics. So, as a general rule: one name, one source and one medium per URL.

The Helpful Display Functions

Each of the functions in this section is part of the ga-functions.php file. The functions have been separated from the other functions in order to keep the display functions together.

Our file will begin with the formatted_utm_taxonomy_terms function, which will display a URL-friendly version of the taxonomy terms:

   <?php
   /* Some Helpful Display Functions */

   function formatted_utm_taxonomy_terms($the_term) {
      global $post;
      $post_terms = get_the_terms( $post->ID, $the_term );
      if ( $post_terms && ! is_wp_error( $post_terms ) ) :
      $encoded_terms = array();
      foreach ($post_terms as $term ) {
         if(!$encoded_terms[] = $term->slug){
            $encoded_terms[] = urlencode($term->name);
         }
      }
      $return_terms = implode('+',$encoded_terms);
      return $return_terms;
      endif;
   }

The trackable_url function generates the trackable URL from the fields on the admin screen as well as the taxonomies. This appends the appropriate tracking criteria to the URL so that Google Analytics can use the variables and provide information based on these specific variables. To do this, we will use the add_query_arg WordPress function.

   function trackable_url() {
      global $post;
      $custom = get_post_custom($post->ID);

      // the url
      if ($custom["gaca10-gaurl"][0]) {
         $gaurl = $custom["gaca10-gaurl"][0];
      }
      else { $gaurl = ''; }

      // the term(s)
      if ($gaterm = $custom["gaca10-gaterm"][0]) {
         $gaterm = $custom["gaca10-gaterm"][0];
         $gaterm = urlencode($gaterm);
      }
      else { $gaterm = ''; }

      // the content(s)
      if ($custom["gaca10-gacontent"][0]) {
         $gacontent = $custom["gaca10-gacontent"][0];
         $gacontent = urlencode($gacontent);
      }
      else { $gacontent = ''; }
      $arr_params = array ( 'utm_campaign' => formatted_utm_taxonomy_terms('ganame'), 'utm_source' => formatted_utm_taxonomy_terms('gasource'), 'utm_medium' => formatted_utm_taxonomy_terms('gamedium'), 'utm_term' => $gaterm, 'utm_content' => $gacontent);
      return add_query_arg( $arr_params, $gaurl );

   }

The following functions take the campaign-trackable URL and shortens it with TinyURL. This method uses wp_remote_get to generate the shortened URL. It then saves the shortened URL to the post’s meta data when a post is saved. The trackable_url_tiny function enables us to retrieve the shortened URL in the template.

   // Save the shortened trackable URL to the post meta
   function save_shortened_meta($post_ID) {
      $url = trackable_url();
      $shortened_url = create_tiny_url($url);
      update_post_meta($post_ID, "campaign_tinyurl", $shortened_url);
      return $post_ID;
   }

   // Add an action to save it when the post is saved.
   add_action('save_post', 'save_shortened_meta');

   // Retrieve the shortened URL from post meta
   function trackable_url_tiny($url = null, $post_ID) {
      global $post;
      $custom_fields = get_post_custom($post->ID);
      $campaign_tinyurl = $custom_fields['campaign_tinyurl'][0];
      return $campaign_tinyurl;

      return $post_ID;
   }

   // Create shortened trackable URL through the wp_remote_get function
   function create_tiny_url($strURL) {
      $tinyurl = wp_remote_get( 'http://tinyurl.com/api-create.php?url='.$strURL );
      if( is_wp_error( $response ) ) {
         return 'Something went wrong!';
      } else {
         return $tinyurl['body'];

      }
   }

The trackable_url_report function is what provides the human-readable version of the variables. These are broken out by each section. The landing page, campaign name, source, medium, terms and content are all separated and displayed individually if they exist.

   function trackable_url_report() {
      global $post;
      $custom = get_post_custom($post->ID);

      // get the url
      if ($custom["gaca10-gaurl"][0]) {
         $gaurl = $custom["gaca10-gaurl"][0];
      }
      else { $gaurl = ''; }
      // get the term(s)
      if ($gaterm = $custom["gaca10-gaterm"][0]) {
         $gaterm = $custom["gaca10-gaterm"][0];
      }
      else { $gaterm = ''; }

      // get the content(s)
      if ($custom["gaca10-gacontent"][0]) {
         $gacontent = $custom["gaca10-gacontent"][0];
      }
      else { $gacontent = ''; }

      // The Landing page
      $url_info ='';
      $url_info.= "<strong>". _x( 'Landing Page:','landing page label') . "</strong> ";
      $url_info.= $gaurl;
      $url_info.= "<br />";

      // The campaign name
      $url_info.= "<strong>". _x( 'Campaign:','campaign label') . "</strong> ";
      $url_info.= formatted_utm_taxonomy_terms('ganame');
      $url_info.= "<br />";

      // The Source
      $url_info.= "<strong>". _x( 'Source:','source label') . "</strong> ";
      $url_info.= formatted_utm_taxonomy_terms('gasource');
      $url_info.= "<br />";

      // The medium
      $url_info.= "<strong>". _x( 'Medium:','medium label') . "</strong> ";
      $url_info.= formatted_utm_taxonomy_terms('gamedium');
      $url_info.= "<br />";

      // The term
      $url_info.= "<strong>". _x( 'Term:','term label') . "</strong> ";
      $url_info.= $gaterm;
      $url_info.= "<br />";

      // The content
      $url_info.= "<strong>". _x( 'Content:','content label') . "</strong> ";
      $url_info.= $gacontent;
      $url_info.= "<br />";

      return $url_info;
   }

The display_description function displays the description of the URL. We’ve broken this part out here in order to keep all of the pieces that are specific to the URL together. This is also the last function in the ga-functions.php file.

   function display_description(){
      global $post;
      $custom = get_post_custom($post->ID);
      $description = $custom["gaca10-gadescription"][0];
      return $description;
   }

   ?>

Combine these functions into the ga-functions.php file, and then we can move onto creating the template file.

The Template File

The final file that we will use to generate the view of the trackable URL is campaign-template.php. You will remember from the campaign-tracker.php file that we have a call in the template_redirect() function to redirect users to this template when viewing the custom post type of campaigns.

For display purposes, we will use the single.php file from the current default WordPress theme, TwentyEleven. You can, of course, use another theme and different styles.

First, we include the ga-functions.php file so that we can use some of our display functions. The campaign template also uses the Google Charts API to generate the QR code.

The following code will do all of the heavy lifting to display our campaign-trackable URL, the information about the URL, the shortened URL and the QR code. It will also allow us to edit the post if we need to change a variable. Simply drop this code into the loop.

   <h1 class="entry-title"><?php the_title() ?></h1><br />

   <?php
   echo "<strong>". _x( 'Description:','description label') . "</strong> ";
   echo display_description();
   echo "<br />";
   echo trackable_url_report();
   echo "<br />";
   echo "<strong>". _x('Trackable URL:','trackable URL label') . "</strong> ";
   echo "<a href=".trackable_url()." target='_blank'>".trackable_url()."</a><br />";

   echo "<strong>" . _x('Shortened Trackable URL:','shortened trackable URL label') . "</strong> ";
   echo "<a href=".trackable_url_tiny()." target='_blank'>".trackable_url_tiny()."</a><br />";
   ?>

   <br />
   <img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=<?php trackable_url_tiny(); ?>" /><br />
   <?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>

When we combine the code, the campaign template will be as follows:

   <?php
   /**
   * The Template for displaying all single posts.
   *
   * @package WordPress
   * @subpackage Twenty_Eleven
   * @since Twenty Eleven 1.0
   */

   // Include the ga-functions.php file so that we can easily display the results
   include_once('ga-functions.php');

   get_header(); ?>

   <div id="primary">
   <div id="content" role="main">

   <?php while ( have_posts() ) : the_post(); ?>

   <nav id="nav-single">
   <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
   <span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">&larr;</span> Previous', 'twentyeleven' ) ); ?></span>
   <span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?></span>
   </nav><!-- #nav-single -->

   <h1 class="entry-title"><?php the_title() ?></h1><br />

   <?php
   echo "<strong>". _x( 'Description:','description label') . "</strong> ";
   echo display_description();
   echo "<br />";
   echo trackable_url_report();
   echo "<br />";
   echo "<strong>". _x('Trackable URL:','trackable URL label') . "</strong> ";
   echo "<a href=".trackable_url()." target='_blank'>".trackable_url()."</a><br />";

   echo "<strong>" . _x('Shortened Trackable URL:','shortened trackable URL label') . "</strong> ";
   echo "<a href=".trackable_url_tiny()." target='_blank'>".trackable_url_tiny()."</a><br />";
   ?>

   <br />
   <img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=<?php trackable_url_tiny(); ?>" /><br />
   <?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>

   <?php comments_template( '', true ); ?>

   <?php endwhile; // end of the loop. ?>

   </div><!-- #content -->
   </div><!-- #primary -->

   <?php get_footer(); ?>

When the template is set up and a campaign has been added, then it should display the following page:

In Conclusion

By using WordPress custom post types in the method described, it is possible to organize marketing campaigns with the relevant Google Analytics campaign-tracking URL, shortened URL and QR code. This makes organizing marketing campaigns much simpler and more effective.

Custom post types make it very easy to set up a system by which to organize content. And we can get creative in how we use custom post types. They can be very useful when organizing content outside of the normal structure of WordPress and other content management systems (i.e. posts, pages, etc.).

Other possible uses of custom post types include the following:

• Manage client contacts,
• Create an employee directory,
• Keep an inventory of items,
• Organize other data.

Resources

You may be interested in the following resources and articles:

• “Custom Post Types in WordPress 3.0,â€� Konstantin Kovshenin
• “Custom Post Types in WordPress,â€� Justin Tadlock
• “Creating a TinyURL With TinyURL’s API,â€� Richard Castera
• “Getting Started With Infographicsâ€� (QR Codes with the Google Charts API), Google Code
• “Post Types,â€� WordPress Codex
• URL Builder tool Google Analytics
• “IQ Lessons,â€� Google Analytics

(al)

© Joshua Dodson for Smashing Magazine, 2012.

I recently ran into a problem that was really hard to figure out. I was working on a responsive design where I used img {max-width:100%;} to make sure that images would be downsized rather than overflow in narrower viewports.

It worked great everywhere… until I went to check in IE8. The site’s logo was gone! None of the usual IE bug fixes cured the problem, and it took me quite a while to realise that max-width was part of the problem.

Read full post

Posted in Browsers, CSS.

Copyright © Roger Johansson

Every now and then, we release useful freebies for all of our highly valued readers. Today, it is our pleasure to present to you Cuberto‘s fantastic St. Valentine’s icon set  —  exclusively designed for Smashing Magazine and its loyal readers. The icons presented are available in transparent PNGs as well as Photoshop PSDs (128×128 px) and are perfect for any projects you have coming up for St. Valentine’s Day. Enjoy!

Download the Set for free!

This icon set is completely free to use for commercial or personal applications without any restrictions. Please link to this article if you want to spread the word.

• large preview
• download the .zip-package (.zip, 2 Mb)

Initial sketches of Cuberto’s St. Valentine’s icon set.

Quick preview of the icons in the set.

Behind the Design

As always, here are some insights from the designers:

“Our goal was not only to create nice icons but also a functional set that can be used in navigation elements as well as gifts throughout social networks on the upcoming sweet Valentine’s day. Please link to this article if you want to spread the word.”
 —  Peace and Love

Thanks Cuberto, we sincerely appreciate your time and your intentions!

(il)

© Smashing Editorial Team for Smashing Magazine, 2012.