Category: Uncategorized

Animating React Components With GreenSock

During the early days of the World Wide Web, things were rather static and boring. Webpages were mostly based on graphic design and layouts from the print world until animations were introduced. Animation can engage and hold people’s attention longer than a static web page and communicates an idea or concept more clearly and effectively.

However, when not done right, animations can hamper user interactions with your product and negatively impact traction. The GreenSock Animation Platform AKA (GSAP) is a powerful JavaScript library that enables front-end developers, animators and designers to create performant timeline based animations. It allows animation lovers take precise control of their animation sequences rather than the sometimes constraining keyframe and animation properties that CSS offers.

In this article, I’ll introduce you to some features of GSAP such as scrollTriggers, Timelines, Easing etc, at the end we’ll build an intuitive user interface by animating a React app with this features👌. Check out the finished project on codesandbox.

This article will be useful to you if:

  • You have been building animations on web applications with HTML, CSS, and JavaScript.
  • You are already building animated webpages in a React apps with packages like animate.css, React-motion, Framer-motion, and React-Spring, plus you want to check out alternatives.
  • You are a React enthusiast, and you’d like to build complex animations on React-based web applications.

We will look at how to build a variety of animations from an existing web project. Let’s get to it!

Note: This article assumes you are comfortable with HTML, CSS, JavaScript, and React.js.

What Is GSAP?

GreenSock Animation Platform also known as GSAP is an Ultra high-performance, professional-grade animation for the modern web that allows developers to animate their apps in a modular, declarative, and re-usable fashion. It is framework-agnostic and can be used across any JavaScript based project, it has a very minimal bundle size and will not bloat your app.

GSAP can perform canvas animations, used to create WebGL experiences, and create dynamic SVG animations and as great browser support.

Why Use GSAP?

Maybe you’re not quite ready to betray other frameworks yet, or you haven’t been convinced to embrace the goodies that come with GSAP. Allow me to give you a few reason why you may want to consider GSAP.

You Can Build Complex Animations

GSAP JavaScript library makes it possible for developers to build simple to very complex physics-based animations like in the case of these sites, it allows developers and designers sequence motion and controls the animation dynamically. It has lots of plugins such as DrawSVGPlugin, MorphSVGPlugin, and more, which makes creating SVG based animations and 2D/3D animations a reality. Asides integrating GSAP on DOM elements, you can use them within WebGL/Canvas/ Three.js context-based animations.

Furthermore, the easing capacity of GSAP is quite sophisticated, hence making it possible to create advance effects with multiple beziers as compared to the regular CSS animation.

Performance

GSAP has an impressive high performance across different browsers.

According to GSAP’s team, in their website, “GSAP is 20x faster than jQuery, plus GSAP is the fastest full-featured scripted animation tool on the planet. It’s even faster than CSS3 animations and transitions in many cases.” Confirm speed comparison for yourself.

Furthermore, the GSAP animations perform effortlessly on both desktop computers, tablets, and smartphones. It is not needed to add a long list of prefixes, this is all being taken care of under the hood by GSAP.

You can check out more benefits on GSAP or see what Sarah Drasner as to say about it here.

Cons Of GSAP

Are you saying I should always use GSAP for every project? Of course not! I feel like, there’s only one reason you might not want to use GSAP. Let’s find out!

  • GSAP is solely a JavaScript-based animation library, hence it requires some knowledge of JavaScript and DOM manipulation to effectively utilize its methods and APIs. This learning curve downside leaves even more room for complications for a beginner starting out with JavaScript.
  • GSAP doesn’t cater to CSS based animations, hence if you are looking for a library for such, you might as well use keyframes in CSS animation.

If you’ve got any other reason, feel free to share it in the comment section.

Alright, now that your doubts are cleared, let’s jump over to some nitty-gritty in GSAP.

GSAP Basics

Before we create our animation using React, let’s get familiar with some methods and building blocks of GSAP.

If you already know the fundamentals of GSAP, you can skip this section and jump straight to the project section, where we’ll make a landing page skew while scrolling.

Tween

A tween is a single movement in an animation. In GSAP, a tween has the following syntax:

TweenMax.method(element, duration, vars)

Let’s take a look at what this syntax represents;

  1. method refers to the GSAP method you’ll like to tween with.
  2. element is the element you want to animate. If you want to create tweens for multiple elements at the same time, you can pass in an array of elements to element.
  3. duration is the duration of your tween. It is an integer in seconds (without the s suffix!).
  4. vars is an object of the properties you want to animate. More on this later.

GSAP methods

GSAP provides numerous methods to create animations. In this article, we’d mention only a few such as gsap.to, gsap.from, gsap.fromTo. You can check out other cool methods in their documentation. The methods discussed in this section will be used in building our project later in this tutorial.

  • gsap.to() the values to which an object should be animated i.e the end property values of an animated object — as shown below:
    gsap.to('.ball', {x:250, duration: 5})

To demonstrate the to method the codepen demo below shows that an element with a class of ball 250px will move across the x-axis in five seconds when the components mounts. If a duration isn’t given, a default of 500 milliseconds would be used.

See the Pen GSAP REACT DEMO1 by Blessing Krofegha.

Note: x and y-axis represent the horizontal and vertical axis respectively, also in CSS transform properties such as translateX and translateY they are represented as x and y for pixel-measured transforms and xPercent and yPercent for percentage-based transforms.

To view the complete snippet of the code check the codepen playground.

  • gsap.from() — Defines the values an object should be animated from — i.e., the start values of an animation:
    gsap.from('.square', {duration:3, scale: 4})

The codepen demo show how an element with a class of square is resized from a scale of 4 in 3seconds when the components mounts. Check for the complete code snippet on this codepen.

See the Pen GSAP REACT DEMO2 by Blessing Krofegha.

  • gsap.fromTo() — lets you define the starting and ending values for an animation. It is a combination of both the from() and to() method.

Here’s how it looks;

gsap.fromTo('.ball',{opacity:0 }, {opacity: 1 , x: 200 , duration: 3 });
gsap.fromTo('.square', {opacity:0, x:200}, { opacity:1, x: 1 , duration: 3 });

This code would animates the element with a class of ball from an opacity of 0 to an opacity of 1 across the x-axis in 3 seconds and the square class is animated the from an opacity of 0 to 1 in 3 seconds across the x-axis only when the component mounts. To see how the fromTo method works and the complete code snippet, check the demo on CodePen below.

See the Pen React GSAP FromTo demo by Blessing Krofegha.

Note: Whenever we’re animating positional properties, such as left and top, we must ensure that the elements concerned must have a CSS position property of either relative, absolute, or fixed.

Easing

GSAP official documentation defined easing as the primary way to change the timing of your Tweens. It determines how an object changes position at different points. Ease controls the rate of change of animation in GSAP and is used to set the style of an object’s animation.

GSAP provides different types of eases and options to give you more control over how your animation should behave. It also provides an Ease Visualizer to help you choose your preferred ease settings.

There are three types of eases, and they vary in their operations.

  1. in() — Motion starts slowly, then picks up the pace toward the end of the animation.
  2. out() — The animation starts fast then slows down at the end of the animation.
  3. inOut() — The animation begins slow, picks up the pace halfway through, and ends slowly.

See the Pen React GSAP Easing demo by Blessing Krofegha.

In these easing example, we chained the tweens that displayed the three types of eases bounce.in, bounce.out and bounce.inOut, and set a delay of the number of seconds it takes the animation to complete before starting the next one only when the component is mounts. This pattern is repetitive, in the next next section we would see how we could use a timeline to do this better.

Timelines

A Timeline acts as a container for multiple tweens. It animates tweens in sequential order, and it is not dependent on the duration of the previous tween. Timeline makes it simple to control tweens as a whole and precisely manage their timing.

Timelines can be written by creating an instance of a timeline like so:

gsap.timeline();

You can also chain multiple tweens to a timeline in two different ways, in the code below:

##Method 1
const tl = gsap.timeline(); // create an instance and assign it a variable
tl.add(); // add tween to timeline tl.to('element', {});
tl.from('element', {}); ##Method 2
gsap.timeline() .add() // add tween to timeline .to('element', {}) .from('element', {})

Let’s recreate the previous example with a timeline:

const { useRef, useEffect } = React; const Balls = () => { useEffect(() => {
const tl = gsap.timeline(); tl.to('#ball1', {x:1000, ease:"bounce.in", duration: 3}) tl.to('#ball2', {x:1000, ease:"bounce.out", duration: 3, delay:3 }) tl.to('#ball3', {x:1000, ease:"bounce.inOut", duration: 3, delay:6 }) }, []); } ReactDOM.render(, document.getElementById('app'));

Inside a useEffect hook, we created a variable(tl) that holds an instance of a timeline, next we used the tl variable to animate our tween in sequential without depending on the previous tween to animate, passing the same properties as it were in the previous example. For the complete code snippet of this demo check the codepen playground below.

See the Pen React GSAP (Easing with Timeline) demo by Blessing Krofegha.

Now that we have gotten a feel of some the basic building blocks of GSAP, let’s see how we could build a complete animation in a typical React app in the next section.
Let’s begin the flight! 🚀

Building An Animated Landing Page With React And GSAP

Let’s get to animate a React App. Ensure you clone the repo before you begin and run npm install in order to install the dependencies.

What Are We Building?

Currently, our landing page contains a few texts a white background, a menu that doesn’t drop down, with really no animation. The following are what we’ll be adding to the landing page;

  • Animate the text and the logo on the homepage, so it eases out when the component is mounted.
  • Animate the menu, so it drops down when the menu is clicked.
  • Make the images in the gallery page skew 20deg when the page scrolls.

Animated page.

Check out the demo on codesandbox.

We’ll break the process of our landing page into components, so it will be easy to grasp. Here’s the process;

  • Define the animation methods,
  • Animate text and logo,
  • Toggle menu,
  • Make images skew 20deg on page scroll.

components

  • Animate.js — Defined all animation methods,
  • Image.js — import galley images,
  • Menu.js — Contains the menu toggle functionality,
  • Header.js — Contains navigation links.

Define animation methods

Create a component folder inside the src directory, and create an animate.js file. Copy and paste the following code into it.

import gsap from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger";
//Animate text export const textIntro = elem => { gsap.from(elem, { xPercent: -20, opacity: 0, stagger: 0.2, duration: 2, scale: -1, ease: "back", });
};

Here, we imported gsap . We wrote an exported arrow function that animates the text on the landing page. Remember that gsap.from() method defines the values an object should be animated from. The function has an elem parameter that represents the class which needs to be animated. It takes a few properties and assigns values such as xPercent: -20 (transforms the object by -20%), gives the object no opacity, makes the object scale by -1, makes the object ease back in 2sec.

To see if this works, head over to App.js and include the following code.

...
//import textIntro
import {textIntro} from "./components/Animate" ...
//using useRef hook to access the textIntro DOM let intro = useRef(null) useEffect(() => { textIntro(intro) }, []) function Home() { return ( <div className='container'> <div className='wrapper'> <h5 className="intro" ref={(el) => (intro = el)}></h5> The <b>SHOPPER</b>, is a worldclass, innovative, global online ecommerce platform, that meets your everyday daily needs. </h5> </div> </div> );
}

Here, we import the textIntro method from the Aminate component. To access the DOM we used to useRef Hook. We created a variable intro whose value is set to null. Next, inside the useEffect hook, we called the textIntro method and the intro variable. Inside our home component, in the h5 tag, we defined the ref prop and passed in the intro variable.

Animated text.

Next, we have got a menu, but it isn’t dropping down when it’s clicked. Let’s make it work! Inside the Header.js Component, add the code below.

import React, { useState, useEffect, useRef } from "react";
import { withRouter, Link, useHistory } from "react-router-dom";
import Menu from "./Menu";
const Header = () => { const history = useHistory() let logo = useRef(null); //State of our Menu const [state, setState] = useState({ initial: false, clicked: null, menuName: "Menu", }); // State of our button const [disabled, setDisabled] = useState(false); //When the component mounts useEffect(() => { textIntro(logo); //Listening for page changes. history.listen(() => { setState({ clicked: false, menuName: "Menu" }); }); }, [history]); //toggle menu const toggleMenu = () => { disableMenu(); if (state.initial === false) { setState({ initial: null, clicked: true, menuName: "Close", }); } else if (state.clicked === true) { setState({ clicked: !state.clicked, menuName: "Menu", }); } else if (state.clicked === false) { setState({ clicked: !state.clicked, menuName: "Close", }); } }; // check if out button is disabled const disableMenu = () => { setDisabled(!disabled); setTimeout(() => { setDisabled(false); }, 1200); }; return ( <header> <div className="container"> <div className="wrapper"> <div className="inner-header"> <div className="logo" ref={(el) => (logo = el)}> <Link to="/">SHOPPER.</Link> </div> <div className="menu"> <button disabled={disabled} onClick={toggleMenu}> {state.menuName} </button> </div> </div> </div> </div> <Menu state={state} /> </header> );
};
export default withRouter(Header);

In this component, we defined our menu and button state, inside the useEffect hook, we listened for page changes using useHistory hook, if the page changes we set the clicked and menuName state values to false and Menu respectively.

To handle our menu, we checked if the value of our initial state is false, if true, we change the value of initial , clicked and menuName to null, true and Close. Else we check if the button is clicked, if true we’d change the menuName to Menu. Next, we have a disabledMenu function that disables our button for 1sec when it’s clicked.

Lastly, in our button, we assigned disabled to disabled which is a boolean value that will disable the button when its value is true. And the onClick handler of the button is tied to the toggleMenu function. All we did here was toggle our menu text and passed the state to a Menu component, which we would create soonest. Let’s write the methods that will make our menu dropdown before creating the actual Menu component. Head over to Animate.js and paste this code into it.

