logo-small
Features Prices
News 0
Latest News See All

Temporarily unavailable. Please come back later.

See All
Webinars 0
Upcoming Webinars See All
Upcoming Webinars

Sorry, we could not find any upcoming webinars.

See recorded webinars
Blog 0
Recent Posts See All

Temporarily unavailable. Please come back later.

See All
Marc Eglon

Engineer Your Website to Boost Conversions with These Code Snippets [Checklist]

Marc Eglon
Engineer Your Website to Boost Conversions with These Code Snippets [Checklist]

Whenever we create websites, we focus on design and (sometimes) we work optimizing copy and UX (user experience). We make our websites look amazing and that makes sense, because that’s what everybody actually sees.

But there’s more to creating a great website than how it looks – because beyond the first impression, how it looks is superficial and subjective.

To truly improve your design, copy, user flowpaths and ultimately revenue, you need to think of your website as a publishing platform. It’s a business engine, and most of the moving parts are under the hood.

Nobody sees them but you.

But they’re the underlying components that drive everything – your blog, sales pages, shopping cart and analytics.

Here’s a checklist of the unseen code snippets of a high-converting website engine that nobody else ever sees.

(Click the image to the right to download PDF checklist.)

Download Checklist

Whatever you measure, you can improve. And your analytics dashboard is the foundation for measuring everything you do. I never launch a new site without adding Google Analytics and Clicky because getting data from the beginning enables you to make objective business decisions right from the start.

Pro tip to turn your metrics into actionable data: The default Google Analytics dashboard gives you a lot of data and it concentrates primarily on vanity metrics, like overall visitors. Just don’t fall into the trap of trying to monitor too much because you’ll end up monitoring nothing at all.

Instead, focus on the north-star metrics that align with the overall purpose of your site. Choose one metric that matters.

Every page on your website should be focused on one primary deliverable. For example, a blog post might be designed to inform and entertain. If that’s all you want to achieve, time-on-page is probably all you need to monitor. But if you’re also trying to motivate readers to sign up for your newsletter after reading, set up a goal to measure the sign-up rate.

Just make sure that everybody on your team is clear about what each page is designed to achieve. And measure exactly how effectively it does that one thing.

2. Webmaster verification metatag

If you’re publishing epic content (you are using content marketing, right?) you can expect to see a lot of organic traffic from search. Problem is, since Google no longer provides the search queries inside of their analytics dashboard, most of the time you have no idea what search terms visitors used to find you. But Google does know and you can access the information in the Search Console (formerly webmaster tools).

Code SnippetsAs well and finding what search terms visitors are using to find your site, you can also:

  • Submit a site map to help Google index your site correctly.
  • Review crawl errors that indicate bottlenecks in your .htaccess and robot.txt files. These can block pages from being indexed and reduce organic traffic.
  • Review how your pages appear in the SERPs.
  • Test your structured data (see item 4, below)
  • Check backlinks and internal links

Pro-tip: Don’t forget about Bing webmaster tools. It still accounts for 20% of search (source: Comscore).

3. Marketing tools

I use SumoMe because it’s the easiest to set up and you get a complete marketing stack that’ll give your website superpowers. Some use-cases:

  • Start with the email modules to attract email subscribers. Nothing is more powerful than email for fostering a relationship with your customers and increasing sales.
  • Split-test different types of email subscription forms. I found that the welcome mat converts around 8% of visitors into subscribers. This acts as a full-screen welcome page which is less intrusive than popups or popovers.
  • Use heatmaps to identify the elements of your page that distract users from the core purpose of your page. Then remove those distractions to boost conversion rates.
  • Experiment with different social sharing buttons to identify which channels work best for your site/audience. (Readers share professional content on Linkedin but cat videos on Facebook.)

4. Structured data

The Internet is designed to be inherently semantic. Quick primer on sematics – Everything on the internet as a generic ‘Thing.’ But in real life, ‘things’ have context and characteristics. A movie has a title, a director, a duration and a musical score. A person has a name, birthday and nationality.

Schema.org uses a system of metatags that give us all a standardized metadata language that let’s you to add context to your articles. Schema microdata can improve your SEO because (a) search engines have better context as to when to display your site in search, and (b) Google uses rich snippets to display your site content right in the SERPs.

Here’s a video from Google explaining how rich snippets work.

https://www.youtube.com/watch?v=A-kX0Aut-18

5. Retargeting pixels

Visitors rarely buy on the first visit to your site and it usually take several touch-points with your brand before they do. Sometimes it happens over several channels – on-site, social and email.

Retargeting works by adding a cookie to your visitor’s browser when they visit your site. These cookies are usually embedded in a retargeting pixel (a 1x1px image) that you add to your site. Facebook, Twitter, Linkedin and Google all provide retargeting platforms and other third party services like AdRoll integrate across several platforms.

Here’s an example for Facebook -

Facebook uses a new unified tracking pixel that lets you tag visitors depending on conversions and a number of events - adding a product to the cart, completing your registration process etc.

You can then use Facebook ads to serve content to different customer segments. You could give a time-sensitive coupon to somebody who didn't complete checkout. Or promote a downloadable field guide to somebody who read a particular article.

