Tony Sheng     Projects     Contact

How to create conditional call-to-actions with Jekyll

I migrated my blog from Posthaven to Jekyll not to long ago because I wanted to write in markdown and have more control over my site. After setting up with @mdo’s terrific poole template, I customized my css and read the Jekyll docs to see whether I could create conditional call-to-actions at the end of my posts using YAML front matter and Liquid templates.

The dream: create a library of call-to-actions that I could append to any post with a single line of front matter code.

For example, posts about technical stuff like this might have a call-to-action that asks you to follow me on twitter while posts about my podcast might ask you to leave a review on iTunes.

The front matter for this post would look like this:

---
layout: post
title: How to create conditional call-to-actions with Jekyll
category: howto
comments: yes
cta: cta_twitter.html // ideal front matter variable for CTAs
---

Unfortunately, after trying to set up a dynamic includes, I realized that Jekyll is intentionally designed not to support this. Sounds like there are some plugins that can help but I decided to compromise and create a conditional include in the posts template for every cta.

---
layout: post
title: How to create conditional call-to-actions with Jekyll
category: howto
comments: yes
cta_twitter: yes // possible front matter variable for CTAs
---

This is straightforward for anybody with experience in Jekyll.

First, we have to create the cta in the _includes folder.

{% if page.cta_twitter %} // only appears when called in front matter
    <hr />
    <p>If you enjoyed this post, follow me on twitter. <a href="https://twitter.com/intent/follow?original_referer=https%3A%2F%2Fabout.twitter.com%2Fresources%2Fbuttons&region=follow_link&screen_name=tonysheng&tw_p=followbutton">Click here.</a>
    </p>
{% endif %}

Then, we go to our post.html layout and add the includes

---
layout: default
---

<article class="post">
    <h1 class="post-title">{{ page.title }}</h1>
    <time datetime="{{ page.date | date_to_xmlschema }}" class="post-date">{{ page.date | date_to_string }}</time>
{{ content }}
</article>

{% include cta_twitter.html %} // the includes for our cta

This will produce the twitter call-to-action if you call it in the front matter of your post. Now you can add as many other call-to-actions as you like, but you’ll have to write it in your _includes and add it to your layout.

It’s not as sexy as using a cta variable, but it’s still one line of code. Now, I never have to worry about outdated or inconsistent call to actions. I can change it one time in my _includes and it will proliferate across all the posts that that particular cta activated.

Now, what would be really cool is to serve a dynamic call to action that could split test different CTAs to see which one did best on a given page. Has anybody done this before?

If you enjoyed this post and want more like it, join thousands of readers on the weekly newsletter.

Comments