....
//Open menu
export const menuShow = (elem1, elem2) => { gsap.from([elem1, elem2], { duration: 0.7, height: 0, transformOrigin: "right top", skewY: 2, ease: "power4.inOut", stagger: { amount: 0.2, }, });
};
//Close menu
export const menuHide = (elem1, elem2) => { gsap.to([elem1, elem2], { duration: 0.8, height: 0, ease: "power4.inOut", stagger: { amount: 0.07, }, });
};

Here, we have a function called menuShow, which skews the menu horizontally by 2degrees, eases the menu, offset’s the animation using the stagger property, and transforms the menu from right to top in 0.7sec, the same properties go for the menuHide function. To use these functions, create Menu.js file inside the components and paste this code into it.

import React, {useEffect, useRef} from 'react'
import { gsap } from "gsap"
import { Link } from "react-router-dom"
import { menuShow, menuHide, textIntro,
} from './Animate'
const Menu = ({ state }) => { //create refs for our DOM elements let menuWrapper = useRef(null) let show1 = useRef(null) let show2 = useRef(null) let info = useRef(null) useEffect(() => { // If the menu is open and we click the menu button to close it. if (state.clicked === false) { // If menu is closed and we want to open it. menuHide(show2, show1); // Set menu to display none gsap.to(menuWrapper, { duration: 1, css: { display: "none" } }); } else if ( state.clicked === true || (state.clicked === true && state.initial === null) ) { // Set menu to display block gsap.to(menuWrapper, { duration: 0, css: { display: "block" } }); //Allow menu to have height of 100% gsap.to([show1, show2], { duration: 0, opacity: 1, height: "100%" }); menuShow(show1, show2); textIntro(info); } }, [state]) return ( <div ref={(el) => (menuWrapper = el)} className="hamburger-menu"> <div ref={(el) => (show1 = el)} className="menu-secondary-background-color" ></div> <div ref={(el) => (show2 = el)} className="menu-layer"> <div className="container"> <div className="wrapper"> <div className="menu-links"> <nav> <ul> <li> <Link ref={(el) => (line1 = el)} to="/about-us" > About </Link> </li> <li> <Link ref={(el) => (line2 = el)} to="/gallery" > Gallery </Link> </li> <li> <Link ref={(el) => (line3 = el)} to="/contact-us" > Contact us </Link> </li> </ul> </nav> <div ref={(el) => (info = el)} className="info"> <h3>Our Vision</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit.... </p> </div> </div> </div> </div> </div> </div> );
}
export default Menu

What we did in the Menu component was to import the animated functions, which are menuShow, menuHide, and textIntro. Next, we assigned variables for each created refs for our DOM elements using the useRef hook and passed null as their values. Inside the useEffect hook, we check for the state of the menu, if clicked is false, we call the menuHide function, otherwise, if the clicked state is true we call the menuShow function. Lastly, we ensured that the DOM elements concerned are passed their specific refs which are menuWrapper, show1, show2. With that, we’ve got our menu animated.

Let’s see how it looks.

Animated Menu.

The last animation we would implement is make our images in our gallery skew when it scrolls. Let’s see the state of our gallery now.

Gallery without animation.

To implement the skew animation on our gallery, let’s head over to Animate.js and add a few codes to it.

....
//Skew gallery Images
export const skewGallery = elem1 => { //register ScrollTrigger gsap.registerPlugin(ScrollTrigger); // make the right edge "stick" to the scroll bar. force3D: true improves performance gsap.set(elem1, { transformOrigin: "right center", force3D: true }); let clamp = gsap.utils.clamp(-20, 20) // don't let the skew go beyond 20 degrees. ScrollTrigger.create({ trigger: elem1, onUpdate: (self) => { const velocity = clamp(Math.round(self.getVelocity() / 300)); gsap.to(elem1, { skew: 0, skewY: velocity, ease: "power3", duration: 0.8, }); }, });
}

We created a function called skewGallery, passed elem1 as a param, and registered ScrollTrigger.

ScrollTrigger is a plugin in GSAP that enables us to trigger scroll-based animations, like in this case of skewing the images while the page scrolls.

To make the right edge stick to the scroll bar we passed right center value to the transformOrigin property, we also set the force3D property to true in other to improve the performance.

We declared a clamp variable that calculates our skew and ensures it doesn’t exceed 20degs. Inside the ScrollTrigger object, we assigned the trigger property to the elem1 param, which would be the element that needs to be triggered when we call this function. We have an onUpdate callback function, inside it is a velocity variable that calculates the current velocity and divides it by 300.

Lastly, we animate the element from their current values by setting other values. We set skew to initially be at 0 and skewY to be the velocity variable at 0.8.

Next, we’ve got to call this function in our App.js file.

....
import { skewGallery } from "./components/Animate"
function Gallery() { let skewImage = useRef(null); useEffect(() => { skewGallery(skewImage) }, []); return ( <div ref={(el) => (skewImage = el)}> <Image/> </div> )
} ....

Here, we imported skewGalley from ./components/Animate, created a skewImage ref that targets the image element. Inside the useEffect hook, we called the skewGallery function and passed the skewImage ref as a param. Lastly, we passed the skewImage to the ref to attribute.

You’d agree with me it was such a pretty cool journey thus far. Here’s the preview on CodeSanbox 👇

The supporting repo for this article is available on Github.

Conclusion

We’ve explored the potency of GSAP in a React project, we only scratched the surface in this article, there’s no limit to what you can do with GSAP as it concerns animation.
GSAP’s official website offers additional tips to help you gain a thorough understanding of methods and plugins. There’s a lot of demos that would blow your mind away with what people have done with GSAP. I’d love to hear your experience with GSAP in the comment section.

Resources

  1. GSAP Documentation, GreenSock
  2. The Beginner’s Guide To The GreenSock Animation Platform,” Nicholas Kramer, freeCodeCamp
  3. An Introduction To Animations With Greensock Animation API (GSAP),” Zell Liew

Accessible Machine Learning for SEOs — Whiteboard Friday

Posted by BritneyMuller

Machine learning — a branch of artificial intelligence that studies the automatic improvement of computer algorithms — might seem far outside the scope of your SEO work. MozCon speaker (and all-around SEO genius) Britney Muller is here with a special edition of Whiteboard Friday to tell you why that’s not true, and to go through a few steps to get you started. 

To see more on machine learning from Britney and our other MozCon 2020 speakers, check out this year’s video bundle. 

Get my MozCon 2020 video bundle

Accessible Machine Learning

Click on the whiteboard image above to open a high resolution version in a new tab!

Video Transcription

Hey, Moz fans. Welcome to this special edition of Whiteboard Friday. Today we are taking a sneak peek at what I spoke about at MozCon 2020, where I made machine learning accessible to SEOs everywhere.

This is so, so exciting because it is readily at your fingertips today, and I’m going to show you exactly how to get started. 

So to kick things off, I learned about this weird concept called brood parasites this summer, and it’s fascinating. It’s basically where one animal tricks another animal of the same species to raise its young.

It’s fascinating, and the more I learned about it, the more I realized: oh my gosh, I’m sort of like a brood parasite when it comes to programming and machine learning! I latch on and find these great models that do all the work — all of the raising — and I put in my data and my ideas, and it does things for me.

So we are going to use this concept to our advantage. In fact, I have been able to teach my dad most of these models that, again, are readily available to you today within a tool called Colab. Let me just walk you through what that looks like. 

Models to get you started

So to get started, if you want to start warming up right now, just start practicing clicking “Shift” and then click “Enter”.

Just start practicing that right now. It’s half the battle. You’re about to be firing up some really cool models. 



All right. What are some examples of that? What does that look like? So some of the models you can play with today are things like DeOldify, which is where you repair and colorize old photos. It’s really, really fun. 

Another one is a text generator. I created one with GTP-2 — super silly, it’s this excuse generator. You can manipulate it and make it do different things for you. 

There’s also a really, really great forecasting model, where you basically put in a chunk of time series data and it predicts what the future might have in store. It’s really, really powerful and fun.

You can summarize text, which is really valuable. Think about meta descriptions, all that good stuff. 

You can also automate keyword research grouping, which I’ll show you here in a second. 

You can do really powerful internal link analysis, set up a notebook for that.

Perhaps one of the most powerful things is you can extract entities and categories as Google perceives them. It’s one of my favorite APIs. It’s through Google’s NLP API. I pull it into a notebook, and you basically put the URLs you want to extract this information from and you can compare how your URL compares to competitors.

It’s really, really valuable, fun stuff. So most importantly, you cannot break any of this. Do not be intimidated by any of the code whatsoever. Lots of seasoned developers don’t know what’s happening in some of those code blocks. It’s okay.

Using Colab

We get to play in this environment. It’s hosted in Google Drive, and so there’s no fear of this breaking anything on your computer or with your data or anything. So just get ready to dive in with me. Please, it’s going to be so much fun. Okay, so like I said, this is through a free tool called Colab. So you know how Google basically took Excel and made Google Sheets?

They did the same thing with what’s known as Jupyter Notebooks. So these were locally on computers. It’s one of the most popular notebook environments. But it requires some setup, and it can be somewhat clunky. It gets confused with different versions and yada, yada. Google put that into the cloud and is now calling it Colab. It’s unbelievably powerful.

So, again, it’s free. It’s available to you right now if you want to open it up in a new tab. There is zero setup. Google also gives you access to free GPU and TPU computing, which is great. It has a 12-hour runtime. 

Some cons is that you can hit limits. So I hit the limits, and now I’m paying $9.99 a month for the Pro version and I’ve had no problems.

Again, I’m not affiliated with this whatsoever. I’m just super passionate about it, and the fact that they offer you a free version is so exciting. I’ve already seen a lot of people get started in this. It’s also something to note that it’s probably not as secure or robust as Google’s Enterprise solution. So if you’re doing this for a large company or you’re getting really serious about this, you should probably check out some other options. But if you’re just kind of dabbling and want to explore and have fun, let’s keep this party going. 

Using pandas

All right. So again, this is basically a cloud hosted notebook environment. So one thing that I want to really focus on here, because I think it’s the most valuable for SEOs, is this library known as “pandas”.

Pandas is a data frame library, where you basically run one — or two — lines of code. You can choose your file from your local computer, so I usually just upload CSVs. This silly example is one that I really did run with Google Search Console data.

So you run this in a notebook. Again, I’m sharing this entire notebook with you today. So if you just go to it and you do this, it brings you through the cells. It’s not as intimidating as it looks. So if you just click into that first cell, even if it’s just that text cell, “Shift + Enter”, it will bring you through the notebook. 

So once you get past and once you fire up this chunk of code right here, upload your CSV. Then once you upload it, you are going to name your data frame. 

So these are the only two cells you need to really change or do anything with if you want. Well, you need to. 

So we are uploading your file, and then we are grabbing that file name. In this case, mine was just “gsc-example.csv”. Again, once you upload it, you will see the name in that output here. So you just put that within this code block, run this, and then you can do some really easy lines of code to check to make sure that your data is in there.

So one of the first ones that most people do is “df”. This is your data frame that you named with your file right here. So you just do “df.head()”. This shows you the first five rows of your data frame. You can also do “df.tail()”, and it shows you the last five rows of your data frame.

You can even put in a number in here to modify how many rows you want to explore. So maybe you do “df.head(30)”, and then you see the first 30 rows. It’s that easy just to get it in there and to see it. Now comes the really fun stuff, and this is just tip of the iceberg.

So you can run this really, really cool code cell here to create a filterable table. What’s powerful about this, especially with your Google Search Console data, is you can easily extract and explore keywords that have high click-through rate and a low ranking in search. It’s one of my favorite ways to explore keyword opportunities for clients, and it couldn’t be easier.

So check that out. This is kind of the money part right here. 

If you’re doing keyword research, which can take a lot, right, you’re trying to bucket keywords, you’re trying to organize topics and all that good stuff, you can instantly create a new column with pandas with branded keyword terms.

So just to walk you through this, we’re going “df[“Branded”]”. This is the name of the new column we’re going to create. We have this query string “contains,” and this is just regex, (“moz|rand|ose”). So any keywords that contain one of those words gets in the “Branded” column a “True”.

So now that makes filtering and exploring that so much faster. You can even do this in ways where you can create an entirely different data frame table. So sometimes if you have lots and lots of data, you can use the other cell in that example. All of these examples will be in the notebook.

You can use that and export your keywords into buckets like that, and there’s no stall time. Things don’t freeze up like Excel. You can account for misspellings and all sorts of good stuff so, so easily with regular expressions. So super, super cool.

Conclusion

Again, this is just tip of the iceberg, my friends. I am most excited to sort of plant this seed within all of you so that you guys can come back and teach me what you’ve been able to accomplish. I think we have so much more to explore in this space. It is going to be so much fun. If you get a kick out of this and you want to continue exploring different models, different programs within Colab, I highly suggest you download the Colab Chrome extension.

It just makes opening up the notebook so much easier. You can save a copy to your drive and play with it all you want. It’s so much fun. I hope this kind of sparked some inspiration in some of you, and I am so excited to hear what all of you think and create. I really appreciate you watching.

So thank you so much. I will see you all next time. Bye.

Video transcription by Speechpad.com


Ready for more?

You’ll uncover even more SEO goodness in the MozCon 2020 video bundle. At this year’s special low price of $129, this is invaluable content you can access again and again throughout the year to inspire and ignite your SEO strategy:

  • 21 full-length videos from some of the brightest minds in digital marketing
  • Instant downloads and streaming to your computer, tablet, or mobile device
  • Downloadable slide decks for presentations

Get my MozCon 2020 video bundle

Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don’t have time to hunt down but want to read!

10 Essential Tips on Marketing During a Recession (+Why It’s Crucial)

Businesses are already feeling the effects of the ongoing Coronavirus pandemic, and when coupled with something as serious as a recession, it’s natural to get overwhelmed. In the face of a recession, businesses immediately look to cut costs. 

