Code
Making Multiple Column Marketo Forms Responsive
By default, if you embed a multiple column Marketo form into a webpage the form will adopt a fixed width that will likely expand out of whatever container you put…
By default, if you embed a multiple column Marketo form into a webpage the form will adopt a fixed width that will likely expand out of whatever container you put it into.
You can restyle things, to a certain degree, with the custom CSS that Marketo allows you to edit, but this only gets you so far because of the built in html structure of the Marketo forms.
Because of this, I wrote a script that does a lot of the dirty work to make Marketo forms responsive regardless of viewport size.
The Script
The script will resize any Marketo form on the page upon rendering and on window resize. It does some math to calculate how many form fields there are per row and will apply an appropriate width to those rows for any viewport size.
One note is that you also have to include a simple media query for the mobile size. Don’t have time to get into that messiness in this post though.
After Running the Script
Desktop
Mobile
Conclusion
This is just one of the many things you can achieve with the Forms 2.0 api. I have a much more complete and fleshed out script that allows you to:
- Determine if you want the form styled
- Specifcy button alignment and text
- Strip out and entirely restyle the form
- Adapt the form for a dark or light background
- Alter radio and checkboxes styling
Comment below or contact me if you are interested in taking a look.
Code
Terminal Commands To Clean Up Excess WordPress Image Sizes
This past month when cleaning out my website in an attempt to move hosts I discovered I had over 70,000 images in my WordPress uploads directory. Even after 6 years…
This past month when cleaning out my website in an attempt to move hosts I discovered I had over 70,000 images in my WordPress uploads directory. Even after 6 years of blogging that still seemed like a lot to me…
It turns out that many of these images were thumbnails of various sizes generated by themes I had cycled through over the years. These themes, whenever I would regenerate thumbnails to accomodate them, would bloat up my directory.
Finally after failing to use one of the many plugins out there, like thumbnail cleaner, to rid my uploads folders I had to get creative.
The Terminal
Below are a couple of terminal commands I used to search and destroy unused images.
Search By Size
First I searched for the largest files by navigating to the uploads director and entering the below command.
find . -size +10M -lsThis command finds and lists the largest files in a directory. Anything above 10MB. The files I found only accounted for a small portion of the files in my uploads folder.
By File Pattern
Something I noticed while browsing by file size was that all files ended with the relatively same pattern of something like -150×150.jpg.
From there I decided to remove all of the file sizes generated by WordPress that I was fairly confident I hadn’t used on my site, or didn’t use anymore at least. All of the WordPress generated files used the same pattern at the end so I came up with the below commands.
find . -name *-450x450.* | xargs rm -f
find . -name *-650x650.* | xargs rm -f
find . -name *-600x300.* | xargs rm -f
find . -name *-960x300.* | xargs rm -f
find . -name *-180x137.* | xargs rm -f
find . -name *-150x75.* | xargs rm -f
find . -name *-50x50.* | xargs rm -f
find . -name *-66x66.* | xargs rm -f
find . -name *-52x50.* | xargs rm -f
find . -name *-120x120.* | xargs rm -f
find . -name *-100x100.* | xargs rm -f
find . -name *-500x500.* | xargs rm -f
find . -name *-800x800.* | xargs rm -f
find . -name *-500* | xargs rm -f
find . -name *-700* | xargs rm -f
find . -name *-300x225.* | xargs rm -f
In reality you could probably do something like the below to just wipe out all WordPress generated thumbnails.
find . -name *-*x*.* | xargs rm -fResults
I dropped my uploads directory for 70,000 images to 7,000 and also managed to drop the size of my WordPress website from 12GB to something more like 3GB. It made all the difference when trying to migrate a website!
Code
Marketo Event Tracking Using the Munchkin “clickLink” Javascript Function
Many are familiar with Google Analytics event tracking and its associated insights. This is something that HubSpot has implemented (View Image) to a certain degree in their product, but as…
Many are familiar with Google Analytics event tracking and its associated insights. This is something that HubSpot has implemented (View Image) to a certain degree in their product, but as of right now Marketo is lacking.
If I want to trigger a workflow off of a hover event, or an abandoned form, or some other event that happens on a webpage but doesn’t discretely send Marketo information then I’m shit out of luck.
In a previous post I documented how you could use AddThis share buttons (because the Marketo ones stink), and track their clicks in both Google Analytics and Marketo, and I realized after the fact that this type of functionality might be useful to other Marketo users on a general “event tracking” level.
Here is the Google Analytics tracking code:
ga('send', 'event', 'category', 'action', 'label', 'value');Here is the concept snippet I’ve created for tracking events in Marketo:
// MAKESHIFT EVENT TRACKING SCRIPT
function mktoTrackEvent(category, action, label, value) {
_category = category ? category : 'general';
_action = action ? action : 'not set';
_label = label ? label : 'not set';
_value = value ? value : 'not set';
var mktoEventLocation = window.location.href;
var mktoEventString = _category + '/' + _action + '/' + _label + '/' + _value + '/';
var mktoEventUrl = mktoEventLocation + encodeURI(mktoEventString);
Munchkin.munchkinFunction('clickLink', { href: mktolink });
}So if you look at the function you are basically tracking events as link clicks in Marketo. If say, you wanted to tracking someone hovering over an element on your page you could use the below snippet to tracking that.
Track a hover event:
$('#element').hover(function() {
mktoTrackEvent('A Cateogry','Hover','Something','The Value');
});Then, create a workflow to trigger off the event:
Once you’ve recorded the event as a link click in Marketo you can then trigger workflows off of it using the clicks link trigger. See the featured image of this post for how that would look.
Conclusion
This is a simple way of tracking specific events. Unfortunately this method does not provide the capability of isolating out the individual values of the event for use in Marketo flows. For example, if you wanted to score people using the values provided by the event, or if you wanted to record interesting moments based on the events. All of this is impossible with this snippet. To achieve that you would have to create several event related fields, a forms with those fields, hide the form on the page, and use the Marketo Forms 2.0 methods to submit it behind the scenes with the values as the use completes events. Or, perhaps created a backend handler to process Ajax calls and send to Marketo via the REST or SOAP API. Perhaps that’s a post for another day.
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
My first WordPress Plugin “Swatchify”
Swatchify is a WordPress plugin that grabs an image from a post or image file and creates a swatch to go with it. Learn more about it by clicking the…
Swatchify is a WordPress plugin that grabs an image from a post or image file and creates a swatch to go with it. Learn more about it by clicking the link to view this post.
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!
Code
How to Create Popups with Fancybox, jQuery Cookie, and Twitter Bootstrap
In this short little tutorial I’m going to show you how to easily create and implement popups that will help you drive awareness, gather emails, and all kinds of other…
In this short little tutorial I’m going to show you how to easily create and implement popups that will help you drive awareness, gather emails, and all kinds of other things that popups are used for without having to purchase something like OptInMonster.
Download and Include
Directions
Take a Look at the gist below. We have the popup HTML swiftly followed by the popup JS. You can cut and paste this code into you template once you’ve implemented the required scripts, but it won’t work until you replace the values in the double brackets -> {{ }}.
Line 1:
On the first line we have a hidden link that links to “#popup” which will be used later in a script to open the fancybox. You can ignore this for now…
Lines 3-22:
This is our popup with a picture on the left and a title / from on the right. Here is an example of what it looks like when implemented and opened in the fancybox. The id of this div is #popup which is the anchor used in the link on line 1. Notice that this div uses Twitter Bootstrap for the grid, and is hidden initially.
Line 24-53:
This is our script for opening the fancybox. What happens here is that:
- Line 29: We check to see the width of the screen. If it’s under 992px we don’t implement the popup (personal preference). You can take this out if you want, but popups are really annoying on mobile.
- Line 32: Next we have an if statement to see if the the popup we have implemented has already been opened. We achieve this by checking a cookie value “popup1”. If it is “viewed” we don’t open the popup.
- Line 34: If the “popup1” cookie is empty we then initiate a js timeout function to fire after 30 seconds.
- Line 35: After 30 seconds we use the FancyBox api open method to target the “#popup-up” link that we have on line one. That opens the popup div. After that we use the afterClose parameter to set the “popup1” cookie value to “viewed”.
- Lines 40 -46: These lines repeat the process in the lines above, but for a popup that is supposed to open after 10 minutes!
- That’s it!
Conclusion
That’s pretty much it. If you want to add other popups, or popups that open after various amounts of time it’s pretty easy to hack the code! Enjoy.
Questions below!
XebiaLabs Campaign Name & Tracking URL Builder
One of our challenges at XebiaLabs as our team has grown is that we’ve had to coordinate on things like tracking and analytics. This is very tricky because even the…
One of our challenges at XebiaLabs as our team has grown is that we’ve had to coordinate on things like tracking and analytics. This is very tricky because even the smallest problem like a capitalized letter can throw this off. To help our team coordinate I developed a tool that would allow us to have a source of record for our tracking and reporting efforts.
The URL builder pulls all of the resources on our website, and their associated information for the URL field. Once selected the resource it will automagically specify the content type in the Content field.
The following fields for Source and Channel have predefined options based on what we use the most.
As users select these fields the content on the right is updated. On right right we have our Marketo and Salesforce campaign names, a tracking link for the resource and the various UTM fields being used.
As users update the information there is a lot of magic happening in the background to turn all values into lowercase so you don’t have to set up filters in google analytics, although you probably should, in addition to a bunch of other fun things!
Code
How to Change Website Highlight / Selection Color With CSS
I sometimes like to change the highlight / selection color with css. It’s a nice little touch that adds something to the feel of the site. Even thought most people…
I sometimes like to change the highlight / selection color with css. It’s a nice little touch that adds something to the feel of the site. Even thought most people will never see it, the ones that door will find it entertaining.
Changing the highlight / selection color is super easy. Simply cut, copy, and paste the below snippet into your stylesheet. Replace the background color, and color properties to your liking, and you’re highlight color will change!
Code • Tool
Clearbit’s Logo API
I just spent countless hours generating high resolution JPEGs for the Periodic Table of DevOps and the DevOps Tool Chest, and of course the second I stop doing this super…
I just spent countless hours generating high resolution JPEGs for the Periodic Table of DevOps and the DevOps Tool Chest, and of course the second I stop doing this super labor intensive work one of my old coworkers sends me this.
Clearbit has an API that will allow you to easily pass a url to it, and receive a nice logo for the company in question.
<img src="https://logo.clearbit.com/{{DOMAIN HERE}}" alt="" />
Here is an example using Google:
You can also send these parameters to alter the image returned:
| Parameter | Description |
|---|---|
size |
integer Size of the image returned |
format |
string Format of the default – either png or jpg |
greyscale |
boolean Enables greyscaling |
