Code
Marketo and Google Analytics Tracking for AddThis Sharing Buttons
Marketo sharing buttons are terrible. They are styled poorly, they lack a variety of networks, and don’t cater to their audiences. It’s for these reasons that I started using AddThis for…
Marketo sharing buttons are terrible. They are styled poorly, they lack a variety of networks, and don’t cater to their audiences. It’s for these reasons that I started using AddThis for sharing functionality on Marketo landing pages. I find it very ironic since Oracle has acquired AddThis.
Here is how I integrated AddThis sharing buttons with Marketo so that I could measure sharing metrics in both Marketo and Google Analytics using munchkin link click tracking and google analytics events.
The Code
Explanation
Below I’ll go through things line-by-line for those that might be confused or can’t follow the comments.
Line 5
Check if AddThis exists. If you have cut, copied, and pasted the sharing buttons and script anywhere on your site the AddThis will exist.
Line 6
If it does, add an event listener for when the user shares (see AddThis docs).
Line 15
Make sure it’s the share event (not really necessary, but too be safe if we decide to use this code for other event related stuff). In the docs you can just listen for all events and add all of the event specific code in here.
Line 18
Obviously a prerequisite to this is having Google Analytics code on your site. After you are confident you do, record a custom metric for total shares in Google Analytics (see google docs). You will need to have a custom metrics set up before you implement this part of the code, and you will have to make sure that the metric part of the code matches with the metrics you’ve created. For every person this will be different depending on your GA setup.
Line 21
I have Google Analytics measuring shares for every single network that matters to the companies I work with, however this might be different for you. On this line there is a switch that takes the AddThiss button that was clicked and matches it with the metric that you want to measure in GA. You can log “evt.data.service” in the console if you need to find the network name.
Line 40
Here I am doing some general event tracking populating the event with the AddThis service. (see google docs)
Line 43
Here I am doing some built in Google Analytics social event tracking (see google docs)
Line 46
Here I am crafting a unique link based on the page the user is on, the service they shared on, and the string “addthis”. Note, this isn’t actually a link that the user is clicking, it’s a fabricated link that allows you to craft a “clicked link” filter in Marketo for smart lists and reporting purposes. Works like a charm. The order of the addthis / service portion matters because of how you might pull smart lists differently (all networks vs specific networks).
The Results
You get a remarkable amount of data with this seemingly simple snippet of code.
Google Analytics
In Google analytics you’ll be able to see how many people shared your pages on a network-by-network basis on for your selected networks, as well as see sharing event stats for EVERY network.
Marketo
In marketo you will be able to pull smart lists to see who has shared on any network. You can created custom fields to tracking sharing stats, and you can report on these numbers as such. Best of all, you aren’t limited to just Twitter, Facebook, and LinkedIn. It’s every damn network that AddThis has in their arsenal. In this way, if you get great publicity on reddit or Dzone… you can measure it.
Code
How to Create a Custom Google Analytics Landing Page Conversion Rate Report
In this post I’ll demonstrate how you can set up a custom report to track landing page conversion rates using a custom metric, and custom calculated metric in Google Analytics….
In this post I’ll demonstrate how you can set up a custom report to track landing page conversion rates using a custom metric, and custom calculated metric in Google Analytics.
You can track form fill with events, but this doesn’t allow you to get a really simple drilldown of form fills per page for some reason…
The reason I needed to generate this report is because Marketo does not provide an out of the box report for landing page conversion when you are using self-hosted landing pages (which I imagine is quite popular because their landing page editor isn’t great).
At the end of this tutorial, your report will look something like the below report.
To achieve this take a quick view of this video, and if you have questions feel free to ask them below!
Image
Social Media Image Sizes
Finally someone came up with semi-complete documentation for this. It doesn’t help that these image sizes change every year, if not twice a year, but It baffles me that I…
Finally someone came up with semi-complete documentation for this. It doesn’t help that these image sizes change every year, if not twice a year, but It baffles me that I have to google this every time I want to generate a new cover image.
Drop Your Bounce Rate by 30% by Removing the Clutter
This past month I did something drastic to my blog. I removed almost everything from my post template except for the title and the content of the post. I was inspired…
This past month I did something drastic to my blog. I removed almost everything from my post template except for the title and the content of the post.
I was inspired by Evernote’s Clearly App, and how delightful it was to read content when using it. As a result I:
- Took away my menu
- Turned my “related posts” thumbnails into a list
- Centered all the content and put whitespace on either site
- Combined the post info, related content, and comments into one tabbed section to take up less space.
After all was said and done the articles on my site were about as bare as I could get them.
The result…. A 30% drop in bounce rate.
I imagine this is because people get to the page and aren’t distracted by all of the unnecessary shit.
They don’t know who I am, they don’t want to read other articles I have, they don’t want to comment, they don’t want to do a damn thing except read the content they were expecting to get when they clicked the link in the google search results.
Once they’ve read that content I provide them with just enough content to start to get to know me.
Magic.
Bootstrap Button CTA Event Tracking with Google Analytics
At XebiaLabs we use Twitter Bootstrap for out general site grid and various UI components. We make extensive use of the bootstrap buttons for everything from our subscribe buttons to dropdowns….
At XebiaLabs we use Twitter Bootstrap for out general site grid and various UI components. We make extensive use of the bootstrap buttons for everything from our subscribe buttons to dropdowns.
Something that I’ve always wanted to do as track link clicks as events using Google Analytics, but that was a little bit overkill. So, I decided to start tracking button clicks at the very least.
Every bootstrap button has the .btn class as well as two other classes to specify size and coloration. If you are using a framework like foundation you could use .button instead of .btn. In fact you could probably just paste in a bunch of standard button classes into the code below to track button clicks.
Anyways, you will need to be using jQuery, Twitter Bootstrap, and have a Google Analytics account to use the following snippet.
// ------------------------------
// GOOGLE ANALYTICS CTA TRACKING
// -----------------------------
$('.btn').click(function() {
var text = $(this).text(); // Grab the text from the button
var index = $('.btn').index(this); // Grab the button index (what button it is on the page)
var humanIndex = index + 1; // Button index usually starts at 0, so lets add 1 to make it human readable.
var trackedText = text + ' (' + humanIndex + ')'; // Set the recorded value, for example "Download (3)" for the third download button on the page.
ga('send', 'event', 'Button', 'Click', trackedText);
});
Basically what this code does is upon a button click if grabs the text of the button, the index of the button (what number button it is on the page), and then concatenates the two and records it as an event.
For example, you might have three buttons on a page in the below order
- Subscribe
- Learn More
- Subscribe
In Google analytics they would be recorded as:
- Subscribe (1)
- Learn More (2)
- Subscribe (3)
The “index” is important in discerning which button is being clicked in the case of having multiple buttons with the same text.
At the end of the day you can create a custom report in Google Analytics, like the one below, to drill down events to the page level and see what buttons people are clicking on every page.
Anyways, there are probably a million ways to do this more efficiently, but this is a first crack at it, and it seems to be working so there ya go!
Marketo API Driven Google Analytics Custom Dimensions
Marketo isn’t the best with reporting. I find their analytics to be quite janky, visually unappealing, and kind of annoying to build. Something I’ve wanted to do for a while…
Marketo isn’t the best with reporting. I find their analytics to be quite janky, visually unappealing, and kind of annoying to build.
Something I’ve wanted to do for a while is build in Marketo data into our Google analytics. I did this using Google Analytics Custom Dimensions.
Because I previously integrated MODX with Marketo I am now able to pass lead data to custom dimension parameters in the Google Analytics javascript snippet that they provide.
As an example here is what I’m currently running on Google Analytics.
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'xx-xxxxxxx-x', 'auto');
ga('send', 'pageview', {
'dimension1':'[[!+mkto.Email:default=`Anonymous`]]',
'dimension2':'[[!+mkto.Industry:default=`Unknown`]]',
'dimension3':'[[!+mkto.modxSalesforceOwner:default=`Unassigned`]]'
});
In this snippet I am measuring the email (unique lead identifier), industry, and salesperson of everyone that visits our site! This allows me to do some really neat stuff in google analytics when it comes to reporting, and I love me some google analytics reporting.
Leads
Industries
Salesperson Traffic
Next up is measuring specific events, custom metrics, and other fun stuff. I’ll hopefully put up a post soon!
Link
Open Office Layouts are Stupid and Annoying, Here’s Why…
Read the Article Here! I hate open workspaces. I think they are distracting, hinder my productivity, cause me to worry more about people judging me than my work performance. I…
I hate open workspaces. I think they are distracting, hinder my productivity, cause me to worry more about people judging me than my work performance.
I excel when I can sit down, not worry about prying eyes, and focus on the task at hand rather than the conversation my coworkers are having 15 feet away.
Turns out, I’m not the only one that has had these exact sentiments and highly values my private office. In fact, there are MANY others.
Read this article for a nice explanation of why the open office layout trend is stupid.
XebiaLabs Website V3 and Associated Projects
This post was written as an update post for XebiaLabs’ intranet. I will eventually get around to making it sound correct, but for now I’m unable to dedicate the time….
This post was written as an update post for XebiaLabs’ intranet. I will eventually get around to making it sound correct, but for now I’m unable to dedicate the time.
The website has been up for a couple of weeks now, but up until this point I’ve been too busy to put out and update post. This is the official high level overview of the work that has been done the past couple of months to make our new website happen.
Please take a moment to read through a couple of the sections to learn more about how we constructed the site, what it took to pull everything together, and how we successfully recreated our brand.
There are several parts included here that may not relate specifically to the website, but nonetheless played a huge roll in getting the website up and running.
New Website Environment
To get started here are some of the awesome tools that we are using the power the website. We have a number of custom solutions, but below you can view some of the fun toys that we are using to make the website chug along.
*I tried to list everything, but I’m sure I’m missing things. This is more of an overview.
CMS / Frameworks
CSS
PHP
JS
Responsive Website
Our website now supports 4+ Devices / 4+ Browsers. It also caters its appearance to other device sizes, but for all intents and purposes it fully supports 4+ device sizes.
We have tested our website in BrowserStack many many times, and there are always issues, but for the most part our website is killing it on most device, browser, operating system combos.
Blog, Updates, Support, and Docs
Something that often times get overlooked during a website redesign is the satellite sites like the blog, support portal, intranet, and docs site. To date I have provided updated designs for all of these sites, or at least attempted to make them look similar to the main website for a consistent web experience.
Blog
Our blog now looks like it’s part of the main website. there are still some navigational challenges, but we’re working on those. FUN FACT about the blog… we currently have the header and footer pulling form the main website using php. This is great because when we make changes to the main website the navigational changes propogate to the blog immediately and this makes coordinating changes between our websites a breeze.
Updates
The updates site, like the blog, pulls it’s header and footer from the main website. Updates also uses the same theme as the blog. The theme is called wp-clear for any of those interested in checking it out. We chose this theme because it is stripped down, doesn’t have many bells and whistles like many of the modern day themes are plagued with, and is optimized out the butt.
Zendesk
To update the support site we needed to choose a predefined them in their library and cater it as closely as possible. WE achieved this by changing many elements to match our color scheme, background images, and typographic elements. It looks like a stripped down version of our website, but gets the job done.
Docs
Right now I’m in the process of updating the styling for the docs site. It will involve many of the alterations that I implemented on the support site. Colors, images, typography, and general styling elements that will soon be coordinated for all to view here.
Email Templates
Like with the satellite sites, if you do a website you obviously have to redo all of the other collateral alongside it otherwise your brand gets all out of whack. For us this involved crafting 5 distinct templates for all of our 300+ emails in Marketo.
Then, we had to manually recreated those emails, update Marketo flows, and test the emails to make sure they rendered correctly. Heleen was a rockstar in taking care of this work, and deserves a medal!
Making sure all of the emails looked nice was also challenging. For those of you familiar with responsive email design you’ll feel my pain in this section. Designing a responsive email template the equivalent of designing a website in the early 90’s with all the bells and whistles of the modern day.
In the process of recreating the email templates we had to make sure they were compatible / tested against over 96+ device/ browser / client combos using Litmus. I will try and find the Litmus report to link here when I get the chance.
For those of you interested you can view the evolution of our email templates to the right.
Social Media
With the new look and appearance of the website, we had to update all of our social properties to better reflect this. They all now look uniform, clean, and our message is very clear.
The main challenge in achieving this was that we have a ton of social media outlets, and each one of these outlets requires creative assets in difference dimensions and resolutions. We had to generate many images to take care of this.
The other challenge was that all of our social media outlets had different messaing and creative so we had to come up with something that was new, clean, and effective.
In the future we will be doing fun things like creating branded intro to YouTube videos, Slide covers for Slideshare, etc. to bring a more branded experience to our social profiles.
Content Migration
Three months ago about 75% of our website was housed on Marketo. This included all content related landing pages, images, etc. This was obviously bad for SEO, didn’t integrate with our website well, and posed quite a few restrictions.
Dave and I took 2 days, migrated all of our content to the main website, formatted it appropriately and manually updated links.
Now, since we have access to all of our landing pages in MODx we can programmatically output content for our users dynamically based on their geographic region, industry, etc. We also have responsive landing pages that are far more optimized on the SEO front.
To make all of this work, we had do some extensive retooling of Marketo, but it was well worth it. Read about it in the next section!
Marketo Revamp
In the process of re-doing the website we migrated all of our landing pages, made drastic changes to permalink structure, and made extensive messaging changes. These changes essentially broke everything we had set up already in Marketo.
In order for our Marketo instance to work properly Heather, Heleen, Dave, Necco and I had to recreate everything from the ground up AND get it to play nice seamlessly with our existing instance so that when we flipped the switch on the new website nothing malfunctioned.
For example, a flow that stated:
“If filled out form on webpage containing /xl-resources/whitepapers/…”
had to be changed to…
“If filled out form on webpage containing /resources/whitepapers/….”
AND
Both of these flows had to function in tandem so that when the website switched over and permalinks changed we didn’t completely lose control over our Marketo setup.
This is a VERY TAME EXMAPLE…
In the process of doing this we collectively retooled over 15,000+ Marketo flows. After the launch we had to removed the overlapping flows, and test them to make sure the new ones worked.
For all of you that send me angry messages about things not working in Marketo please keep in mind that we collectively retooled our entire Marketo instance, a tool that we’ve invested 5 years of work into, over the course of several weeks.
Marketo Integration (One-to-One)
To be short, our website now has access to every single bit of “lead” related info on a lead-by-lead basis which allows us to cater almost every single aspect of our website based on the individuals.
I achieved this by writing a custom MODx plugin utilizing a PHP Marketo client for their SOAP API.
There were several major challenges with this relating to:
- Inability to always access to Marketo cookie data
- Caching / load time issues related to perpetually making SOAP calls to Marketo
- Bad lead data. Many values are spotty at best across our entire database. First name, country, state, and company are some of the only well populated values
- Disparities between region, industry, etc. values being used in Marketo, Salesforce, and other systems.
For many of these issues we have some pretty awesome solutions. For others we couldn’t really do much.
NOW, we can use lead related data to pull related resource, output industry / location / activity related data, and much much more. We could have an entire post related to this.
Multilingual Websites
Coding the website from the ground up allowed me to code with “multilingual” in mind. Doing this was infinitely more difficult, but also forced me to concentrate and code the website in a way that would allow us to scale out our presence to many many different languages down the line.
Our website will soon be in:
- English
- French
- German
- Spanish
- Dutch
Currently we are using a combination of a plugin called Babel, built in MODx capabilities like lexicon entries, and other methods for achieving a fully multilingual website.
Something to keep in mind is that there are many aspects of our website that are constricted by our decision to make the website multilingual. Web update now have to be made with 5 languages taken into consideration in addition to other facets of the website such as the responsive elements etc.
For more information on just the multilingual related challenges faced by web admins see this post.
Content Creation / Consolidation – Images, PDFs,
Our website has thousands of images. Some of these images existed on our old website, but most of them didn’t. In order to make our website look nice I had to break out photoshop, fireworks, or illustrator, and produce new creative. About 1,200+ times to be exact.
Necco and I painstakingly went through most of the images on our site, generated high resolution jpg images, and plugged them into our website.
All of our collateral is now in a central location and includes:
- Customer Images
- Plugin
- Partner Images
- Press Images
- Whitepaper Covers
- Case Study Covers
- Video Covers
- Template Components
- etc. etc. etc.
APIs & Integrations
Our website currently integrates with a flotilla of APIs, 3rd party components, and tools that provide functionality. Below is a list of how we are currently using some of these tools, what we use them for, and how they interact with the website.
- FreeGEOIP – For geolocating / enriching lead data.
- TypeKit – For web typography etc.
- Google Maps – For contact page / event pages that are coming soon.
- Google Analytics – General analytics in addition to event tracking for a number of elements across the website, most notably the download buttons on the top of every page. We can also do A/B testing using GA, but have not yet implemented.
- Disqus – Disqus provides all of the commenting functionality on our website.
- AddThis – AddThis is what we use for sharing buttons, and gives us amazing data on our sharing activities. We have this integrated with the Marketo munchkin.js tracking code so that we get sharing data in Marketo.
- Zapier – Zapier will sync blog post information to main website, will send sms messages to remind users of webinars, and a couple of other fun things in the future.
- HipChat – The blog sends HipChat notifications when users publish new posts.
- Discover.org – Marketo will soon pull info from Discover.org to enrich leads every time someone visits our website.
- Full Contact – Marketo currently pulls info from Full Contact to enrich leads every time someone visits our website.
- Litmus – Litmus helps us monitor email marketing effectiveness and make sure all of our correspondence looks pretty across devices and clients.
- Olark – Olark currently works on the website, and is something we would like to rollout when we have time.
- Twilio – Twilio will hopefully be used in the future for mobile marketing efforts based on what we are currently doing with webinars and Q&A
- Optimizely – We have configured optimizely for A/B testing but may go with a built in MODx solution.
Other Fun Tools
While working on this web project a number of fun tools evolved that we will hopefully be able to use soon. Please take a quick glimpse at some of the ones that are in progress.
- Online Style Guide – Place where we can keep our brand style guidelines updated and consistent.
- Signature Line Generator – For creating our signature lines. GETTING A FACELIFT SOON 🙂
- Dossier – For viewing lead activity / data across Marketo, salesforce, and social. STILL VERY MUCH A WORK IN PROGRESS.
- DING – For real time activity notifications.
Conclusion
We’ve come a long way with the website, and it will continue to grow and evolve as we move forward. We now have an eextremelypowerful platform on which to really grow our content including:
- Plugins 50+
- Customer Stories – 80+
- Manuals, Guides, Documentation Etc. 30+
- Support Materials
- Blog Content
and once we’ve added / marketed this content subsequently explode our traffic, downloads, and wallets.
Easter Egg
Add the class “hue” to the opening body tag while viewing the site, and it will get funky!
XebiaLabs Signature Line Generator
Several weeks after starting at my position as Digital Marketing Manager at XebiaLabs I was asked to redesign the company’s signature line. This was prompted by CEO, as well as…
Several weeks after starting at my position as Digital Marketing Manager at XebiaLabs I was asked to redesign the company’s signature line. This was prompted by CEO, as well as employee, complaints that our signature lines were, “too different, disorganized, and unprofessional” They wanted a uniform signature line that could be easily installed, updated, measured, and appreciated by all. Several employees had tried previously, but to no avail.
I started the project, and it is possible that it was the toughest project I’ve ever undertaken.
The first problem that I ran into was that, as an international company, our employees were dispersed across the globe, and thus had no access to the marketing department.
This ruled out the possibility of meeting with employees in person to install their signature lines, and is what prompted me to come up with a “signature line generator” that our employees could use to generate their signature lines, cut and paste it into their email clients, and if there were any issues, repeat the process.
I found this to be much more practical than guiding each and every employee through the process individually, over the phone, or in some other manner. Additionally, this tool would deliver business value in perpetuity as long as it was updated.
To design the email signature line generator I used PHP, Javascript, HTML, and CSS, to create a prototype that would:
- Collect all of the required information
- Validate that information
- Automatically generate their signature line
- Provide them instructions on how to install it on various email clients
- Store the information for use in future signature lines
- Collect the information to be used for the bios on the “Team Page”
- Collect analytics on signature line clicks using Google Analytics tracking code
- Provide a tool that could be extended to XebiaLabs’ parent company
It took about a week to put together over the course of the year, but it was well worth. Below you can find the specifics on some of the cooler features.
Google Analytics
Every signature line that I generated I packed with Google campaign tracking code. This simple addition would allow me to track who in the company was having their email signature clicked the most as well as tracking how much of our email traffic was actually coming from personal company emails.
When signature lines are generated Google tracking links are programmed into the design in locations such as the logo, name, address, website links, etc. etc. This generates a uniform tracking standard across an organization, turbocharges email measurements by automatically installing tracking links across the board, and affords the ability to track signature line usage on an individual basis. Here are some of the parameters.
- utm_source = Signature Line
- utm_medium = Email
- utm_content = Logo, Name, Social Link, Advertisement (What is being clicked)
- utm_term = Jon Blumenfeld (Individual’s Name)
Future Looking
I knew that the email signatures were going to change in the future. It’s inevitable. I didn’t want to be responsible for redesigning the signature line and setting up meetings to get people set up in the future so I programmed the form to store the data in our CMS MODx for future use.
Users would be able to click on their personal link, view their signature line any time in the future with updated designs.
“Team Page” Content
Whenever someone would generate a signature line I would store that information for future use on our company page. It proved a whole lot easier than contacting everyone individually for the same information in the future.
Xebia Signature Lines
The signature line generator was a big hit amongst the XebiaLabs team, and as a result XebiaLabs’ parent company Xebia caught wind of it and asked for a version they could use. Doing this was as easy as swapping out the logo, and changing the signature color scheme.
Standard
The CEO Reading List – Now On My Bucket List?
This CEO reading list has a number of books I’ve routinely heard about but never had the pleasure of reading. I’m thinking that this might be a good yearly project…
This CEO reading list has a number of books I’ve routinely heard about but never had the pleasure of reading. I’m thinking that this might be a good yearly project for myself. Perhaps a book a week for the rest of 2015? Anyone else on board to it with me?
I think it would be really cool to get insight into some of the most popular CEOs’ management styles, life decisions, etc. from the books that inspired them in their lives. I can already derive some insights from the types of books Larry Ellison, Larry Page, and Tony Hsieh listed.
Anyone down to double team this as a yearly project?