why you should continue marketing during a recession

Image Source: GOBankingRates

In particular, our first instinct is to start questioning the worth of our marketing budget. However, what we fail to realize is that companies who curtail their marketing efforts during an economic downturn will actually end up jeopardizing their long-term market share. In this post, I’m going to break down why spending on marketing is oftentimes one of the best tactics you can employ to make your business recession-proof.

We’ll cover:

  • The importance and benefits of marketing during a recession
  • Strategies to get more ouf your existing budget
  • Changes to make to accommodate a lower budget

I’ll also provide real examples of businesses that not only came out on top of a recession because they continued marketing, but are still at the top of their industry today.

Why should you continue marketing during a recession?

Most of us are surprised to learn that increasing marketing during a recession can lead to growth.

You see, companies that continue to market themselves during a recession stay on the forefront of the minds of consumers, so when consumers gain back the money to spend, they instinctively turn towards these brands.

Also, when you continue your marketing efforts despite an economic downturn, the message you are putting out there to your audience is one of strength, leadership, and big-picture mindedness—all of which consumers are looking for during such uncertain times.

Even if you are not at your strongest, your clients and prospects will be attracted to whatever amount of stability you can provide.

Cutting down on marketing during a financial downturn, on the other hand, will reduce your online and offline presence, leaving the door wide open for competitors to take advantage and fill in the gaps.

When consumers do gain back the money to spend, they will instinctively turn towards brands that have stayed top of mind. 

Strategies to make the most of your marketing budget during a recession

While you may not be able to market to your fullest capacity during a recession, pulling the plug completely just isn’t a viable option. Let’s talk about some ways to continue marketing while keeping your business well within its budget.

1. Market to existing clients

Having a loyal customer base is your one true asset during a recession. It’s cheaper, simpler, and definitely more effective to market your products to your existing clientele rather than focusing your efforts to win new ones—and when we say cheaper, we mean a discrepancy of about 5-25 times.

why you shouldn't cut your marketing budget in a recession- repeat customers less expensive

Image source

Let your existing clients know you appreciate them by keeping in touch through appreciative emails, giving exclusive discounts, and so on. After all, they are the ones who make repeat purchases, retain your services, and best of all, recommend you to other prospects.

A loyal customer base is one of your best assets during a recession.

2. Lean on consistent branding 

There is no doubt that more effort needs to be put in during a recession. In the case of marketing, though, you may not actually need less effort, as there’s less “marketing noise“ for your marketing message to have to break through.

What you do need to do is be consistent with your branding and keep engaging with your audience. Developing a monthly plan of marketing strategies is essential for this, which may include any combination of blog posts, emails, PR content, newsletters, and advertisements.

why you should continue marketing during a recession- importance of branding

Image Source: The Balance Small Business

These efforts need not be expensive—only consistent—to help you stay relevant without maxing out your budget.

3. Empower and encourage your audience

Your company’s marketing plan should always be up to date, but more so when the market and economic conditions change.

A crucial step here is to ensure that your brand is sending a positive message—one that is fine-tuned to the sensitive mood of your clients and prospects and avoids any resentment. Your messaging should encourage and empower your audience, which wil help to build a strong emotional bond.

why you should continue marketing during a recession- encouraging messaging

Image Source: Business Insider

In fact, an analysis of nearly 880 case studies published by the World Advertising Research Center found that advertising campaigns that focused on emotional engagement turned out to be more profitable than campaigns that prioritized transactional messages, such as special offers or discounted prices during a difficult time.

Advertising companies that focused on emotional engagement turned out to be more profitable than companies that prioritized transactional messages.

What to change when marketing during a recession

Given that 19% of people pre-COVID already reported having more expenses than their income, you can imagine the changes needed as consumer incomes diminish even further. These limited budgets, shifts in priorities, and changes in customer shopping patterns require that you not only continue marketing, but that you change the way you market your business during a recession.

The following are a few techniques to help you adapt to the unique circumstances created by a recession without compromising your marketing quality or market reach:

1. Your offerings

Recession can have a dual effect. While some businesses suffer, some can actually thrive in it! The main difference between these two categories is the type of goods or services they deal with.

Businesses that sell necessities will always have takers, irrespective of  their financial situation. So if your company is selling goods or services that aren’t considered “must-haves,” it will do you well to reconsider your offering and shift to or at least add in essential services.

2. Your online presence

Make sure all your online profiles make it explicitly clear to customers and prospects that you’re still open for business. Update your hours, advertise your latest offers, and keep engaging with your consumers. This guide has some tips on communicating updates and information to your customers during turbulent times.

3. Your budget allocation

Regardless of whether your marketing and/or advertising budget stays the same or gets reduced during a recession, you may still need to make some changes as to how much money goes where. Pay attention to channels that are performing well and reallocate accordingly.

why you should continue marketing during a recession- budget breakdown

Image Source: Smart Insights

4. Your tone

A recession is a period marked by heightened emotions, so you may have to change your tone to attract the audience with whom you want to have continued business and customer loyalty. You can still convey the same brand messaging and core values, but you may need to conduct an audit to make sure anything potentially insensitive or controversial is removed from your website, automated emails, and social media profiles.

5. Your KPIs

Key performance indicators (KPIs) and marketing analytics can help you determine which campaigns are yielding the best results as opposed to ones that are underperforming.

Then, you can prioritize those that are generating income or leads and scrap ones that aren’t. Not only will this help you save money, but also drive sales simultaneously.

In the case of a recession, you may need to adjust some of your marketing goals and objectives, and therefore the KPIs that measure them.

6. Your customer targeting

You always want to be targeting the right audience with your markting and advertising, but during an economic downturn, laser-focused targeting becomes essential for survivival— especially when the marketing budget is tight beacuse it prevents wasted spend on irrelevant clicks on your add. You may need to change your targeting so that you’re focusing on one particular niche within your audience, or perhaps even a new niche that has emerged. Get a feel for what your customers need right now and make any targeting adjustments from there. You should also segment your email lists based on any new pattern and retarget your website visitors to attract the right audience and get a higher ROI on your marketing efforts.

how to continue marketing during a recession- know customer needs and habits

Image source: Accenture

7. Various components of your ads

Make sure you try out variations of ad copy, button copy and colors, keywords targeted, ad placements, channels, and more with your marketing and advertisting assets. A/B tests can help you fine-tune your advertisements on social media, Google, and Bing as well as identify high-converting keywords to search engine- ptimize your website.

Examples of companies that grew during a recession

Let’s discuss a few examples of companies that demonstrated recession-proof growth due to their enhanced marketing efforts.

1. Kellogg’s during The Great Depression

In the 1920s, Post was the leader in the market, but when the Great Depression hit, the company reduced its marketing considerably.

Meanwhile, its biggest rival, Kellogg’s, doubled their advertising expenditure and quickly saw their profits boom by 30%! In fact, after overtaking the top position in the 1920s, Kellogg’s is still the category leader a century later.

marketing during a recession-kellogs

Additionally, Roland S. Vaile tracked 200 companies through the recession of 1923. He reported that companies who continued to advertise during the crisis were 20% ahead of what they were before the recession. On the other hand, the companies that had reduced their marketing were still in the recession and were 7% behind where they were in 1920.

Companies that continued to advertise during the 1923 recesion ended up 20% ahead of where they were before the recession.

2. Toyota during the 1973-1975 recession

A 17-month recession was marked between 1973 to 1975, triggered by an energy crisis. During the time, the Toyota Corolla was second to the Honda Civic in the first government-issued miles-per-gallon (mpg) report.

However, things changed once the recession hit. Toyota resisted the temptation to cut down its marketing budget, and by 1976, the company became the top imported carmaker in the United States.

why not to cut marketing budget during recession-toyota example

Image source: Flickr

3. Pizza Hut during the 1990-1991 recession

During the 1990-1991 recession, McDonald’s decided to reduce its marketing spending and promotion budget. Contrarily, Pizza Hut and Taco Bell took advantage of their reduced presence and focused their efforts to retain their own respective marketing activities.

As a result, both the companies experienced higher sales, with Pizza Hut seeing a 61% increase, and Taco Bell a 40% raise. We have to point out that McDonald’s saw their sales decline by 28%.

4. Amazon during The 2008-2009 recession

Back in 2008 and 2009, while the world was in recession, Amazon grew its sales by 28%.

why you should continue marketing during a recession- amazon

How? They continued to innovate with new products and even launched the now-famous Kindle. This move, although risky, helped the company grow its market share, and on Christmas Day 2009, Amazon customers actually bought more ebooks than printed books!

We‘re aware of the monopoly that Amazon is enjoying currently, having gained a loyal and happy customer base over the years.

Don’t stop marketing during a recession

There is no doubt that marketing in a recession is going to be a challenge, mostly because you have to go against your instincts and standard operating norms. Add to this the changing customer behavior, and the situation becomes even more chaotic.

You must optimize your budget and be smart about priorities to accompany your customers on the new journey. But it doesn’t mean you should stop spending money on marketing your offerings.

On the contrary, you should consider this as an opportunity—an opportunity to provide prospects what they need most in a recession and cement the loyalty of your existing clients towards your brand.

The bottom line is, hold on tight to your marketing budget. After all, consistent and persistent marketing is the only effective kind. 

In the words of Peter Drucker, “Marketing and innovation produce results; all the rest are costs.“

About the author

Nahla Davies is a software developer and tech writer. Before devoting her work full time to technical writing, she managed—among other intriguing things—to serve as a lead programmer at an Inc. 5,000 experiential branding organization whose clients include Samsung, Time Warner, Netflix, and Sony.

An Introduction To Running Lighthouse Programmatically

Lighthouse is Google’s suite of website quality analysis tools. It allows you to assess your site’s performance, accessibility, SEO, and more. It is also highly configurable, making it flexible enough to be useful for all sites, from the simplest to the highly complex. This flexibility includes several different ways of running the tests, allowing you to choose the method that works best for your site or application.

One of the simplest ways to run Lighthouse is through Chrome’s DevTools Lighthouse panel. If you open your site in Chrome and then open Chrome’s DevTools, you should see a “Lighthouse” tab. From there, if you click “Generate Report”, you should get a full report of your site’s quality metrics.

What I am focusing on in this article, however, is at the other end of the spectrum. Running Lighthouse programmatically with JavaScript allows us to configure custom runs, picking and choosing the features we want to test, collecting and analyzing results, and specifying configuration options unique to our sites and applications.

For example, perhaps you work on a site that is accessible through multiple URLs — each with its own data and styling and perhaps even markup that you want to be able to analyze. Or maybe you want to gather the data from each test run and compile or analyze it in different ways. Having the ability to choose how you want to run a Lighthouse analysis based on what works best for your site or application makes it easier to monitor site quality and pinpoint where there are issues with your site before they pile up or cause too many problems for your site’s users.

Running Lighthouse programmatically is not the best choice for every site and I encourage you to explore all the different methods the Lighthouse team has built for using the tool. If you decide to use Lighthouse programmatically, however, the information and tutorial below should hopefully get you started.

Customizing Lighthouse Options

The advantage of running Lighthouse programmatically isn’t only the ability to configure Lighthouse itself, but rather all the things you might want or need to do around the Lighthouse tests. Lighthouse has some great documentation to get you started. To get the most out of running it programmatically, however, there are two main places where you will need to dig in and learn more about how Lighthouse works: configuring your test runs and reporting your test results.

Lighthouse Test Run Configuration

Configuring a Lighthouse test run is one of those tasks that can be as simple or as complex as you like.

When running Lighthouse programmatically, there are three places where you can provide custom options: the URL you will be testing, Chrome options, and the Lighthouse configuration object. You can see all three of these are parameters in the function for running Lighthouse from the Lighthouse documentation:

function launchChromeAndRunLighthouse(url, opts, config = null) { return chromeLauncher.launch({chromeFlags: opts.chromeFlags}).then(chrome => { opts.port = chrome.port; return lighthouse(url, opts, config).then(results => { return chrome.kill().then(() => results.lhr) }); });
}

You can use whatever code you need in order to create these parameters. For example, say you have a site with multiple pages or URLs you would like to test. Maybe you want to run that test in a CI environment as part of your CI tasks, checking all necessary pages each time the task runs. Using this setup, you can use JavaScript to create your URLs and create a loop that will run Lighthouse for each one.

Any Chrome options you might need can be specified in an object that gets passed to chrome-launcher. In the example from the documentation, the opts object contains an array we’re calling chromeFlags that you can pass to chrome-launcher and a port where you can save the port being used by chrome-launcher and then pass it to Lighthouse.

Finally, the Lighthouse configuration object allows you to add any Lighthouse-specific options. The Lighthouse package provides a default configuration object that can be used as-is or extended and modified. You can use this object to do a multitude of things, including specifying which Lighthouse test categories you want to test.

You can use the emulatedFormFactor to specify whether you want the test to run in a mobile or desktop emulator. You can use extraHeaders to add any cookies you might need to use in the browser. For example, a test running only the accessibility category on a desktop emulator that outputs the results as HTML might have a configuration object that looks like this:

const lighthouseOptions = { extends: 'lighthouse:default', settings: { onlyCategories: ['accessibility'], emulatedFormFactor:'desktop', output: ['html'], },
}

This example represents a minimal configuration. There is a lot more you can do. The Lighthouse configuration docs have much more information. They also have a set of sample configuration objects for some more complex implementations.

Custom Results Reporting

When running Lighthouse programmatically, you can have the results returned in one or more of three formatted options and — and this is the most exciting piece in my opinion — you can have access to the raw Lighthouse Result (LHR) object.

HTML, JSON, CSV

