Gutenberg, the new editing experience for WordPress, will be launching very soon with the release of WordPress 5.0! The entire Gutenberg editing experience is geared towards adding multimedia to pages/posts, and the beta version already offers a powerful publishing experience.
We’re really excited to integrate Logic Hop with this.
Logic Hop, if you don’t know, does content personalization for WordPress. Logic Hop lets you personalize what website visitors see based on actual data, including browser history, on-site behavior, purchase history, user preference, and more.
It’s really powerful, and can make any WordPress site – from WooCommerce, to digital products, to business sites. Gutenberg makes it really really easy to use all of this, and this is the story of how we’ve integrated Logic Hop with Gutenberg.
Content personalization makes your WordPress site more effective
Here’s the situation: content personalization makes your WordPress site more effective! Here are a couple of ideas for you:
- Say you run a WooCommerce store. You could present a past buyer with a $5-off coupon the next time they visit your site.
- Or if you run a job board, it could mean prompting a repeat visitor to go ahead and apply.
- If you’re a Marketer, you could even identify how hot or cold your leads are and show them the kind of content they need straight away. You can even greet visitors by their first name and show them similar content to the newsletter they’ve just opened.
Alex recently wrote a great post on how to use Logic Hop to create personalized calls-to-action, which can increase click-through rates by 200%+, so if you want more ideas and examples have a read of that post.
So, we’ve got a great plugin, and we’re a perfect fit for Gutenberg adoption as it has obvious potential to improve the user experience. Let’s get on to how we made this happen.
How are developers adapting plugins for Gutenberg?
We’ve been preparing for Gutenberg since January 2018. As Gutenberg and its documentation are both still under active development, this has forced them to take a flexible approach to development from the start – fun, but challenging!
The overall aim is to simplify the user experience by offering content personalization at the Gutenberg Block level, and within Blocks. This will replace the existing shortcode-style Logic Tags, which go inline in the old editor.
We started by moving to a local development process using Local by Flywheel – providing an efficient and contained environment while working with Webpack to automate the build process.
After getting everything set up, there was a lot of testing/experimenting with the Gutenberg Block API, understanding how things work together and how blocks are stored within WP Post content in the database.
Michael Newman is the Founder and Lead Developer at Logic Hop:
“Once we figured out how and where to use Gutenberg blocks, adding Logic Hop support was pretty straightforward.”
Michael is still actively developing Gutenberg functionality, with plans for: dynamic preview tools, an improved Logic Hop User Experience (UX) and the ability to create conditions within the page editor, as well as nested conditional blocks.
Before Gutenberg, Logic Hop relied on meta boxes for page/post level elements such as Lead Scores and setting goals. We simplified this by getting rid of meta boxes and adding Logic Hop under the Plugins section of the Gutenberg editor. Here’s Michael on why:
“This seemed to be the right place for it – it doesn’t infringe on the core WordPress or Gutenberg tools, but still easily accessible when needed.”
All in all, a pretty neat experience using Logic Hop with Gutenberg.
How Gutenberg blocks support personalized content with Logic Hop
At the time of writing, Gutenberg is only available as a plugin and compatible with the latest version 4.9, but with the upcoming WordPress 5.0 release, it’ll be available as standard.
To install the Gutenberg plugin:
- On the WordPress Dashboard, Click Plugins > Add New.
- Type ‘Gutenberg’ in Search box and find Gutenberg Plugin.
- Click Install Now and Activate
For more information on getting started, visit the WordPress Gutenberg page
Here are just a few ways to use Gutenberg with Logic Hop:
Add a Goal
Create blocks for setting goals with Logic Hop. They make the user experience more intuitive, whether you are building your first site or write code for a living. They appear visually within the editor, but don’t appear when the page is rendered for the user.
Goals make Logic Hop automatically display content to users as funnels are completed, redirect users to the right page at the right moment, and track and identify users on future visits.
Add a Condition
Logic Hop Conditions act as containers for all sorts of Logic Hop rules. They can be used to conditionally control how site visitors see content.
All you need to do is drag a Condition onto the block you’d like to personalize.
Step 1
You can find and select these in the Logic Hop menu, on the top left of the page. Then drag and drop it to anywhere on the editor.
These can also be easily turned into reusable blocks, which makes Logic Hop much more convenient for marketers and content creators.
Step 2
On the right hand side, select a Variable. Let’s use a “Back to school” campaign as an example. Show visitors content which displays the name of their region.
Step 3
Save your changes by updating or publishing your content!
Track query strings:
Query strings are a great way to add personalization if your site user has clicked on a link from a newsletter, for example.
Query strings display dynamic content to specific users – ideal for referrals from ads, social media posts and Google apps. Used in conjunction with Logic Hop Goals, you can personalize greetings and continue to identify users on future visits.
Step 1
Go to the Logic Hop Palette and copy/paste the short query string code. If you know the first name of the page visitor you’re planning to target, just select “Query string firstname Exists” from the Condition drop-down menu on the right.
Step 2
If you don’t know the first name of the user, simply Duplicate the Condition widget and switch the “Display when not met” to ON.
Step 3
Go to Preview to check your content in real-time and make sure the query string looks correct.
What we love about adding conditional Query Strings is the ability to add multiple elements, nested within the condition box. You can even choose to display specific, targeted WooCommerce products, an Instagram feed, or specific YouTube video.
Logic Hop and Gutenberg ?
These are just a few ways to get started with content personalization using Logic Hop in Gutenberg. We’re excited to work on these changes and would love to hear how you’re getting on if you’re already using Logic Hop in the new interface.
For more information, just watch the video Michael created, at the top of the page leave a comment or get in touch with us.
Learn how Logic Hop can take your WordPress content to the next level!