Alternating Mobile-First Layout in Bootstrap 4

By using the order- prefix you can start with a stacked, mobile-first layout.. then at a larger screen size essentially push and pull the blocks of content using the order prefix.

https://getbootstrap.com/docs/4.0/layout/grid/

Bootstrap 3 allowed you to use push and pull prefixes, those classes are gone in the latest version of bootstrap. Now, you’ll need to use the .order- prefix to alternate the layout of our page content.

Here’s an example of how it works.

 <div class="container">
  <section class="row">
    	<div class="col-xs-12 col-md-6 order-md-2"><p>1st on small; right on larger screens</p></div>
    	<div class="col-xs-12 col-md-6 order-md-1"><p>bottom on small; left on large</p></div>
 </section>
</div>

 

Chris DrinkutTags: , , Setting Up Google Analytics Event Tracking

Ever visit the Goals or Events Reports in Google Analytics (GA) and wonder how those got there? Let’s talk through it with the quick demo of how to setup event tracking and goals in GA.

⇜ ⇺ ⇽ ✰ ➳ ➯ ➺ 

Event tracking is helpful in monitoring all sorts of event types.
These include:

In this demo we’ll setup an onclick event to track and tie that in to a GA goal we setup.

The Markup

There are various attributes we can add to our event, these include (a) label, (b) category, (c) event, and (d) one other.

To initially send the information to GA, we’ll use the following setup:

<!-- Here is the raw language, this will be put it an href -->
onClick="ga(‘send’, ‘event’, ‘category’, ‘action’, ‘label’, value, {‘NonInteraction’: 1});"


<!-- Here's the code from above, but plugged into an href -->
<a href="www.example.com" onClick="ga('send', 'event', 'category', 'action', 'label');">


<!-- Here's something that is more or less ready to use -->
<a href="www.example.com" onClick="ga('send', 'buttonClick', 'specialOffer', 'requestCoupon', 'productA');">
<!-- end -->

Try It Out

With the link above on a page, for instance this one, we should now be able to get into GA and start to see the events being tracked.

TRACK IT

Each time this button is clicked we should see an account of it in the GA Real-Time Reports dashboard in the events area.

google analytics event tracking real-time dashboard test

real-time dashboard test

BUT! Perhaps, you want to do this using jQuery instead. Eh? Alright, let’s do that one too.

Track Click Events in GA Using jQuery

There are a couple of parts.

  1. Include an id or a class on your link(s)
  2. Include jQuery
  3. Send the information to GA

Here we go.

<!-- Draft up a link, or more than one if you like. --->
<a id="link" href="#">LINK</a>
<a id="button" href="#"><button>Button</button></a>
<a id="other-jazz" href="#">Other Jazz</a>


<!-- Be sure you've got jQuery piping through things --->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<!-- Call and do all of that JS/JQ weirdness --->
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#link').click(function() {
 ga('send', 'event',  'onpage-click', 'linkClick', 'happened');
});
jQuery('#button').click(function() {
 ga('send', 'event',  'onpage-click', 'buttonClick', 'happened');
});
jQuery('#other-jazz').click(function() {
 ga('send', 'event',  'onpage-click', 'otherClick', 'happened');
});
});
</script>

How’s about a little demo? 

LINK

Other Jazz

 

Success!

analytics-w-jquery

This post presumes you’re using Universal Analytics. If you’re using a newer or an older version of GA, you’ll need to have the mark-up that goes along with it. GA is (as of 9/22.17) pushing users to Google Tag Manager. The latest tracking snippets provided by GA include a reference to Google Tag Manager.

Resources:

https://developers.google.com/analytics/devguides/collection/analyticsjs/events

—http://convergeconsulting.org/2014/03/05/event-tracking-in-google-analytics-using-jquery-in-6-steps/

That’s it. Ω

Chris Drinkut 2017 Priorities for SEOs

So, the end of the year is approaching. We’ll soon be feasting fork over knife, then opening presents, then saying, “I can’t believe it’s Spring already” – you know the drill.

For now, we can take a minute to reflect on the year behind and the year ahead. And, if you like, let’s consider it through the lens of an SEO. What of importance has happened, and what is likely still to happen that impacts our worlds?

A pretty serious shift this year toward AI has happened. While that may have influence via personal assistants, it’s still a very green field. As far as 2017 is concerned, I believe these the areas SEOs need to focus on in the year ahead:

  1. Preparing for voice search
  2. Taking a continued look into local search results
  3. Rewiring page code to be screaming fast
  4. Marking sites up with schema

1. Get ready for Voice Search

According to ComScore 50% of searches in 2020 will come from voice search. 

With semantic search, Google’s algorithm forced us to begin being less focused on one keyword phrase and to consider a broader approach. Include synonyms, speak topically. Be useful.