Lighthouse will automatically format the results in three different ways: HTML, JSON, or CSV. These are all pre-configured results based on the basic Lighthouse reporting template, which is what you see if you run a Lighthouse test inside of Chrome DevTools, for example. In the lighthouseOptions configuration object from the previous section, you can see a key for output that contains an array with a single string: html. This specifies that I only want the results returned formatted as HTML. If I wanted the results both as HTML and JSON, that array would look like ['html', 'json'].

Once Lighthouse has run, it will return a results object that will contain two keys: report and lhr. We’ll talk about the contents of the lhr key in the next section, but the report key contains an array with the results formatted as you have requested. So, for example, if we have requested ['html', 'json'], then results.report[0] will contain our results formatted as HTML and results.report[1] will contain our results formatted as JSON.

The LHR Object

Running Lighthouse programmatically also gives you access to a much more flexible results object: the LHR object. This object contains the raw results and some metadata from your Lighthouse run. More complete documentation can be found on the Lighthouse Github repository.

You can use these results in any number of ways, including creating custom reports and collecting data from multiple runs for analysis.

Example: Running An Accessibility Test For Mobile And Desktop

Let’s say that I have a site that loads different components depending on whether the user is using a smaller screen or a larger one, meaning that the HTML for each version of the site will be slightly different. I want to make sure that both versions of the site get a score of 95 on the Lighthouse accessibility tests and that no code gets committed to our main branch that doesn’t meet that standard.

Note: If you want to see a working example of the code below analyzing the Sparkbox homepage, you can find the repository here.

I can configure Lighthouse to run the accessibility category twice, providing different configuration objects for each one — one setting the emulatedFormFactor to desktop and one setting it to mobile. An easy way to do this is to create an array with both objects, shown below.

const lighthouseOptionsArray = [ { extends: 'lighthouse:default', settings: { onlyCategories: ['accessibility'], emulatedFormFactor:'desktop', output: ['html', 'json'], }, }, { extends: 'lighthouse:default', settings: { onlyCategories: ['accessibility'], emulatedFormFactor:'mobile', output: ['html', 'json'], }, },
]

Then, I can create a function that will loop through this array and run a Lighthouse test for each object found inside the array.

One thing to note is that it is necessary to introduce a delay between each run, otherwise Chromium can get confused and the runs will error out. In order to do this, I’ve added a wait function that returns a promise when the setTimeout interval has completed.

function wait(val) { return new Promise(resolve => setTimeout(resolve, val));
} function launchLighthouse(optionSet, opts, results) { return chromeLauncher .launch({ chromeFlags: opts.chromeFlags }) .then(async chrome => { opts.port = chrome.port; try { results = await lighthouse(url, opts, optionSet); } catch (e) { console.error("lighthouse", e); } if (results) reportResults(results, runEnvironment, optionSet, chrome); await wait(500); chrome.kill(); });
} async function runLighthouseAnalysis() { let results; const opts = { chromeFlags: ["--no-sandbox", "--headless"] }; for (const optionSet of lighthouseOptionsArray) { console.log("** Starting Lighthouse analysis **"); await launchLighthouse(optionSet, opts, results); }
}

In this case, I am sending the results to a reportResults function. From there, I save the results to local files, print results to the console, and send the results to a function that will determine if the tests pass or fail our accessibility threshold.

async function reportResults(results, runEnvironment, optionSet, chrome) { if (results.lhr.runtimeError) { return console.error(results.lhr.runtimeError.message); } await writeLocalFile(results, runEnvironment, optionSet); printResultsToTerminal(results.lhr, optionSet); return passOrFailA11y(results.lhr, optionSet, chrome);
}

For this project, I want to be able to save the JSON results in a specified directory for our CI test runs and the HTML file in a specified directory for our local test runs. The way Lighthouse returns these different types of results is in an array in the order in which they were requested.

So, in this example, in our lighthouseOptions object, our array asks for HTML first, then JSON. So the report array will contain the HTML-formatted results first and the JSON-formatted results second. The writeToLocalFile function then saves the correct version of the results in a file with a customized name.

function createFileName(optionSet, fileType) { const { emulatedFormFactor } = optionSet.settings; const currentTime = new Date().toISOString().slice(0, 16); const fileExtension = fileType === 'json' ? 'json' : 'html'; return ${currentTime}-${emulatedFormFactor}.${fileExtension};
} function writeLocalFile(results, runEnvironment, optionSet) { if (results.report) { const fileType = runEnvironment === 'ci' ? 'json' : 'html'; const fileName = createFileName(optionSet, fileType); fs.mkdirSync('reports/accessibility/', { recursive: true }, error => { if (error) console.error('error creating directory', error); }); const printResults = fileType === 'json' ? results.report[1] : results.report[0]; return write(printResults, fileType, reports/accessibility/${fileName}).catch(error => console.error(error)); } return null;
}

I also want to print the results to the terminal as the test runs finish. This provides a quick and easy way to view the results without having to open a file.

function printResultsToTerminal(results, optionSet) { const title = results.categories.accessibility.title; const score = results.categories.accessibility.score * 100; console.log('\n**\n'); console.log(Options: ${optionSet.settings.emulatedFormFactor}\n); console.log(${title}: ${score}); console.log('\n**');
}

And finally, I want to be able to fail my test runs if the accessibility scores do not meet my threshold score of 95.

function passOrFailA11y(results, optionSet, chrome) { const targetA11yScore = 95; const { windowSize } = optionSet; const accessibilityScore = results.categories.accessibility.score * 100; if (accessibilityScore) { if (windowSize === 'desktop') { if (accessibilityScore < targetA11yScore) { console.error(Target accessibility score: ${targetA11yScore}, current accessibility score ${accessibilityScore}); chrome.kill(); process.exitCode = 1; } } if (windowSize === 'mobile') { if (accessibilityScore < targetA11yScore) { console.error(Target accessibility score: ${targetA11yScore}, current accessibility score ${accessibilityScore}); chrome.kill(); process.exitCode = 1; } } }
}

I invite you all to play around with it and explore all the different ways Lighthouse can help monitor your site quality.

Final Notes

While I intentionally kept the example above relatively simple, I hope it gave you a good overview of what can be accomplished when running Lighthouse programmatically. And I hope it inspires you to find new ways to use this flexible, powerful tool.

As Peter Drucker said:

“If you can’t measure it, you can’t improve it.”

Being able to not only measure but monitor our website quality, especially for complex sites, will go a long way towards helping us build a better web.

Further Reading on SmashingMag:

How to Set Up Google Dynamic Display Ads: Your Quickstart Guide

Google dynamic display ads (not to be confused with Dynamic Search Ads) are a valuable way to showcase previously viewed products or services to users who have already visited your website or app.

how to set up dynamic display ads dynamic remarketing ad example

The setup of dynamic remarketing in Google Ads is pretty easy, but this feature is available only for the Display Network and not available for every advertiser. Eligibility will differ depending on if you want to use dynamic ads for remarketing and what industry your account is in. To help you get started with this helpful feature of Google Ads, I’m going to walk you through the basics for campaign setup. We’ll cover:

  • Eligibility requirements for dynamic display ads on Google.
  • How to set up your dynamic display campaign in Google Ads.
  • How to create the dynamic feed required for these types of ads.

I’ll also cover the limitations, templates, and common issues that occur with feeds so you can have a clear path to dynamic display ad success. Let’s begin.

Can my Google Ads account use dynamic display ads?

This is a good question we need to answer right away. Certain website and app categories are not allowed to use dynamic display. If your website or app falls under any of these categories, you will not be able to use dynamic remarketing audiences.

  • Personal hardship: Google is trying to avoid reminding users of any difficult times they may be going through.
  • Identity and belief: Anything possibly related to potential stigmas, discrimination, prejudices, or other classifications along those lines.
  • Sexual interests: Because these experiences are extremely private, all sexually explicit ads are prohibited.
  • Access to opportunities: Starting Oct. 19, 2020, any ads appearing to target specific audiences impacted by societal bias may be rejected.
  • Alcohol: Any ads that show or even just resemble alcoholic beverages.
  • Gambling: Whether it’s online or physical casinos, any ads promoting gambling are not allowed to use dynamic remarketing.
  • Clinical trial recruitment: Ad copy in this category must be highly precise.
  • Restricted drug terms: If the drugs are only for animal use, then they may be accepted.
  • Users under the age of 13: As you might expect, there too much room for error in this category.

If you don’t fall into any of the categories just listed, your account is most likely okay to move on and start using dynamic remarketing. Now let us go through the campaign setup in Google Ads.

how to set up dynamic display ads how dynamic remarketing works

Image source

How to set up a dynamic display ad campaign

When creating a new campaign, choose the “Sales” campaign goal objective. As mentioned in the intro of this post, dynamic advertising is only available on the Display Network so choose “Display” as your campaign type. Then for a subtype, the only option allowing dynamic remarketing is “Standard display campaign.”

how to set up dynamic display ads setting for google dynamic remarketing campaign

As for the rest of the process, set your account up as you would set up any other Display Network campaign, but there will be an additional area in Settings you’ll want to find. First, find the “Dynamic ads” section. Next, click on the checkbox asking if you want to “Use dynamic ads feed for personalized ads.” You will then get a selection box with the following options:

google dynamic display ads setting up your google remarketing campaign

Pick whichever business type aligns with your account. If you do not see an option that fits with your account, you can easily choose the “Other” option. Last, if you are already running Shopping campaigns, you will also see the option to sync a feed that you already have linked from the Google Merchant Center. Finish the rest of your ad group set up, then it will be time to work on setting up your feed.

How to create a feed for your dynamic display ads

Feeds are an absolute necessity if you want to run any dynamic remarketing in Google Ads. If you do not have a feed, then you will not be able to create a dynamic ad. Pretty straightforward there. Again, retail accounts running Shopping campaigns will already be a step ahead because most likely you have your product feed(s) created in Merchant Center. For any of the other industries seen in the last image, you will need to use one of the feed templates for your business type. Before I share the business feed templates, there are some limitations we need to be aware of.

Feed limitations

Per Google Ads’ policies, there are limitations to how many and how large your feeds can be. Here are the three feed limit rules currently in place at the time this post was written:

  1. There can only be 5 million rows or feed items per account. Keep in mind this isn’t just for dynamic remarketing. The feed item total also includes extension and ad customizer feeds.
  2. There can only be 100 user-generated or business data feeds per ad account.
  3. Each attribute within your feeds needs to be 3,000 bytes or less. (Google says this is roughly 750-3,000 characters depending on which characters you are using)

Feed templates

Depending on which industry you chose in the campaign set up, you will need to use the proper business type feed template. Each business type feed has different attributes, so yes, the template does matter. Last, if you chose “Other” as your business type, you can create a custom feed to use in your ads. Below you will find the direct download links for each of the Google Ads business types.

Rather than go in-depth into every business type feed, I will choose one industry just so we can see an ad example later on. I chose the Education template using my alma mater just for fun. They are not a client.

how to set up dynamic display ads feed example

There will be a default example for every template you download as well as extra rows to guide you on the set up. Once your feed is filled out and is ready to be submitted, it is time to head back into Google Ads. We are now ready to move onto business feed uploading.

Uploading your data feeds

Once you are in Google Ads, click on “Tools & Settings.” Then click on the “Business data” link under the Setup column.

how to set up dynamic display ads business data location

Click on the blue, plus (+) button to begin the upload process. You will then need to choose “Dynamic ad feed.” Then select the business type category of the feed you just finished creating.

how to set up dynamic display campaign feed choose business type before upload

Choose the .csv file for the feed. Then name your feed. Then you are ready to upload. You will then be taken back to the main Data feeds page. With a simple refresh, you should be able to see your feed in the list. Now let me show you how this feed may look in an ad.

Why is my dynamic display data feed not working?

There are a few reasons why your feed could be disapproved. Here are some common reasons for you to check if you are getting flagged for feed errors.

  1. If your feed is not formatted properly or you are going over the byte limits mentioned earlier in this post.
  2. If you did not add information into the fields under required attribute columns, that will definitely flag an error with your feed.
  3. You also need to make sure your fields are formatted properly. The example in each feed template will give you information on format (price, airport codes, and many more).
  4. A URL may be invalid. Whether it’s a Final URL or an image URL, make sure every one entered into a feed is working.

There are a few other reasons why your feed comes back with errors, but these are some common ones I have run into. Your feed could come back with errors a few hours after submitting. You can edit the feed directly in Google Ads or update your original feed and reupload into the channel.

Using data feeds in dynamic ads

You are probably expecting this massive, long section on how these ad formats are going to be completely different than anything you have ever created. Well I hate to disappoint you because that is not the case. The main structure of a dynamic ad is really a responsive display ad. Your data feed is just an additional feature added to the ad.

how to set up google dynamic display ads feed attached to ad

Since your data feed was applied to the ad group, there is nothing you need to do to the ad itself. Create your responsive display ad like you normally would. You will need your marketing images and logo images. You will need to add short (up to 5) and long headlines as well as descriptions (also up to 5). You can possibly add videos from YouTube to make the ad more engaging if it makes sense. You can check out this post on responsive display ads best practices to get more information.

how to set up dynamic display ads examples of dynamic remarketing ads

Set your dynamic display ads up for success

Advertisers in a variety of industries can use dynamic ads to customize the message they want to put in front of users. Using dynamic feeds for products or services can be a great way to reconnect with users and showcase items or pages that are familiar to your previous visitors. Even if your account’s industry does not fall under one of the main business types mentioned in this post, take some time to review custom feed formats. You can always create a feed that best fits your account (even if you fall under one of the default business types). Layering on an ad message that can speak to your target audience with a familiar feed of products or services can help improve the performance from your Display campaigns from both an engagement and conversion success metric.

5 Ways to Maximize Your ROI With Responsive Search Ads

Anyone who’s worked in search marketing has had a moment when they feel like they’ve really nailed the perfect ad for their product or service. Witty headline? Check! Compelling call to action? Check! Keyword/ad text pairing on point? Check! As the data sets in, we’re of course sometimes right and sometimes wrong, but we still feel that sense of pride in the fact that text ads can be, in some small way, little works of art.

