Bill Gates described in a 2015 TED Talk what the next major crisis would be, he said it wouldn’t be missiles but microbes. COVID-19 has become our World War III. Our children will forever remember this time. Spending countless hours in the home, isolated from others, getting family time and online time. We are only a few weeks into being “quarantined”, while it’s not an official one yet, restaurants are only serving take-out or delivery, fitness centers are closed and now you can’t even get a haircut, or your nails done.
This also means digital is more important than ever. Your websites, Facebook pages, Instagram Accounts, Tik Tok, Pinterest, you name it, are fighting for the many hours the world is now spending in their homes in front of their TV’s, on their devices, and on their computers.
The question is, as a brand, what are you doing to take advantage of this? I see many companies offering free content, or free online services to capture brand awareness and help communities. We as companies should take this time to re-find our brand, re-establish our purpose. I read this great article on NPR.org about a list of free things that weren’t free before the Corona Virus. Things like music, Broadway shows, fitness programs, classic sports streaming and much more.
Many gym chains across the country have shuttered but are offering online classes for free.
– NPR.org
Many online brands like Sehpora and Ulta shutter stores and shift resources to online.(link) Ulta with shutting down its 1,254 retail stores until at least March 31 and also eliminating their in store pickup are pushing customers to their online stores.
Stores like Macy’s, Nordstrom and Kate Spade are giving big savings and discounts like 75% off and free ground shipping to its online customers. (link) A very large list of savings and coupons can be found in this NY Post article.
in the wake of the coronavirus, over 46% of consumers are more likely to buy clothing online, and nearly 65% are more likely to head to the internet to buy personal care products
Amazon announced on Monday it is hiring 100,000 temporary workers to keep up with what SVP of worldwide operations Dave Clark called “a significant increase in demand”.(link) This clearly shows the demand for online is a big one.
Delivering an amazing digital experience is only a piece of this. Deliverying a service that helps humanity in this crisis is the much bigger picture. How are you going to tell others about your brand in this environment? Are you making any changes to the way you deliver your digital campaigns across social media?
B2B digital experience made easy! With our connectors into the eCommerce platform, CoreMedia enables editors to create custom digital experiences for their B2B partners. B2C and B2B are the same, shouldn’t your digital experience platform give you the same capabilities regardless of your business model? See how your B2B sites can be iconic with CoreMedia Studio.
In my latest Made Easy with CoreMedia video I show our new integration with Salesforce Marketing Cloud Journeys. In case you are not familiar with Journeys, take a look:
Salesforce Journey Builder is a feature of the company’s Marketing Cloud that manages the customer life cycle: the progression of steps a customer goes through when considering, purchasing, using and maintaining loyalty to a brand
In this demonstration I show how you can personalize content to customers in various Marketing Cloud Journeys. This is great for extreme personlizations like abandoned cart content, birthdays and anniversaries, and much much more.
In this video I show how we use a Birthday Journey with a coupon banner to show to a user who is part of the “Birthday Journey with Coupon” journey.
We also show how you can use the CoreMedia studio to easily control multiple personalized banners for several different journeys. Putting this powerful personalization capability in the hand of editors with zero programming… awesome.
This demo jam shows how you can use the same CoreMedia Studio functions you use on a B2C site but in a B2B context featuring HCL B2B Commerce and the Aurora B2B Store.
Make sure you come see HCL B2B Commerce at B2B.Next in Chicago next month. I will be there and I would love to show you how well CoreMedia does B2B. Make sure you come to Booth 604 and see the HCL Commerce with CoreMedia demo!
Because Druid does so much for you, you could actually run different campaigns using completely different data sources that are stored and indexed in Druid. Imagine running a campaign for “Hottest Items Last Fall” or “Seasons top sellers”. This would produce a product shelf similar to this on your eCommerce site:
Those products could have been returned by Druid in real time, sorting the resulting SKU’s by order value, quantity sold and even filtered for things like shopper attributes (age, gender, location).
Druid let’s you store as many data sources as you want, so you could actually build dynamic components in CoreMedia that can run the same campaigns on different data sources. This could be used for different brands and their SKU’s or even seasonal order data.
For my use case, this means you could essentially push order line item data into Druid and get fast queries for product shelves like “Top Sellers“, “Top Weekend Sales“, or even “This weeks hits” – all based on the order line sales and the time and date stamp of the order.
Pushing this line item level order information should be trivial for most order management systems. I started to ask myself what data would I actually need to satisfy a few use cases. So I started writing some use cases down as one liners:
That is all pretty standard information you can get from a PO. What is not part of that is the customer demographic information. Because Druid performs best with flat data we will most likely have to write a routine that combines order line data with customer attribute data. We could include fields like these (if they are known):
“age”, “region”,“gender”:
This would allow us to ask Druid many different queries and get the proper response. In the CoreMedia extension model this should really be a returned list of SKU’s that we can map to the current product catalog. Some error handling or SKU replacement code might be needed; especially if you are running against year old data. Hopefully for more current campaigns like “Hottest Weekend Products” or “What’s hot this month” the data and SKUs very up to date. The resulting JSON sent in for each row would look like this:
Sending in each order line item separately will allow Druid to actually dynamically build orders, return SKU’s based on any time and date combination, bloom filters, numeric expression, and of course grouping (total sales for a single SKU)- link.
I created a dataset with six months of order data, broken out by each line item as described above. It ended up being 431,148 line items created for 4,323 SKU’s in 300,000 orders
I went ahead and created queries for each of those use cases and I find Druid is extremely fast (more on that in Part 2), even when running on my local machine. Check out the slide show below for the various ways you can use SQL (or JSON) to query Druid. The real power comes with the way Druid can quickly return rows and run on functions like TIME_EXTRACT. Each query essentially returns a list of SKU’s ordered descending from either a total sales count or an items sold count.
This slideshow requires JavaScript.
Stay tuned for part 2 where I show how easy these kinds of dynamic product shelves based on sales and shopper data can be integrated into CoreMedia Studio. I will also show a demonstration where Apache Druid is accessed in realtime from our Studio where the maketing person can easily preview this dynamic behavior. A little teaser showing how the authoring environment (Preview CAE) and the runtime environment could access the same Druid data, giving marketers the same products as the shoppers would see.
I am really interested in hearing your thoughts on this, send me an email or leave a comment!
This post was inspired by the Tweetable Text CK Editor plugin by ardnet. One of my awesome colleagues, Drew Bowers, took the idea and extended the CoreMedia Studio with a similar plugin. This plugging allows readers to click on a line of text, which then launches Twitter and prepares a Tweet with the quoted text and a link back to the original article. The extension is fairly straightforward and mostly in CSS and JavaScript.
Here is a quick tutorial in getting the Tweet Text plugin up and running into your CoreMedia Studio environment as well as in the runtime (the Content Application Engine or otherwise known as the CAE):
Presumptions: Knowledge on how to add a new generic extension to studio & studio development
In this step, the studio-plugins are created that load the ckeditor content
For this a driver plugin is needed that loads the menu code & ckeditor plugin
Note: The naming convention is important! Make sure that the <fx:Script> sections of each .mxml file have the proper variable & function name set (it should just be the name of the plugin without extension). CM Studio relies on these definitions to build the connection between the runtime and plugins.
1. In the package com/coremedia/blueprint/twitterckeditor /studio:
These 3 plugin files & the manifest tell the Studio runtime that a new plugin has been added to the RichTextArea (aka the CK Editor) and that it is to utilize the toolbar code plugin (MyPluginCkEditorMenuPlugin.mxml)
2. Now build the Studio Webapp via maven: mvn clean install -pl :studio-webapp -am -DskipTests
This step could take 7-10mins depending on the hardware
3. Run studio if the build was successful: mvn tomcat7:run inside of modules/studio/studio-webapp
Note: optionally provide the -Dinstallation.host=<url of local/remote host> to run studio against another environment. Local studio version and remote studio version need to be the same version (i.e 1901, 1904, etc)
4. Check if plugin was loaded (in this case the Twitter Icon shows on the richtext toolbar for CMArticles)
5. Once the plugin is loaded, all that’s left is to make sure that the actual javascript logic functions properly inside the studio plugin (this can be troubleshot quickly through browser tools).
Specific Customizations for Tweetable Text
As part of the integration work done for this specific plugin, the default logic of the plugin needed to be revised to better work within the CoreMedia studio. All this frontend work was done utilizing the CoreMedia frontend workflow, that easily lets developers create & modify their themes/frontend logic without having to rebuild the entire Content Application Engine. This workflow utilizes yarn to automatically push updated webpacks to the CoreMedia host server whenever changes are made to the files!
CKEDITOR.plugins.add('tweetabletext', {
icons: 'tweetabletext',
beforeInit: function () {
},
init: function(editor) {
//editor.addCommand('tweetabletext', new CKEDITOR.dialogCommand('tweetabletextDialog'));
editor.addCommand('tweetabletext', new CKEDITOR.command(editor, {
exec: function(editor) {
var selection = editor.getSelection();
var range = selection.getRanges()[ 0 ];
var html = "";
var className = range.startContainer.$.className;
if (className !== "tweetabletext") {
// if text isnt already 'tweetable', mark it as tweetable and insert new HTML
var textToWrap = selection.getSelectedText();
html = '<a class="tweetabletext" _xlink:href="#">';
html += textToWrap + '</a>';
//html += '<img src="' + iconPath + ' alt="twitter icon" >';
} else {
// set new html to be the inside text of selection with tweetable status
html = getSelectionHtml();
}
// clean old tweetabletext instances
$(".tweetabletext").each(function() {
var value = $(this).text();
if(value == null || value.length === 0 || value === ' ' || value === " ") {
$(this).remove();
}
});
// insert new selection
editor.insertHtml(html);
}
}));
//editor.addCommand('untweetabletext', new CKEDITOR.unlinkCommand());
editor.ui.addButton('TweetableText', {
label: 'Insert TweetableText',
command: 'tweetabletext',
toolbar: 'insert'
});
if (typeof editor.config.contentsCss === 'object') {
editor.config.contentsCss.push(CKEDITOR.getUrl(this.path + 'css/tweetabletext.css'));
}
}
});
function getSelectionHtml() {
var html = "";
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount) {
var container = document.createElement("div");
for (var i = 0, len = sel.rangeCount; i < len; ++i) {
container.appendChild(sel.getRangeAt(i).cloneContents());
}
html = container.innerHTML;
}
} else if (typeof document.selection != "undefined") {
if (document.selection.type == "Text") {
html = document.selection.createRange().htmlText;
}
}
return html;
}
For this exercise we have streamlined the main plugin.js file to contain all logic necessary to mark the text as tweetable
The code below is the js code that is invoked when the studio-user selects the twitter button
We also added appropriate front end logic (the end user site) to facilitate the opening of the Twitter link
First was to create a new ‘brick’ within the frontend workspace. In CoreMedia, bricks serve as generic frontend logic packages, usually a specific brick for each layout in the system. These bricks are typically available across all sites and e-commerce systems regardless of the theme used, so this is the best place to put this logic.
The project files to the right are located within:
<workspace>/modules/frontend/lib/bricks
The twitter-richtext.js contains all the on-click logic for the tweetable text:
//import * as logger from "@coremedia/js-logger";
import $ from "jquery";
/**
* Displays a simple text in the console.
*
* @function consolePrint
* @param {String} $text - The text to be displayed in the console.
*/
export function consolePrint($text) {
// logger.log($text);
}
$(function() {
// abowers - added to support frontend useage of twitter extension
$(".tweetabletext").on("click", function (e) {
let twitterBaseUrl = 'http://twitter.com/intent/tweet?text=';
let text = e.target.innerText + "\n\n" + window.location.href;
text = encodeURI(text);
twitterBaseUrl += text;
let win = window.open(twitterBaseUrl, '_blank');
if (win) {
//Browser has allowed it to be opened
win.focus();
} else {
//Browser has blocked it
alert('Please allow popups for this website');
}
});
});
The CSS utilizes the standard CoreMedia frontend development framework of SCSS to build out the needed CSS logic in a modular format. All the CSS for the frontend for this module is in _tweetable-text.scss. The _partials.scss file imports the tweetable text scss, and they are compiled by the yarn workflow into regular CSS.
The next step is to compile the new brick with the following commands, ran inside of the brick’s folder
yarn –production run
yarn install
The last steps are to update the site theme to utilize the new brick code. This is done inside of the package.json inside of the theme folder. Add the line in bold to your theme dependencies block in the json:
In this quick three minute tutorial I show a CoreMedia Studio extension my team put together based on a CK Editor plugin that enables editors to tag lines of text in articles to be “tweetable” by the reader. A sample would be: this gives your readers an easy way to tweet quotes from your articles!
Stay tuned here for a tutorial for this extension with source code and be sure to subscribe to my new YouTube Channel: CoreMedia Demo Jams!
Last week, at Salesforce Connections, I got the opportunity to listen to Brian Fortier of Deckers Brands (UGG, Hoka One One, Sanuk and Teva) tell how they used CoreMedia to deliver relevant and in the moment content, improve their speed to market, and decrease developer dependency for a race campaign they ran for their running shoes – Hoka One One. I took a few pictures of Brian telling his amazing story at the event (see below).
Imagine delivering 12 hours of live streaming on the home page and switching that home page three times in less than 12 hours – I would argue that most companies could not do this. Have six landing pages with race results and serving over 250,000 visitors. Site performance, cache invalidation, and limiting dependecy on developers were just a few of the factors in play here.
Being able to achieve this velocity requires a tool that is driven by business people for the quickest results. Relying on developers to deliver this experience is a thing of the past. Businesses require speed and agility to react to real-time events, this is exactly what CoreMedia Content Cloud was designed for. Such a great story and I am glad I got to hear it!
Then you need to come to the CoreMedia booth (#20) at Salesforce Connections in Chicago! Red Hots, Wrigley Field and real Salesforce insights. That’s summer in Chicago with Salesforce Connections, taking place Jun 17-19, 2019 at McCormick Place West. I will be at the booth and would love to give you a personal demonstration of our CoreMedia Content Cloud.
Let’s plan to connect so I can show you how to bring your product stories to life across a seamless customer journey with our Content Cloud platform.
Just to give you a taste for how great CoreMedia is with Salesforce, take a look at some material I posted on LinkedIn.
If you don’t have or use LinkedIn then you can take a look at my Made Easy with CoreMedia video series on YouTube where I have a collection of videos showing how easy digital experience can be with a first class brand management system.
Are you ready to hear how you can move forward with IBM Commerce? Do you have questions about your options for maximizing your investment? If so, join Brent Murray from CoreMedia and Rick Miller from Zilker in this 30 minute webinar and hear how your brand can be iconic with IBM Commerce, CoreMedia and Zilker!
Seize the Opportunity to Maximize your IBM Commerce Investment
Thur Jun 20, 2019 • 1-1:30 pm Eastern
Investing in IBM’s eCommerce platform was smart. But the recent divestiture of WebSphere Commerce to HCL likely raises some questions. What can you do to keep your WebSphere Commerce investment on track and moving forward?