Being useful has – arguably – been not simply a search manifestation, but a marketing manifestation. With millennials we have a generation larger or as large as any alive. One that also has – like the rest of us – found itself to be tired and untrusting of corporate advertising messages. Bored and ‘done’ with corporate-speak – this generation is looking for brands that can be helpful, human, and handy. I can’t stress that enough. Authentic, genuine, real. Time has come. … Make your content conversational. Write how you speak. It’ll pay dividends with voice search, and with millennials and anyone else looking for a real voice.

2. Continue to Optimize for Local SERP

Continue to look into local search engine results pages (SERP). Things continue to change there, and depending on your type of business this could be a pretty serious battleground.

There are a whole host of variables that play into ranking in local search engine results. Furthermore there are many great articles out there to provide timely insight as to how to optimize for local search engine results.

map-trial

Monitoring (and mobilizing on) these things in 2017, I believe, will continue to be a priority for SEOs.

3. Continue to Model a Mobile First-Mindset

Make your pages screaming fast (and optimized for all users). We’ve know for a while to put the mobile experience first. Google made their preference for a mobile-mindset through a variety of updates this year. 

4. Elevate Your Schema Game

We’ve seen more and more happening directly in SERP, and will continue to do so.

At-large, schematic markup (which involves applying additional markup for Google to better understand and further showcase page content) is helping inform and colorize general search SERP as well as the aforementioned local SERP.

Instant answers, the knowledge graph, and rich snippets continue to push the envelope on what is bound to show up in text-driven SERP.

The most current recommendation from Google on schema is to use the JSON version. As of November 21, 2016 – restaurants now have their own rich cards.

SEOs need to be familiar with AMP and schema in 2017. No question about it. AMP and schema are being used together in some instances; and Google, in 2017, is set to make it’s index mobile-first. Getting very familiar with AMP, in its current and more than likely continuing to evolve states, is something SEOs should be doing now and into 2017.  

There you have it. We could throw in a note or two about optimizing and including images in your search + content creation plans. Strategize having relevant images to offer the world and search engines.

Too, we could touch on the (6 years in a row) declaration that video is set to explode; and discuss the value of such a rich media, but let’s end here.

We’ve got plenty to do with the main four notes above.

Keep in mind these trends are only directional anyway, each of those areas is likely to continue to grow, expand, and tighten in the next week, month, and quarter. Get ready. Take 2017 by the horns.  

If you’re an SEO, webmaster or marketer looking to dive into the particulars of some of the items shared above, here are some good resources to get you started.

Google’s recent blog post and introduction to resturant-specific rich cards: https://developers.google.com/search/docs/data-types/local-businesses#restaurant-lists

Google’s documentation and testing tools for developing schematic pages. https://search.google.com/structured-data/testing-tool/u/0/

A great AMP by example resource: https://ampbyexample.com/

An index of all things schema: http://schema.org/docs/gs.html

Chris Drinkut Chatbot Watch: August 2016 Roundup

What’s new and news in the world of Chatbots? Here are a few articles discovered recently, as of early September, 2016.

Chatbot Roundup

– Curated and Summarized Reads
Article #1
Why WingStop is Betting Big on Chatbots 

Kevin Fish of WingStop has written an article published in VentureBeat that reads a bit like a pitch to the C-suite, albeit – they are in the F-ing space y’all. Getting into bots at the brand level has my esteem. While, I’d love to hear more about the particulars, (to really test this thing out) and to have a patient, long-view chat with Kevin about their vision, plan, and results – the article provides some insight into their plans on developing Wingbot (which has actually been difficult for me to find) and for reaching millennials ‘where they are’.

Here are a few quotes from the article:

Wingstop provides FAQs and an ordering system in the bot, which is what millennials are demanding.

chatbot-wingstop

Restaurant brands have it particularly tough when compared to top-of-mind apps like Facebook, Netflix, Pandora, email, photos, and videos. The space occupied by daily-use apps makes it increasingly difficult for a less frequently used food-ordering app to earn that prized spot on the home screen. That doesn’t mean mobile apps don’t have a solid place in ecommerce strategy; rather, it just reinforces that brands must continue to find innovative, additive ways to fuel the growth of their digital ecosystems.

Facebook is calling the shift toward chat an “evolution of conversation,” and they presented a multitude of statistics earlier this month to support that assessment. The one that stands out the most? In July, the company surpassed one billion active users on Facebook Messenger. The rise of this and other chat-based platforms, like Slack, is a clear indication that the most convenient way of communicating is informal conversation and chat. The rise of chat as a transitory typed digital medium mirrors the succinctness of a quick phone conversation, as opposed to a carefully crafted email or formal meeting.

Article #2
What the Guardian Has Learned from Chatbots 

Apparently, the Guardian (newspaper) has tested a chatbot that helps readers determine what to cook. A nifty little bot, the Sous Chef enables users to provide a list of what’s in their cupboards and refrigerators and the bot will provide them recipe ideas based on the ingredients they have.

Hear tell, the recipe bot was a test to gather information and insights to help construct another bot that the Guardian plans to release.

More on Chatbots  

 

Chris Drinkut