maximize ROI with Responsive Search ads great text ad

I think this point of pride in part explains some of the skepticism that some search marketers have expressed concerning Google’s Responsive Search Ads (RSAs), which are made in an entirely different way. In this post, I’m going to tell you everything you need to know about responsive search ads. We’ll cover:

  • How responsive search ads work.
  • The benefits of responsive search ads.
  • Five ways you can use RSAs to maximize your ROI.

How do responsive search ads work?

Instead of crafting a “perfect” ad and setting it loose on Google for testing, RSAs are essentially an ad assembly kit. The advertiser provides all the “parts” of the ad (2-15 headlines and 2-4 descriptions); Google then picks and arranges how the pieces come together. This arranging is carried out on an auction-by-auction basis, where the ads are assembled on the fly to match your audience’s specific search query and search history, and also presumably other proprietary user-specific data that Google’s machine learning algorithms may use to anticipate conditions that will encourage a click—and hopefully, a conversion, to happen.

how to use responsive search ads to maximize ROI how responsive search ads work

What are the benefits of responsive search ads?

Herein lies the strength of the responsive search ad format. While “standard” search ads fit a core set of sensibilities and drives, they appeal to you, or your imagined audience. RSAs, on the other hand, can potentially reach a much larger audience, in a way that still appeals to their needs and values. And the results can be fantastic: In a head-to-head matchup that I ran from January 1 – May 31st  across 500 accounts, RSAs earned 243% more impressions per ad and had a 5% better conversion rate.

Think of this grouping of assets as a “battle royale” that takes place in each auction event, letting the headline/description combination that best pairs the search query with the keywords to get an edge in ad rank that can make your ad more likely to appear to a user.

But RSAs can be pretty useless, or even counterproductive, if you simply throw a bunch of recycled content into them and call it a day. Without paying careful attention to how responsive ads are designed to home in on the particular needs of a wide range of people, you can wind up with a mix of assets that can’t possibly blend together to create a compelling ad. When that happens, you’re really just doing yourself a disservice.

Meanwhile, crafting RSAs need not necessarily be an artless and joyless exercise; in fact, when one considers some strategies for crafting responsive ads that work, they can be an art in their own right.

how to maximize ROI with responsive search ads RSA example

Image source

How to use responsive search ads to maximize your ROI

To get the most out of your RSA campaigns, it’s important to pay attention to the details. Even though you’re aiming for a wider reach, you need to put careful thought into your ad copy so that it remains versatile while also maintaining efficacy for each variation. Use these five strategies below to ensure you come up with top notch RSA campaigns, reap all of the benefits RSAs have to offer, and get an accurate picture of your performance.

1. Address a variety of searchers

No matter how niche your product or service is, your audience has a wide range of interests and affinities, and their interests will be piqued by different things. Some folks are value shoppers; others are thinking primarily about quality; still others might be thinking about how quickly they can get what they’re looking for, or whether the materials used in the product they are looking for are ethically sourced. And of course, most people have a couple interests in mind at any given time.

responsive search ads to maximize ROI affinity audiences

No single ad can speak to all of these needs; however, a single responsive search ad can lay the groundwork for meeting all of these potential users by incorporating assets (in the form of distinct headlines and description lines) that speak to all of these interests and affinities. In order to make sure this groundwork is laid, I suggest doing some thinking about several different kinds of people who you’re trying to get to your landing page (let’s call them customer A, B, and C), their distinct needs and values, and write out the best headlines that would answer the following questions for each prospective customer:

  • What is the product or service you’re promoting?
  • What are key selling points of your product or service?
  • What calls to action will be most appealing?
  • Are there any unique options, prices, promotions or discounts for your searcher?

If you have these questions answered for each of your three prospective customers, you’ll have 12 of your 15 maximum headlines taken care of.

2. Bring diversity to your ad copy

Addressing a wide range of needs also means avoiding redundancy. So don’t fill your suite of headlines with calls to action that would be nonsensical if paired up:

how to use responsive search ads to maximize ROI bad example

The above example ad is exactly what happens when you take materials from three good standard ads and dump all the headlines into a responsive search ad. When we write great standard ads, we naturally think a lot about how the ordering of our headlines and description affects the persuasiveness of our ads. So in a standard ad, a call to action might organically follow something that’s more explanatory. But if all of the variants of the same call to action appear together with no other context, the result is just silly.

Instead, think about how your ad copy can complement other headlines and description line by having distinct, valuable things to say. Perhaps the trickiest aspect of crafting the responsive search ad involves creating copy that can work independently of the other ad units (you can’t take for granted that any two pieces of ad copy will be in the mix), but once you have this ironed out, you have accomplished your goal of truly providing Google with a blueprint for many different ads that can reach a multitude of users.

how to use responsive search ads to maximize ROI multiple ads

If you are really committed to having one specific headline or description line show up in all instances of your ad’s appearance, you can use the “pin” option for the RSAs to set a certain headline or description line in a specific position and leave other parts of the ad open for swapping. If you do so, though, I do encourage you to add another fully responsive ad to the ad group so that you can compare performance.

3. Let Google’s ad strength tool be your guide

In addition to providing your own common sense to the ad creation process, you can also leverage Google’s ad strength tool to gauge how well Google “thinks” your ad is. Simply select “edit” on any RSA in Google Ads and you will be able to see Google’s “rating” of your ad.

how to use responsive search ads to maximize ROI ad strength tool

The tool gauges strength based on several factors, including the number of headlines and descriptions used, the variety of words used & keyword relevance. It will even provide suggested additions based on your other ad assets (extensions, standard ads, and more). While the tool isn’t necessarily the best judge of how persuasive a particular headline or description field might be, it can help get you thinking about new paths to take in your ad making.

4. Adjust your KPIs for increased impressions

Of course, the best gauge of how good your RSAs are is the outcome. If your responsive ads are successful in producing combinations that match with more queries and users than traditional ads, it’s likely that your ads will reach a wider audience and thus get more impressions than you’ve seen with a single standard ad.

When this happens, you (or your clients) may have to rethink certain KPIs, especially click-through-rates (CTR). For example, in my recent study comparing RSA and standard text ad performance, I found that RSAs had 283% more impressions per ad than the standard ads—they quite simply blew the number of ads out of the water when it came to reaching new people.

At the same time, because more people were seeing the ads, the CTR went down 5%. In the long run, however, the lower CTR meant little in the face of the fact that the clicks that I did get were of better quality: since they had a better conversion rate on clicks, they ultimately drove more conversions to my campaigns than the traditional ads and thus got my clients better results.

5. Use the best combinations to make new standard ads

Even as you craft the best responsive search ads that you can, it is not recommended that you simply abandon your old ad copy. You may already have some very effective headline and description pairings that you know work terrific in a particular order and only that order. Such ads may continue to be some of your best assets for reaching the audience they were tailored for, but having responsive ads sit side-by-side in the same ad group pays off in the long run.

Since responsive ads help to broaden that audience by better matching queries that might not best match your standard copy, they provide a powerful supplement to your strongest ads. Moreover, by keeping your tried and true copy in the same ad group as the responsive search ads, you can compare performance and further optimize based upon the results you see.

In fact, it may be best to think of your RSA data as a laboratory for helping you come up with the best possible ad copy arrangements. In one account, I found that an RSA variation of one of my long-running expanded text ads was getting tons of engagement when it reversed the typical ordering of my headlines and used a different description line. This then led me to create a standard “expanded” text ad mimicking the combination, which led to more engagements.

how to use responsive search ads to maximize ROI ad combinations

Start using RSAs for better ROI

By now, I’ve hopefully persuaded you that you ought to try responsive search ads, if you haven’t done so already. If trying them out still seems a bit intimidating, I suggest checking out Google’s growing library of resources concerning RSAs, including video tutorials and their own best practices guide. They also unpack key technical details in an overview page on the ad format.

About the author

Ty Alyea is Director of Search Marketing Product at Service Direct, where he is responsible for creating and managing thousands of digital ad campaigns across hundreds of local service industries for 1,000+ clients across North America. He has a B.A. from UCLA as well as an M.A. and PhD from the University of Texas at Austin.

How To Build A Blog With Next And MDX

Next.js is a React framework that enables you to build static and dynamic apps quickly. It is production-ready and supports server-side rendering and static site generation out of the box, making Next.js apps fast and SEO-friendly.

In this tutorial, I will first explain what exactly Next.js is and why you’d use it instead of Create React App or Gatsby. Then, I’ll show you how to build a blog on which you can write and render posts using Next.js and MDX.

To get started, you’ll need some experience with React. Knowledge of Next.js would come handy but is not compulsory. This tutorial would benefit those who want to create a blog (personal or organizational) using Next.js or are still searching for what to use.

Let’s dive in.

What Is Next.js?

Next.js is a React framework created and maintained by Vercel. It’s built with React, Node.js, Babel, and Webpack. It is production-ready because it comes with a lot of great features that would usually be set up in a “vanilla” React app.

The Next.js framework can render apps on the server or export them statically. It doesn’t wait for the browser to load the JavaScript in order to show content, which makes Next.js apps SEO-friendly and blazing fast.

Why Use Next.js Over Create React App?

Create React App is a handy tool that offers a modern build setup with no configuration and without the hassle of having to set up Webpack, Babel, and so on or having to maintain their dependencies. It’s the recommended way to create React apps nowadays. It has a template for TypeScript and also comes with the React Testing Library.

However, if you want to build a multi-page app, then you’ll need to install an extra library, as if you were rendering a React app on the server. The extra setup could be a problem, and any packages installed could increase the final bundle size of your app.

This is exactly the problem that Next.js is intended to solve. It offers the best developer experience, with all of the things you need for production. It comes with several cool features:

  • Static exporting (pre-rendering)
    Next.js allows you to export your Next.js app at build time to static HTML that runs without a server. It is the recommended way to generate your website because it’s done at build time and not at each request.
  • Server-side rendering (pre-rendering)
    It pre-renders pages to HTML on the server upon every request.
  • Automatic code splitting
    Unlike React, Next.js splits code automatically and only loads the JavaScript needed, which makes the app fast.
  • File-system-based routing
    Next.js uses the file system to enable routing in the app, meaning that every file under the pages directory will be treated automatically as a route.
  • Hot reloading of code
    Next.js relies on React Fast Refresh to hot reload your code, offering a great developer experience.
  • Styling options
    The Next.js framework has built-in support for Styled JSX, CSS modules, Sass, LESS, and more.

Next.js Versus Gatsby

Gatsby is a static site generator built on top of React and GraphQL. It is popular and has a huge ecosystem that provides themes, plugins, recipes, and so on.

Gatsby and Next.js websites are super-fast because they are both rendered either on the server or statically, meaning that the JavaScript code does not wait for the browser to load. Let’s compare them according to the developer experience.

Gatsby is easy to start with, especially if you already know React. However, Gatsby uses GraphQL to query local data and pages. Using Gatsby to build this simple blog might be overkill because GraphQL has a learning curve, and the querying and build time of static pages would be a bit longer. If you built this same blog twice, first with Gatsby and then with Next.js, the one built with Next.js would be much faster at build time because it uses regular JavaScript to query local data and pages.

I hope you take advantage of the power of the Next.js framework and see why it’s so much handier than some alternatives. It’s also a great choice if your website relies heavily on SEO because your app will be fast and easy for Google robots to crawl. That’s the reason why we will be using Next.js in this article to build a blog with the MDX library.

Let’s start by setting up a new Next.js app.

Setting Up

There are two ways to create a Next.js app. We can set up a new app manually or use Create Next App. We’ll go for the latter because it’s the recommended way, and it will set up everything automatically for us.

To start a new app, run the following in the command-line interface (CLI):

npx create-next-app

Once the project is initialized, let’s structure the Next.js app as follows:

src
├── components
| ├── BlogPost.js
| ├── Header.js
| ├── HeadPost.js
| ├── Layout.js
| └── Post.js
├── pages
| ├── blog
| | ├── post-1
| | | └── index.mdx
| | ├── post-2
| | | └── index.mdx
| | └── post-3
| | └── index.mdx
| ├── index.js
| └── \_app.js
├── getAllPosts.js
├── next.config.js
├── package.json
├── README.md
└── yarn.lock

As you can see, our project has a simple file structure. There are three things to note:

  • _app.js allows us to append some content to the App.js component in order to make it global.
  • getAllPosts.js helps us to retrieve the blog posts from the folder pages/blog. By the way, you can name the file whatever you want.
  • next.config.js is the configuration file for our Next.js app.

I will come back to each file later and explain what it does. For now, let’s see the MDX package.

Installing the MDX Library

MDX is a format that lets us seamlessly write JSX and import components into our Markdown files. It enables us to write regular Markdown and embed React components in our files as well.

To enable MDX in the app, we need to install the @mdx-js/loader library. To do so, let’s first navigate to the root of the project and then run this command in the CLI:

yarn add @mdx-js/loader

Or, if you’re using npm:

npm install @mdx-js/loader

Next, install @next/mdx, which is a library specific to Next.js. Run this command in the CLI:

yarn add @next/mdx

Or, for npm:

npm install @next/mdx

Great! We are done setting up. Let’s get our hands dirty and code something meaningful.

Configuring the next.config.js File

const withMDX = require("@next/mdx")({ extension: /\.mdx?$/
}); module.exports = withMDX({ pageExtensions: ["js", "jsx", "md", "mdx"]
});

Earlier in this tutorial, I said that files under the pages folder would be treated as pages/routes by Next.js at build time. By default, Next.js will just pick files with .js or .jsx extensions. That’s why we need a config file, to add some customizations to the default behavior of Next.js.

The next.config.js file tells the framework that files with .md or .mdx extensions should also be treated as pages/routes at build time because the blog folder that contains the articles lives in the pages directory.

