Optimize Add To Cart Rates With Dynamic Text on CTA

Published: December 30, 2008

Updated: August 8th, 2020

call to action buttons

In a previous post – Call to Action: Add to Cart or Buy Now? – I talked about what text should you use on those call to action buttons that start your checkout process. Simply put, you need to display either Buy Now or Add to Cart, depending on your business objectives.

Lately, I came across one retailer that displays both call to action buttons, right next to each other. I have no idea how this is performing in terms of conversion, but for users like me, their tactic works just fine. If I want to buy just one product, I would click on the Buy button, otherwise, I would click on Add.

One way you can improve your conversion rate (or the time on site, bounce rate, pages per visit, etc) is to better match user intent with the website content.

I’ll take the case of a keyword used in a PPC campaign and we’ll improve the landing page to match the user as closely as possible (in terms of the call to action used to find your site).

Let’s say you are selling perfumes online and you attract visitors using paid advertising. You created a highly targeted ad group targeting visitors that are very close to buying a CHANEL perfume. Your keywords may look like “buy coco chanel perfume” and the synonyms for buy as it follows “order coco chanel perfume”; “purchase coco chanel perfume”; “shop coco chanel perfume”.

Step 1: tag landing page URLs

You will need to associate each keyword with a unique URL, and tag (add a parameter to the existing URL) them accordingly. The URLs may look like:

  • “buy coco chanel perfume” – www.sitesample.com/coco-chanel.php?cta=”buy”
  • “order coco chanel perfume” – www.sitesample.com/coco-chanel.php?cta=”order”
  • “purchase coco chanel perfume”- www.sitesample.com/coco-chanel.php?cta=”purchase”
  • “shop coco chanel perfume”- www.sitesample.com/coco-chanel.php?cta=”shop”

Step 2: create a CSS/text button

For the landing pages tied with the keywords above you should dynamically change the text on the button which starts the checkout process.

For that, you will need to use a CSS trick that displays text over a background image (your button). To see a good sample button, go to Google Analytics login page, and look in the source code for the “Access Analytics” button. Here, are, some, tutorials on CSS buttons.

A quick way to see if a button is made of text or image is to try selecting the text with your mouse.

Step 3: dynamically change the text content

Once you finish implementing the hybrid CSS text button, tell your programmers to read the cta parameter (can be in any other naming convention) when someone lands on your site. Build the landing pages dynamically, by replacing the default text on the CSS button with the value of the cta parameter.

Now, when someone comes from your PPC ads using the keyword “purchase coco chanel perfume” the button should display “Purchase Now” and not “Buy Now”, which is much closer to what the visitor had in mind when they typed the query.

Do you want to go a little bit further ? A/B tests, baby!

  • Display “Purchase Now” versus
  • Display “Purchase{Product Name Here}Now

If you decide to test the tactics above, let me know the results.

In my opinion, one of the most under-appreciated tactics used for conversion optimization is URL tagging and landing page personalization. Once properly implemented, these tactics can have a dramatic effect on your KPIs. Just think of what you can do if you combine cookies with tagged URLs: content segmentation, different prices for new and existing users, promotions to attract new customers, visitors frequency-based prices…

Happy Optimization in 2009!

Thoughts? Reach out to me on Twitter or LinkedIn.