John Loomer wrote a plain English guide on adding the Facebook pixel and how you can use it to boost conversions across channels.

Pro tip to boost your retargeting ROI - Media buyer and conversion expert Justin Brooke delayed the retargeting pixel for 45 seconds. The effect was to cookie only the 22% of visitors who cared enough to stick around, thus qualifying them as interested potential customers and eliminating the 78% who weren’t a good fit. This swung a losing retargeting campaign into one with a 536% ROI. You can use Codedelay to set the time you want your code to be triggered.

6. Open Graph Metadata

Like the structured data for search (item 2 above) the open graph protocol (OPG) uses standardized on-page metadata that enables you to engineer the way your content appears when it’s shared on Facebook, LinkedIn and Google+. Twitter uses its own ‘cards’ markup but defaults to open graph metadata if you haven’t set up the cards.

Pro tip for wordpress users - Use the Yoast SEO plugin and customise the open graph metadata for each post and make sure your images are optimized for sharing.

7. Iubenda (privacy policy)

Protecting user data and maintaining their privacy is important. You’re legally obliged to have a privacy policy in place and you’ll absolutely need it when you’re setting up your retargeting ads. Thing is, it gets complex when you integrate third party platforms on your site (Google, Facebook, your mailing provider) and it’s complicated by territorial legislation. Each jurisdiction has additional mandates like the EU Privacy Directive, Australia’s APPs and the Canadian Anti-Spam Law.

Lawyers are expensive. I just grab the line of code from my Iubenda account, which means the privacy policy is compliant and it’s always up to date.

8. Add the Facebook authorship tag to grow your audience

The authorship concept is interesting and has a jaded history. In 2011, Google introduced their rel=author markup as a means to link publishers to their Google+ profile and appear in search results. It was Google’s attempt to integrate a social graph with the search results.

Ultimately, it failed because adoption by websites was sub-threshold and Google+ user growth didn’t reach a critical mass. Google dropped authorship as a ranking factor in August 2014 and is now dismantling Google+ itself into standalone products.

But the concept of authorship to link content to a social profile is solid, so long as that social platform actually matters. Facebook is already the biggest source of referal traffic accross the web, making it the natural social distribution channel for amplifying your content. And the new Facebook authorship tag adds a byline linking to the author, alongside a follow button (for individual profiles) or a like button (for a brand page).

It means that you can build an audience on Facebook so that those who follow you and like your page will see your future articles.

Here’s what Facebook says:

The connection between byline and Page or Profile is created after a person clicks through a web article posted to Facebook. When the reader returns to News Feed after reading the article, the story preview will display a Follow button at the bottom of the News Feed unit for journalists with Facebook Profiles and a Like button for journalists with Facebook Pages. A text link to the author’s profile or Page is displayed as well. People who click on the Follow or Like button will start receiving updates from the author’s Profile or Page.

9. Manage your codes from a single dashboard

Managing all these codes can become laborious and time-consuming, especially if you’re regularly creating new retargeting and conversion codes.

Google Tag Manager is a container that you add to your site once, then add / remove / manage all your Google tags from a remote dashboard. It also includes some integrated third-party snippets or you can add your own custom code if it’s not listed.

Final Word

Use this guide as a checklist to turn your website into a high-performance machine. Just remember to measure what’s important for your specific business and focus on optimizing for your conversion metrics, whether that’s email subscribers, e-commerce checkouts or article shares.

Marc Eglon is the Founder and Editor of Hackerpreneur, an iOS magazine for creatives, startups, and entrepreneurs. He’s obsessed with the way we use technology and writes about side projects, startup growth, and optimizing everything. Follow Marc on Twitter.

Comments

2000 symbols remain
albinocombino
hey Mark. I have a question about structured data. Currently I'm working with an ecommerce site, and they creating relevant blog posts about the products. I'd like to use structured datas on them but not really sure how to start...I digged deep but i was unable to find relevant and useful tags.
To be more specific - they sell organic and bio stuffs (hand cream, makeup etc) and I have no idea how can I "upgrade" the code of the post with structured data. Any suggestion?
thx
Marc Eglon
albinocombino
First off, apologies for the delay in responding. I was away in Scotland for 2 weeks, getting married!

From your description, it looks like the Product scheme would be most appropriate for cosmetics products ([http://schema.org/Product]).

This will allow you to add relevant product descriptors like reviews, brand, pack size etc.

In terms of implementation The Yoast SEO plugin for wordpress (http://kb.yoast.com/article/18... is a good place to start. Or Raven have a great schema creation tool at http://schema-creator.org/prod... that gives you the code to add into your header.

If the store has a lot of SKUs, I’d run a field test on a few key products first to see if there’s an impact on sales or registrations before rolling out the schema markup across the site.

Getting your snippet to show in the right rail depends on the product too. For example, search for “MAC makeup” and you’ll see a snippet for MAC there.

But search for “MAC Powder Blush” and there’s no snippet so you may be able to get that position since it looks like the MAC website isn’t using microdata.

Of course, make sure you have the usual on-page factors nailed for the keyword too:

- Title

- Description

- Body text

- Image alt tags

- h tags
Have a Suggestion?