That being said, we can start fetching the blog posts in the next part.

Fetching Blog Posts

One of the reasons why building a blog with Next.js is easy and simple is that you do not need GraphQL or the like to fetch local posts. You can just use regular JavaScript to get the data.

In getAllPosts.js:

function importAll(r) { return r.keys().map((fileName) => ({ link: fileName.substr(1).replace(/\/index\.mdx$/, ""), module: r(fileName) }));
} export const posts = importAll( require.context("./pages/blog/", true, /\.mdx$/)
);

This file can be intimidating at first. It’s a function that imports all MDX files from the folder pages/blog, and for each post it returns an object with the path of the file, without the extension (/post-1), and the data of the blog post.

With that in place, we can now build the components in order to style and show data in our Next.js app.

Building The Components

In components/Layout.js:

import Head from "next/head";
import Header from "./Header"; export default function Layout({ children, pageTitle, description }) { return ( <> <Head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charSet="utf-8" /> <meta name="Description" content={description}></meta> <title>{pageTitle}</title> </Head> <main> <Header /> <div className="content">{children}</div> </main> </> );
}

Here, we have the Layout component, which we’ll be using as a wrapper for the blog. It receives the meta data to show in the head of the page and the component to be displayed.

In components/Post.js:

import Link from 'next/link'
import { HeadPost } from './HeadPost' export const Post = ({ post }) => { const { link, module: { meta }, } = post return ( <article> <HeadPost meta={meta} /> <Link href={'/blog' + link}> <a>Read more →</a> </Link> </article> )
}

This component is responsible for displaying a preview of a blog post. It receives the post object to show as props. Next, we use destructuring to pull out the link of the post and the meta to show from the object. With that, we can now pass the data to the components and handle the routing with the Link component.

In components/BlogPost.js:

import { HeadPost } from './HeadPost' export default function BlogPost({ children, meta}) { return ( <> <HeadPost meta={meta} isBlogPost /> <article>{children}</article> </> )
}

The BlogPost component helps us to render a single article. It receives the post to show and its meta object.

So far, we have covered a lot — but we have no articles to show. Let’s fix that in the next section.

Writing Posts With MDX

import BlogPost from '../../../components/BlogPost' export const meta = { title: 'Introduction to Next.js', description: 'Getting started with the Next framework', date: 'Aug 04, 2020', readTime: 2
} export default ({ children }) => <BlogPost meta={meta}>{children}</BlogPost>; ## My Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus pellentesque dolor non egestas. In sed tristique elit. Cras vehicula, nisl vel ultricies gravida, augue nibh laoreet arcu, et tincidunt augue dui non elit. Vestibulum semper posuere magna, quis molestie mauris faucibus ut.

As you can see, we import the BlogPost component, which receives the meta and the body of the post.

The parameter children is the body of the blog post or, to be precise, everything that comes after the meta object. It is the function responsible for rendering the post.

With that change, we can move to the index.js file and display the posts on the home page.

Displaying Posts

import { Post } from "../components/Post";
import { posts } from "../getAllPosts"; export default function IndexPage() { return ( <> {posts.map((post) => ( <Post key={post.link} post={post} /> ))} </> );
}

Here, we start by importing the Post component and the posts fetched from the blog folder. Next, we loop through the array of articles, and for each post, we use the Post component to display it. That being done, we are now able to fetch the posts and display them on the page.

We are almost done. However, the Layout component is still not being used. We can use it here and wrap our components with it. But that won’t affect the articles pages. That’s where the _app.js file comes into play. Let’s use that in the next section.

Using the _app.js File

Here, the underscore symbol (_) is really important. If you omit it, Next.js will treat the file as a page/route.

import Layout from "../components/Layout"; export default function App({ Component, pageProps }) { return ( <Layout pageTitle="Blog" description="My Personal Blog"> <Component {...pageProps} /> </Layout> );
}

Next.js uses the App component to initialize pages. The purpose of this file is to override it and add some global styles to the project. If you have styles or data that need to be shared across the project, put them here.

We can now browse the project folder in the CLI and run the following command to preview the blog in the browser:

yarn dev

Or, in npm:

npm run dev

If you open http://localhost:3000 in the browser, you will be able to see this:

Great! Our blog looks good. We are done building the blog app with Next.js and MDX.

Conclusion

In this tutorial, we walked through Next.js by building a blog using the MDX library. The Next.js framework is a handy tool that makes React apps SEO-friendly and fast. It can be used to build static, dynamic JAMstack websites in no time, because it is production-ready and comes with some nice features. Next.js is used widely by big companies, and its performance keeps improving. It’s definitely something to check out for your next project.

You can preview the finished project on CodeSandbox.

Thanks for reading!

Resources

These useful resources will take you beyond the scope of this tutorial.

Get Up And Running With Craft CMS

Craft CMS is brought to you by the talented folks at Pixel & Tonic. It is actively maintained and kept in line with the changes in the modern web development world and is rising in popularity amongst CMS’s — with an impressive client list such as Netflix. It also has a very active Discord server, growing to over 5,000 members in just a year of it being live.

Why Use Craft CMS?

Craft CMS has been our go-to CMS for around four years now; we’ve built client websites and even our own business on Craft. As a company, we’re constantly checking the CMS market and have always landed back at Craft. So, let’s go into the reasons we chose Craft CMS over the others on the market:

  • Interface familiarity, making it fairly easy for anyone coming from WordPress.
  • Active development community.
  • Flexible fields, giving you control over how your content is structured.
  • No lock-ins or monthly fees. Just a one-off fee if you’re going Pro/eCommerce.
  • Extensibility with Craft’s growing plugin store.

So, with the introduction out of the way, I’m going to show you how to get up and running with a fully set up Craft CMS local environment in around fifteen minutes. Once we’ve completed the following steps, you should have a great foundation to start your next web project, and, hopefully, be ready to move away from WordPress for good.

Installing our Development Environment

Craft CMS ships with a very handy tool to get your local environment set up. This tool is called Craft Nitro and makes setting up a Craft CMS environment simple. It’s new to the Craft scene but helps a great deal.

Setting Up Multipass

Craft Nitro requires something called Multipass which creates a Ubuntu virtual machine on your system. (Don’t worry, you won’t need to set up or ever open Ubuntu.)

  • Download the latest Multipass installer for your operating system from the official website.
  • Once downloaded, run the installer. When this is complete you should be ready to move on to the next step.

Setting Up Craft Nitro

The Craft Nitro setup is straightforward and involves one command line script to get it installed on macOS and Linux, but for Windows it’s a bit different. I’ll be going through how to set it up for both types of operating system below. The good news is that once it’s set up it’s done, and you’ll be able to easily create new Craft installs without going through this again.

Installing on macOS and Linux

Open your Terminal and paste the following script line. Once pasted, follow the option prompts on the command line to create your virtual machine with the presets that Craft Nitro has. This should be perfectly fine, but if you fancy fine-tuning, go for it. Just keep in mind that Craft has minimum requirements to run smoothly.

Run the following line in Terminal:

bash 

Installing on Windows 10 Pro

Installing on Windows is fairly complex, but shouldn’t take too much time to get up and running. Just make sure you have Hyper-V enabled. Unfortunately, Hyper-V cannot be installed on the Home Edition version of Windows.

  1. Make sure Hyper-V is enabled (more details here);
  2. Download nitro_windows_x86_64.zip from the latest release;
  3. Create a Nitro folder in your home folder if it does not already exist (i.e. C:\Users\<username>\Nitro);
  4. Extract the zip file and copy nitro.exe into the Nitro folder you just created in your home folder;
  5. If this is your first installation, run this from the command line to add Nitro to your global path:
    setx path "%PATH%;%USERPROFILE%\Nitro"
  6. Start the Windows terminal (cmd.exe) with administrator permissions and run Nitro in it.

Once you have completed the above, follow the terminal instructions to create your first machine. The default presets Craft Nitro sets out should be perfectly fine for your environment.

Installing Craft CMS

So far we’ve installed Craft Nitro and created our virtual machine, and we’re now ready to install Craft CMS. In the following instructions, we’re going to download Craft and “mount” our files, allowing us to develop in our current system and see the changes reflected in our Ubuntu virtual machine. We’re also going to set up our initial database and get a local domain we can use, e.g. myfancyproject.test. Let’s get going:

Creating A New Project

  1. Create a new folder where you’d like to develop/install Craft;
  2. Download Craft CMS from the latest release (via Composer or Zip);
  3. Unzip/Move contents into the folder we just created;
  4. Open Terminal/Command Line;
  5. Go to our created folder. $ cd /path/to/project;
  6. Run nitro add;
  7. Follow the on-screen command line prompts. (The presets are usually fine but modify as you wish.)

Tip: If you’re seeing “Not Readable” issues on macOS, then Multipass needs to have full disk access. To do this, ensure multipassd is checked under System Preferences → Security & Privacy → Privacy → Full Disk Access.

Connecting To Our Database

We should now have a test domain and our project files mounted — I know, pretty easy so far, and that’s the hard bit complete. Connecting to our database requires us to add our database details for our newly created site in our project’s .env file.

  1. Open up our project’s .env file (located in the root folder);
  2. Change the database details to the following:
    DB_USER="nitro" DB_PASSWORD="nitro" # 'nitro' is the default database DB_DATABASE="nitro"
    

Tip: If you’d like to open the database in your SQL program of choice, all you have to do is run nitro info in your command line, and you’ll see your database IP address under “IPV4”. Use the above username and password (along with the port you selected during setup) to connect.

Install Craft CMS

We’ve set up our virtual machine, set our test domain, and got our database ready to go. Now it’s time to actually install Craft CMS and get into the admin section — it should all be smooth sailing from here. So let’s get to it.

  1. Head to the test domain you set during setup followed by /admin (e.g. testdomainyouset.test/admin);
  2. You should see Craft CMS’s install screen (Hooray!);
  3. Follow the on-screen installer instructions;
  4. Once finished, you should be redirected to your new admin panel.

Tip: If you didn’t install Craft via Composer, then you may be prompted for a security key. To generate a cryptographically secure key, use a password manager like 1Password / LastPass. (There’s no length limit so it can be as complex as you’d like). Open up our .env file once more, find the following line SECURITY_KEY="", paste your generated key inside the quotes and save.

You should now have a fully set up local development environment for Craft CMS, which will provide a great jumping-off point for anything you’re trying to develop, whether that be moving your cat blog from WordPress or creating an eCommerce store. Just remember to turn off your server once finished using nitro stop in your command line.

Here are a few helpful commands for Craft’s Nitro that will help you during development:

  • nitro start (starts the development server)
  • nitro stop (stops the development server)
  • nitro context (shows you information about the environments installed)
  • nitro info (information about the current environment, PHP version, etc.)

Setting Up Our Cat Blog

Now that we’ve got Craft up and running, we can make a start on our cat blog, and start enjoying the power that Craft offers up to us. In this section, we’re going to be setting up our content model, creating our base theme template and building out our homepage and inner-post pages.

Content models sound scary, but in Craft it’s the opposite; there’s an easy-to-use GUI system — no need for complex code around here! For our cat blog, we need to set up a section called “Cats” which needs the cat’s name, photo and a small description, and then a single page “Homepage”.

How To Create Sections And Pages
How To Create A Cat Post

How To Create Sections And Pages

We’re going to create our “Cats” section and our homepage which will be a classed as a “single” within Craft’s language. Sections are exactly what they sound like — sections of your website — and Pages are also self explanatory, single pages of your website such as legals and our homepage.

Creating Our Cats Section
  1. Go to Settings in the left hand menu;
  2. Click “Sections”;
  3. Click “New Section”;
  4. In the “Name” put Cats;
  5. Section Type Channel
    (Channels are used for streams of similar content, just like our cats.)
  6. Within “Entry URI Format” we’re going to make sure it’s /cats/{slug};
  7. Within “Template” we’re going to put cat;
  8. Save.

What we’ve done above is tell Craft that we’d like any post within the Cats section to have a URL format like so: ourtestdomain.test/cats/fluffy, and the template we’d like to use is cats.twig.

Creating Our Homepage
  1. Within “Sections”, click “New Section”;
  2. In the “Name”, put Homepage;
  3. Section type Single;
  4. Tick the “Homepage” checkbox;
  5. Within “Template” we’re going to put index;
  6. Save.
Creating Fields

Craft comes with no preconceptions of what you want to build; it gives you a completely blank slate. We create exactly what we want our post’s structure to be by generating our own “Fields”. Let’s create our cat’s “Fields” for the following name, description and photo.

  1. Head to the admin section of your site by visiting yourchosendomain.test/admin;
  2. Navigate to Settings in the left hand menu;
  3. Click “Fields”;
  4. In the top right click “New Field”.

Setting Up The Cat’s Name

We’re going to need a name for our cats, so let’s create a name field.

  • In the Name put “Cat’s Name”;
  • Choose “Plain Text” in the Field Type;
  • Now Save.
Setting Up The Cat’s Description

Our cats also need a description, but let’s cap the number of characters our authors can enter about each cat.

  • Click “New Field” again;
  • In the Name put “Cat’s Description”;
  • Choose the “Plain Text” field type again;
  • Create a limit by adding “2000” in the Field Limit box;
  • Click Save.
Setting Up The Cat’s Photo

We’re going to want to add photos to each of our cat posts, and there may be multiple photos per cat — not a problem. But before creating a field, we need to tell Craft where we want the photos to be stored on our server. (Craft also has the option of uploading to Cloud storage solutions as well.)

  • Head to “Settings” in the left hand menu;
  • Click “Assets”;
  • Click “New Volume”;
  • In the Name put “Cat’s Photo”;
  • Enable “Assets in this volume have public URLs”;
  • In “Base URL” put @web/uploads/;
  • In “File System Path” put @webroot/uploads/;
  • Save.

