In the past few months, I’ve grabbed a hold of my client’s Email Marketing program (well, only half a hold*) and have begun to master it. One change was to move from using established templates offered by the email provider to using custom templates that I created.
While we lost the ability for my client to edit the emails (darn, I’m heartbroken), I did gain the ability to create a branded look & feel. I also obtain a better understanding of tracking between email (HTML) and web sites, which I’d like to share with you here. Note that I’m at the beginning stages, and there may be several inaccuracies or inefficiencies. So send me a comment if things could be done better.
Creating the HTML email
I use Dreamweaver to create the email, as a copy will be online as a view option (best practice). Once I finish creating the email and tagging it up with the various tracking tags, I then copy/paste the styles and HTML code into ConstantContact.
Getting a handle on creating HTML emails that view as well as possible across various email clients and systems was a culture shock. Back are the days of using tables for layout, spacers gifs (I refuse), and font tags (actually, I use styles, ConstantContact creates font tag equivalents, using both font tags and styles), etc.
The key to the layout is to create a container table, then stack nest all tables within this container. You should keep in mind that multiple nested tables will cause problems in some email clients.
Adding the Google Analytics Attributes
With out layout, text and images in place, we now focus on tagging the hyperlinks.
First, we want to add the Google Analytics attributes to our URLs that point to our website. Google offers a tool that simplifies this process.
Simply enter the URL, followed by required parameters:
- Campaign Source: The overall name of the item/campaign/email that your tagging.
- Campaign Medium: Email
- Campaign Content: A name of the element you’re tagging. Note that if you have multiple links for the same thing, you want to decern in your naming at this time. Example, say this is travel related with with an itinerary name, image and a “view details” link. Each one should have an individual name here. This will help you understand what motivates your subscribers to click through.
- Campaign Name: For my purposes, I simply repeat the Campaign Source.
Clicking on Generate URL provides the custom URL in the text box. Simply copy this URL and use it for the link’s URL in Dreamweaver.
With all URLs in place with the Google Analytics attributes, I now move to add the Constant Contact code.
Adding the Constant Contact Markup
First, let me say that the documentation from Constant Contact is less than intuitive. I wasted several production emails to learn later that something had been coded improperly. Hopefully, this post will help. Note also that while I’m using ConstantContact, on a high level, this is similar to several other email service providers (MailerMailer, Lyris, MailChimp, etc.) that allow for custom coding.
<OpenTracking/> tag must be in place after the
<body> tag but before the content. Then, surrounding each hyperlink anchor
<a> tag, the
<SimpleURLProperty> tag is inserted.
<SimpleURLProperty name="" type="plain" href="" img="" label="" track="true">
The attributes are as follows:
- name: The name of this link. I tend to use the same unique name as I did for the Google Analytics link.
- type: I always use plain.
- href: The entire URL (including Google Analytics attributes) goes here.
- img: If the element hosting the link is an image, the URL of the image goes here.
- label: If the element hosting the link is text, the actual link text goes here.
- track: Value is true. This is the default, yet must be in place for tracking to be recorded.
To make this somewhat manual process a bit easier, I simply created a Dreamweaver Snippet with the
<SimpleURLProperty> code that I can wrap around after selecting the anchor tag.
Adding the custom code to ConstantContact
Once all links I wish to track have been tagged, I double check my code to make sure it is valid.
I currently don’t validate this. Here’s why:
While I have the option to use either HTML or XHTML for my Custom Contact custom emails, I choose XHTML, because it affords me some additional features with Constant Contact. Custom Contact uses a custom XML Namespace for its emails;
xmlns:cctd="http://www.constantcontact.com/cctd. Because of this, I get numerous, additional validation errors. Therefore, I use a slightly dumbed down approach. I let Constant Contact point out the errors, then use Dreamweaver to find the line number and fix the error. Common errors I’ve run across are self-closing tag errors, like
Once I feel confident that my code is clean, I start a new email in Constant Contact, select the custom email & XHTML options, then begin by first copy & pasting the CSS into the Styles panel. I then copy & paste the HTML code into the HTML panel.
I then preview to check for errors. If errors are reported, I copy/paste the code back into a new Dreamweaver file and troubleshoot. If no errors occur, I send a test message to myself, hitting three different mail clients. Once the test email is received, I click on the various links, then check back in Constant Contact to see if the clickthroughs were triggered. Only after the confirmation is the email sent. I would check Google Analytics, however, there is a long delay before they are presented.
The Resulting Metrics
The first metrics received come from Constant Contact.
The statistics provide totals on sent/opens, spam reports, opt-outs, opens, clicks and forwards. Constant Contact also shows me the number of clicks per link. So this gives me a good idea of what happened in the email environment. Note that like most email service providers, Constant Contact cannot track opens for text emails. However, if a link is clicked, it then does infer an open for that recipient.
Sent to opens gives us an idea on whether the recipient is engaged with our emails. If this number is too low, a separate, custom email might be in order for those subscribers. Bounces are caused by various issues, such as non-existent email addresses, block, vacation/out of office messages, mail box full, etc. Spam reports should be zero or very low. Otherwise, you’re not doing something right. Opt-outs are a sign of not getting what the expected. Remember, you must meet the subscribers expectations with each mailing, otherwise they will opt-out. Clicks refer to the number of items clicked. This number tends to be lower than the individual numbers below, due to multiple opens by some subscribers. Forwards tell you how many messages were forwarded to other email addresses, a sign that viral marketing is alive and well.
Now let’s take a look at what Google Analytics gives us.
Once logged into Google Analytics, if you select Traffic Sources > Campaigns, you can select the desired campaign, based on the Campaign Name you gave in the Google Analytics URL builder. Some basic information initially appears, such as the number of visits, pages per visit, % of new visits, time on site, etc. By filering down on the segment Ad Content, we can see how productive each link was per clickthrough.
This is a high level view of the capabilities available by tying in your email and web-based metrics programs to provide a big picture of the entire user experience.
*Client prefers, event after many attempts at persuasion, to manage recipient list manually, outside of email providers system.