The above properties are telling Craft where we would like our uploaded files to be stored. You can change these to whatever you wish. You can also read more into setting environment variables for these in the documentation.

Matching Field to Sections

Now we’ve got our fields and sections set up and running, we’re going to need to combine the two together by assigning what fields we’d like our sections to have. This is as easy as dragging and dropping in Craft.

  • Head to Settings;
  • Click “Sections”;
  • Now click “Edit Section Type”;
  • Now click our “Cats” Section;
  • Select “Fields” tab in the right hand menu;
  • Drag over the “Cats” fields we previously created to the content pane;
  • Once dragged across, Save the Cats Section.

Tip: You can remove the “Title” field from our posts by disabling the “Show the Title Field” option. You may want the cat’s name as the title for instance.

How To Create A Cat Post

Now it’s time for us to actually create a fluffy cat post. Head over to the “Entries” in the left hand admin menu.

  • Click “New Entry”;
  • In the dropdown select “Cats”;
  • Create your post! (The fluffier the better.)
Listing Our Cat Articles

Now we have our content model done, we can start building the basic interface for our cat blog. Craft is written in the Twig/Liquid language. If you’ve ever dabbled in Shopify development this should be familiar to you; if not, it’s fairly easy to pick up. But first, we need to open our Craft install folder in our favourite code editor (where you unzipped the Craft install).

  1. Open Craft Install in your code editor;
  2. Create a new file in Templates called index.twig
    (Craft may have installed a default index. Open this instead and wipe it.)
  3. Add the following code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head> <body>
{# Create an entry query with the 'section' and 'limit' parameters #}
{% set myEntryQuery = craft.entries() .section('cats') .limit(10) %} {# Fetch the entries #}
{% set entries = myEntryQuery.all() %} {# Display the entries #} <div class="container"> <div class="row"> {% for entry in entries %} <div class="col"> <article class="card"> {% set catImage = entry.catsPhoto.one() %} {% if catImage %} <img src="{{ rel.url }}" class="card-img-top" alt="..."> {% endif %} <div class="card-body"> <h1><a href="{{ entry.url }}">{{ entry.title }}</a></h1> <h2>{{ entry.catsName }}</h2> <p>{{ entry.catsDescription }}</p> <a class="btn btn-primary" href="{{ entry.url }}">View {{ entry.catsName }}</a> </div> </article> </div> {% endfor %} </div>
</div> </body>
</html>

In the code above, we tell Craft about our section “Cats” and put a limit on the posts to 10. Then we fetch the entries from that section, and continue to loop over each of the cats within the fetch entries in the following code. Images are a bit different in Craft: they’re stored as an array, so we do another loop within our code to get the images of the cats.

Let’s Test

Open up your test development URL that we created during setup. (Make sure your nitro server is running using nitro start). We should now see the posts we created displayed on our index page. Clicking through to see more information gives us a 404 error, so let’s fix that next!

Tip: We included Bootstrap to make it look a bit fancier, but feel free to include any framework you’d like.

Cat Post Page

We’re going to do the same as we did with the index page. Let’s create the cat template by creating a new file within the Templates folder called cat.twig. As we’re already within the Entry context, we don’t have to re-query it.

<html> <body> {% block content %} {% set catImage = entry.catsPhoto.one() %} {% if catImage %} <img src="{{ rel.url }}" class="card-img-top" alt="..."> {% endif %} {{ entry.title }} {{ entry.catsName }} {{ entry.catsDescription }} {% endblock %} </body>
</html>

Save this, and refresh our test development website. We should now be able to browse to our cats entry page! Voila!

Going Headless

If you fancy going more technical with Craft and using it as your content management system to feed into your web app, you can do this by using Craft CMS’s Pro package which adds user accounts and GraphQL to your config. The Pro version of Craft is free to trial and test against, which means you can give it a thorough test before committing. Now we’ll go into how to set up a basic GraphQL API using Craft’s built-in GraphQL editor.

Start Pro Trial

Once you’ve installed Craft CMS, head over to the “Plugin Store” and look for “Upgrade” in the left-hand menu options. Click “Trial” on the “Pro” section and run through the upgrade process.

The Basic Setup

Once you’ve started your Pro Craft CMS trial, you should now notice a new menu option in your admin side panel: GraphQL. Before we jump straight in, we need some content models which can form the output. When you’ve created your content models, Craft CMS will automatically create you a GraphQL API out of the box. No need to define the schemas either!

Create Your Cat API Endpoint

We’ve got our content sorted; now we want to create the endpoint so we can fetch all our cute cat content. Let’s do that now:

  1. Open your Craft CMS project routes.php in your IDE.
  2. Adding the following rule will make your API endpoint available at http://yourprojecturl.test/api:
    return [ 'api' => 'graphql/api', // ...
    ];
    
  3. Save and close.
  4. Test by pinging the endpoint:
    curl -H "Content-Type: application/graphql" -d '{ping}' http://yourprojecturl.test/api
  5. You should receive “pong” in response.

Enable Your Content

We’ve set up our endpoint to receive requests. It’s now time for us to enable/disable the certain parts of our site we’d like to be available via our API. For example, you may want to turn off certain entries that contain sensitive information. Craft makes this process extremely easy; it’s a case of ticking/unticking. (You can get more complex by writing your own schemas as well.) For now, we’ll be creating a public schema that’s publicly available. You can create private schemas which require a secret key, but this is out of scope for this guide.

  1. Head over to the GraphQL section via your admin panel sidebar;
  2. Click “Public Schema”;
  3. Enable the “Cats” section.
    (This will make our content available through your endpoint.)
  4. Save.

Testing Our Endpoint

Now that we’ve chosen the data we’d like to make available via our endpoint, it’s now time to give it a test. In the GraphQL dropdown in your left-hand admin panel, you’ll notice an item called “GraphiQL”. GraphiQL allows us to explore our API and query it within our dashboard.

  1. Open GraphiQL;
  2. Change “Full Schema” to “Public Schema”;
  3. Write the following GraphQL query in the left-hand pane:
    query ($section: [String], $orderBy: String) { entries(section: $section, orderBy: $orderBy) { title slug id }
    }
    
  4. Click the “Play” button.

Tip: If you’re not 100% on GraphQL queries, that’s not a problem; Craft comes with a handy guide to help you.

Wrapping Up

We’ve now done a fairly light dive into the world of Craft CMS. Let’s sum up what we’ve accomplished in the following guide:

  • Set up a local development environment with Multipass;
  • Created and set up a brand new Craft install;
  • Added a test domain in which we can access our install;
  • Created a cute cat blog;
  • Gone headless;
  • Created an API endpoint to access our cats.

If you’re interested in getting more involved with Craft CMS and being part of the community, you should join the very active Craft Discord server and read more via the official documentation.

How to Turn One Piece of Content into Multiple for SEO

Posted by liambbarnes

As most SEO specialists have learned, you must create quality content to grow organically. The same thing can be said for businesses that are building a social media presence or a new newsletter following.

But as people consume more and more content each day, they become less receptive to basic content that doesn’t provide a new perspective. To counter this issue, you must make sure that your content is native to each platform you publish on.

However, that doesn’t mean that you need to start from scratch. There’s a way to take one content idea and turn it into multiple, which can scale across multiple platforms and improve your brand awareness.

It takes time to write a brand-new blog article every day, especially when you’re an in-house team with a low number of resources and budget. The biggest challenge here is building a content strategy at scale.

So, how do you create a lot of great content?

You start with video.

If you have a video on a relevant topic, it can be repurposed into various individual pieces of content and distributed over a period of time across the right channels. Let’s walk through the process.

Using video to scale content

Did you know that the average person types at 41 words per minute (WPM), but the average person speaks at about 150 WPM? That is about 3.5 times faster speaking rather than typing. 

In fact, this article was transcribed.

For every article you write about, you must do extensive research, write out your first draft, edit, make changes, and more. It can consume an entire workday.

An easier way to do this? Record yourself on Loom or another video software, save it, and send the video file to an audio/video transcription service. There are so many tools, like Rev.com or TranscribeMe, that do this for relatively cheap.

Of course, even if you’re relying on text-to-speech, there’s still editing time to take into account, and some would argue it will take MORE time to edit a text-to-speech transcription. There isn’t a “best way” to create content, however, for those who aren’t strong writers but are strong speakers, transcription will be a powerful way to move at a quicker pace.

The step-by-step process 

Once you write out your content, how do you ensure that people read it?

Like any other content strategy, make sure that the process of planning, creating, and executing is written down (most likely digitally in a spreadsheet or tracking tool) and followed.

Let’s break down how to get the most out of your content.

1. Grab attention with your topic

    Sometimes, content ideation can be the most challenging part of the process. Depending on the purpose of your content, there are various starting points.

    For example, if you’re writing a top-of-funnel blog article where the goal is to drive high amounts of organic traffic, start by performing keyword research to craft your topic. Why? You need to understand what your audience searches for and how to ensure you’re in the mix of search results. 

    If you’re creating a breakdown of your product or service, you may want to start by interviewing a subject matter expert (SME) to gain real-life details on the product/service and the solutions it provides to your target audience. Why? Note what they’re saying are the most important aspects or if there is a new feature/addition for the audience. These points can be tied into a topic that might pique the target reader’s interest.

    2. Create an outline for the blog

      When you’re building out your blog structure, record a video similar to how you would write a blog article.

      In this case, by creating an outline for the article with the questions that you ask yourself, it’ll be easier to format the transcription and the blog after you record.

      3. Pick your poison (distribution strategy)

      Now that you’re ready to begin recording your video, decide where your content will be distributed.

      The way you’ll distribute your content heavily influences the way you record your video, especially if you’re going to be utilizing the video as the content itself (Hello, YouTube!).

      For example, if you run a business consultancy, the videos that you record should be more professional than if you run an e-commerce surf lifestyle brand. Or, if you know you’re going to be breaking the video up, leave time for natural “breaks” for easy editing later on.

      By planning ahead of time, you give yourself a better idea of where the content will go, and how it will get there.

      4. Your time to shine

      There are numerous free video recording software available, including Zoom and Loom.

      With Zoom, you can record the video of yourself speaking into your camera, and you will get an audio file after you hang up your call.

      With Loom, you can use the chrome extension, which allows you to record yourself in video form while sharing your screen. If you have additional content, like a Powerpoint presentation or a walk-through, this might be the tool for you.

      Regardless of the way that you record, you need an audio file to transcribe and transform into other content formats later on.

      5. Transcribe your video

      The average writer transcribes one hour of audio in around four hours, but some of the best transcribers can do it in as little as two hours.

      To put that into perspective, the average one-hour audio file is about 7,800 words, which would take the average writer around three and a half hours to write.

      Additionally, you have to add research time, internal linking, and many other factors to this, so on average it’ll take around an hour to write 1,000 words of a high-quality blog post.

      Transcription shortens the length of this process.

      When looking to transcribe your audio, you can send files out to transcription tools including Rev or TranscribeMe. Once you send them the audio file, you’ll typically receive the audio file back in a few hours (depending on the demand).

      6. Alter transcription into blog format

      You’ll receive the transcribed content via email, broken out by speaker. This makes it much easier to format post-transcription.

      If you properly outlined the blog prior to recording, then this editing process should be simple. Copy and paste each section into the desired area for your blog and add your photos, keywords, and links as desired.

      7. Chop your video into digestible parts

      Here’s where things get interesting.

      If you’re using your video for social media posts, shorten the video into multiple parts to be distributed across each platform (and make sure they’re built to match each platform’s guidelines).

      Additionally, quotes from the video can be used to create text graphics, text-based social posts, or entire articles themselves.

      Think of the watering holes that your target audience consumes information on the internet:

      • Google
      • LinkedIn
      • Instagram
      • Facebook
      • Twitter
      • YouTube

      Each platform requires creating a different experience that involves new, native content. But that doesn’t mean you have to start at zero.

      If you have a 10-minute-long video, it can be transcribed into a 2,500-word blog that takes about 10-15 minutes to read.

      Boom. You have another resource to share, which can also include proper keywords so it ranks higher on the SERP.

      Let’s say you end up editing the video down to about five minutes. From here, you can make:

      • A five minute video to post on YouTube and your blog
      • Ten 30-second videos to post across several social media platforms
      • Twenty 100-word posts on LinkedIn
      • Thirty 50 to 60-word posts on Twitter

      Woah.

      Not to mention there are other platforms like Reddit and Quora, as well as email marketing, that you can also distribute your content with. (Turn one of the 100-word LinkedIn posts into the opening in your latest newsletter, and attach the full video for those who want to learn more!)

      By starting off with an all-encompassing video, you extend your content capabilities from a regular blog article into 50+ pieces of content across multiple social media platforms and search engines.

      For example, Lewis Howes (and many other brands and marketers) are famous for utilizing this method.

      As you can see below, Howes had an interview for his podcast with Mel Robbins, which is scaled across YouTube and podcast platforms, but he took a quote from her in the interview and scaled it across Instagram, Twitter, and LinkedIn.

      When you build out your content calendar, simply copy and paste certain sections into an excel spreadsheet, and organize them based on date and platform. Make sure they make sense on the platform, add an extra line or two if you need to, and work your magic.

      This will save you hours of time in your planning process.

      8. Distribute

        Now that you have created your various forms of content, it’s time to make sure it appears before the right eyes.

        Having a consistent flow of relevant content on your website and social media platforms is a crucial part of empowering your brand, building credibility, and showing that you’re worth trusting as a potential partner.

        As you repurpose older content as well, you can repeat this process and pull together another 50+ pieces of content from a previously successful article.

        Improving organic search visibility

        “Discoverability” is a popular term in marketing. Another way to say it is “organic search visibility”. Your brand’s search visibility is the percentage of clicks that your website gets in comparison to the total number of clicks for that particular keyword or group of keywords.

        Normally, you can improve your visibility through writing a piece of content that reflects a target keyword the best and build links to that page, which improves your rankings for that keyword and long-tail variations of that keyword.

        However, as you begin to grow your business, you may begin heavily relying on branded search traffic.

        In fact, one of the biggest drivers of organic traffic is branded traffic. If you don’t have an authoritative brand, it’s challenging to receive backlinks naturally, and therefore more difficult to rank organically.

        One of the biggest drivers of brand awareness is through social media. More than 4.5 billion people are using the internet and 3.8 billion are using social media.

        If you want more people to search for your brand, push relevant social media campaigns that do just that.

        But even further than that, we are seeing more and more social media platforms such as Pinterest, YouTube, and Twitter showing up as search results and snippets. For example, below is the SERP for the keyword “how to make cookies”, where a series of YouTube videos show up:

        And this SERP for the keyword “Moz“ has the most recent Tweets from Moz’s Twitter.

        Writing content that ranks will continue to be important — but as Google keeps integrating other forms of social media into the SERPs, make time to post on every social media platform to improve search visibility and make your brand discoverable. 

        But, duplicate content?

        Duplicate content can be defined as the same content used across multiple URLs, and can be detrimental to your website’s health. However, from what we have seen through multiple conversations with marketers in the SEO world, there is no indication that websites are getting penalized for duplicate content when reposting said content on social media platforms.

        Conclusion

        Say goodbye to the time drain of creating one piece of content at a time. The most effective way to create a successful content marketing strategy is to share thought-provoking and data-driven content. Take advantage of this process to maximize your output and visibility.

        Here are some final tips to take away to successfully launch a content marketing strategy, using this method:

        1. Consistently analyze your results and double down on what works.
        2. Don’t be afraid to try new tactics to see what your audience is interested in (Check out a real-world content strategy I helped get results for here).
        3. Analyze the response from your audience. They’ll tell you what is good and what is not!

        Have other ideas? Let me know in the comments! 

        Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don’t have time to hunt down but want to read!

        21+ Free and Effective October Marketing Ideas for Small Businesses

        If you’re into sweet treats, smiles, and social impact, then you’ll find October to be a fun month for creative and quirky marketing. Using holidays and observances as focal points of your content and promotions helps to add a touch of excitement and gives you the opportunity to express your brand voice. Read on to get some October-related ideas and inspiration—for your blog, email, social media, website, and more.

        P.S. Still stuck in September? We’ve got a post for that.

        october marketing ideas breast cancer awareness month

        October awareness marketing ideas                

        Marketing around the awareness causes of any particular month affords your business many opportunities—to support a cause, to help your customers accomplish something fulfilling, and to build up the community around you. The more you can familiarize with and strengthen your local audience, the more natural and effective you can become in your messaging. That being said, let’s go over the awareness themes of October. Here are a few that you may be familiar with:

        • Fire prevention
        • LGBTQ history
        • Breast cancer
        • Anti-bullying
        • Sustainable energy
        • Down syndrome
        • Dyslexia

        What you might not know is that October is also:

        • Bilingual Child Month
        • Church Safety and Security Month
        • Eat Better, Eat Together Month
        • Adopt a Shelter Dog Month
        • Emotional Wellness Month
        • Employee Ownership Month
        • Financial Planning Month
        • Global Diversity Awareness Month

        …and also, there is

        • American Cheese Month (what?)
        • Bat Awareness Month (oh.)

        Let’s take a closer look at these causes and flesh out some free and creative local marketing ideas for each.

        1. National Bullying Prevention Month

        According to this USA Today article, 49% of children in grades 4-12 report being bullied at least once a month. This October awareness cause is particularly relevant to schools and education-based verticals, but also to businesses whose target market is made up of parents of school-aged children. You can promote this cause through your marketing by:

        • Posting stats to social media or providing your followers with anti-bullying resources or organizations they can donate to.
        • Donating a portion of your profits this month to an anti-bullying nonprofit.
        • Running a contest where kids can submit drawings or stories promoting safety, peace, and acceptance.
        october marketing ideas anti-bullying

        2. Domestic Violence Month & Breast Cancer Awareness Month

        October is both Domestic Violence Month and  Breast Cancer Awareness Month. Get involved with a local charitable organization to support these causes and get your name out into the community. Host a Facebook campaign where you donate $1 for every “like” your page receives during the month to a local domestic violence shelter or breast cancer group. Use charitynavigator.com to find one near you.

        3. Energy Awareness Month

        If you’re in the industry, write an article sharing industry stats or your own perspective, and promote it on LinkedIn with key takeaways in the post itself. Make sure to include a #sustainableenergy hashtag, as this is a specific topic that will get searched by those who are interested in reading about it.

        october marketing ideas sustainable energy month

        Another approach would be to share some DIY sustainable energy ideas, whether in the home, office, or classroom.

        october marketing ideas DIY sustainable energy projects

        4. National Business Women’s Week

        Business Women’s Week is a time to acknowledge and applaud female leaders in business. During this week, post relevant articles, stories, and stats that encourage and empower women in the workforce—like this one we wrote debunking myths about women in business.

        october marketing ideas women in business

        Or you may want to conduct interviews with influential women in your company, network, or industry and publish a write-up on your blog.

        october marketing ideas national women in business week

        5. National Customer Service Week

        Customer Service Week occurs the first full week of October. This week affords local marketing opportunities both internally and externally:

        • Spotlight a different customer service team member each day of this week on social media.
        • Offer something a little extra special for your customers, such as a coupon or a branded freebie.
        • Give a shoutout on social media to a business that exhibited exemplary customer service for you personally.
        • Request feedback about your customer service, whether through a survey, a poll, a social media conversation, or—wait for it— social media poll!
        october marketing ideas customer service week

        These initiatives will highlight the importance you place on quality customer service, and consumers are attracted to customer-centered businesses.

        Observance day marketing ideas for October

        As with every other month of the year, October is jam-packed with plenty of national [insert just about anything here] days that can take you 90% of the way when coming up with unique marketing ideas. All you have to do is find a way to tie it back to your business. Let’s take a look.

        6. World Vegetarian Day

        World Vegetarian Day occurs every October 1st. This is, of course, a great time for restaurants or shops with a largely vegetarian audience to give themselves a good ol’ pat on the back on social media or their website.

        october marketing ideas world vegetarian day

        But regardless of industry, you can still get creative with this one:

        • For the more carnivorous restaurants, offer discounts on vegetarian dishes.
        • Health professionals (ideally who are vegetarians), run an AMA via Facebook Live or Instagram Live on vegetarianism
        • In your office (after the pandemic has passed), you could have a vegetarian potluck, with a prize to the best voted dish. You could also simply encourage people to be vegetarian for the day and share their experiences on your social media feed.
        • If applicable to your business, publish relevant blog posts containing recipes, information, experiences,  resources, and more.
        october marketing ideas world vegetarian day

        7. World Smile Day

        World Smile Day is celebrated on the first Friday of October every year. This is ideal for dentists but not limited to them by any means. Promote your best-selling products and services as something to smile about, or use the day to announce the return of a seasonal favorite or new offering.

        october marketing ideas world smile day

        8. National Cake Decorating Day

        National Cake Decorating Day is held every October 10th. Instead of a cake decorating contest, maybe invite your followers to post their cake decorating fails on Instagram or Facebook with a custom hashtag.

        This particular neighborhood market didn’t do exactly that, but they did ask their followers to share their favorite confection creations. Remember, asking your followers to share their own experiences and perspectives on social media strengthens your personal connection with them and helps them to feel valued and heard.

        october marketing ideas cake decorating day

        9. National Boss’s Day

        This Facebook-friendly (and potentially LinkedIn-friendly) holiday occurs every October 16th. You could give a shout-out to your boss. What if you are the boss? All good, choose another boss you know…

        october marketing ideas national bosses day

        10. Get to Know Your Customers Day

        Get to Know Your Customers Day occurs on the third Thursday of the first month of every quarter, and only when the earth is tilted at 23.4 degrees (just kidding on that last part). This is a blatantly awesome marketing day in October, January, April, and July. Engage your audience and collect valuable feedback by sharing surveys and short polls. Ask about items or services they would love to see you offering. Like with this example…

        october marketing ideas customer appreciation day

        …or this one:

        october marketing ideas get to know your customers day polls

        You could also search your company’s hashtag or location on social media and find some user-generated content to repost.

        october marketing ideas get to know your customers day reposts

        General October marketing ideas

        If you’re too scattered during October (or all the time) and don’t have it in you to coordinate a promotion during a specific week or day, try out any of these general October marketing ideas that give you some more flexibility.

        11. Showcase a fall product or service

        While September has songs of summer and November has the whispers of winter, October feels like the only true fall month (P.S. why did I get so poetic just now). This month may be the time to really focus on one of your fall-themed products or services.

        • Interior designers can feature fall-themed projects in their portfolio.
        • Flower shops can display fall-colored bouquets.
        • Restaurants can offer a cinnamon-spiced sangria (anything but pumpkin, please).
        • Landscapers can promote fall specials on Facebook or their Google Business Profile.
        october marketing ideas landscaping special

        To get even more participants, make it a limited-time offer available only for the month.

        12. Send out a fall newsletter

        If you rolled out new customer loyalty programs, ran start-of-school-year specials, or hosted any events during September, share pictures and results in an October email newsletter. You can also include a calendar of any additional specials you are running during the month or for November.

        october marketing ideas newsletter BU

        Image Source

        13. Dabble into the creative arts

        Show customers how to make their own fall- or Halloween-inspired craft or recipe. A blog post with a DIY video showing how to decorate a mantle with fall flowers and miniature pumpkins, or a newsletter that contains menu ideas for a kid’s Halloween party are great starting points, depending on your business.

        There are also plenty of opportunities for a socially-distanced pumpkin-carving or pumpkin-painting night (lots of hyphens in that invitation).

        14. Participate in a pumpkin patch

        Farmers markets or pumpkin patches are abundant during October, so do a little local research to see if there are any annual events where you can set up a stand, offer a sponsorship, or volunteer at. Being involved in local events and causes is a win-win, as it markets your business for you while facilitating community building.

        You could also donate free products or classes as a part of any raffles the event is running.

        october marketing ideas kick or treat

        Image source

        15. Open your doors

        If you’re located on a downtown Main Street of sorts; if you’re in a part of the country where the weather is beautiful at this time; and if it adheres to your community’s COVID-19-standards, literally open your doors. Get some fresh air into your building. This makes your business more inviting to passersby. A chalkboard outside with your specials, an inspiring quote, or a fun fact is an added bonus.

        october marketing ideas open your doors

        16. National Sweetest Day

        According to this source, the National Confectioners’ Association came up with Candy Day back in 1916 as a way to celebrate and support local candy shops and bakeries. During the war in 1917, the message morphed into “Get one for yourself and one for the boys overseas!” Once the war ended, four Michigan confectioners teamed up with the Red Cross to distribute candy to hospitals, orphanages, shelters, and homes across Michigan.

        By 1929, it became official: National Sweetest Day occurs on the third Thursday of October and is associated with charitable giving.

        Halloween marketing ideas

        What kind of October marketing ideas post would this be if I didn’t mention Halloween? Many of these ideas are traditional, tried, and true, but with a little brainstorming and brand voice, you can always add that creative twist to catch your customers’ eyes.

        17. Embrace the Halloween garb

        Get your business in the spirit of the season by decorating your office, store, or even your website and social media pages with all the good stuff: mums, pumpkins, gourds, hay bales, burlap, skeletons, spiderwebs, ghosts, and the list goes on. This is more of a cliche marketing idea, but that doesn’t make it any less effective.

        october marketing ideas embrace halloween

        When you’re proactive with your business’s appearance, this signals to customers that you care about the impression you leave on them, and reminds them that yours is not just a business, but a passion. You might even get really crazy and carve your company logo into a jack-o-lantern to place in your storefront with a[n electric] candle at night.

        18. Host a candy counting contest

        Run a guessing contest to get customer email addresses in store. Put a giant canister of whatever sugary Octobery sweets you choose, and have customers provide their email addresses with their estimate, or write it on the back of their business card. This can be done virtually, too. The winner gets a prize (perhaps all of the candy) ((unless you’re a dentist)) or coupon or discount off their next purchase.

        19. Dress up for Halloween

        I cringe slightly upon giving this suggestion, but I think this could be a great idea for businesses that cater to children. Plus, you don’t have to be in a full-blown clown suit. Dentists and hair dressers can make otherwise scary appointments more fun with a friendly scarecrow, farmer, or cowboy costume. Clowns and vampires might scare the youngsters, so stick with safer or more neutral options.

        20. Host a Halloween costume contest

        This one is also pretty cliche but it’s never not a fun time. Have a costume contest for your students, customers, staff, or even customers’ pets. Share the pictures on your blog, Facebook, Instagram, or Twitter and ask customers to vote for the winners. The winner gets a prize and is featured in next month’s newsletter.

        october marketing ideas costume contest

        Who said the costume contest had to be for humans?

        21. Participate in a Halloween event

        Participating in any Halloween events going on around you—zombie 5k’s, trick-or-trunk nights, kids trick-or-treat afternoon in the office, or any building-wide Halloween activities if you work in a shared space. It’s tough to stop when you’re running a business, but more often than not, the break away from your tasks and the added laughter can actually recharge you and lead you to be more productive in the long run. Plus, the more you can interact with the people in your community, the more you can learn about how to serve them and really make a name for yourself.

        Easy, effective, and inexpensive October marketing

        Running an October-themed marketing campaign is a great way to authenticate your brand, interact more with your local community, and try out new tools and platforms. While they’re fun and creative, they’re also effective and can help you to increase your exposure, attract more customers, and build up your reputation. Try out one of these easy October marketing ideas and get yourself armed and ready for your holiday campaigns.