Here’s a heartwarming post from Stephanie Stimac on her experience teaching kids the very basics of web development:
[…] the response from that class of high school students delighted me and grounded me in a way I haven’t experienced before. What I view as a simple code was absolute magic to them. And for all of us who code, I think we forget it is magic. Computational magic but still magic. HTML and CSS are magic.
Publishing anything on the web is always going to be magic to some degree but sometimes it’s easy to forget on a day to day basis. We have to brush off the cobwebs! Shake our tailfeathers! And remind ourselves and everyone around us that the basics of web development are precious and fun and exciting still. Especially so we can help inspire the next generation of web designers and developers.
The developer’s debugging console has been available in one form or another in web browsers for many years. Starting out as a means for errors to be reported to the developer, its capabilities have increased in many ways; such as automatically logging information like network requests, network responses, security errors or warnings.
There is also a way for a website’s JavaScript to trigger various commands that output to the console for debugging purposes. These commands are contained in a console object available in almost every browser. Even though these features are mostly consistent between browsers, there are a few differences. Some of these differences are simply visual in nature while others do have slight functional differences to keep in mind.
This guide covers what’s available in the console object of Firefox and Chrome as they are often the most popular browsers for development and they do have a few differences in various aspects of the console. The new Chromium-based Edge is essentially the same as Chrome in many ways so, in most cases, the console commands will operate much the same.
The first thing we can do is log the console object itself to see what your browser of choice actually offers.
console.log(console);
This command will output the various properties of the console object as the browser knows them. Most of them are functions and will be rather consistent regardless of browser. If there are differences in the properties of the console object from one browser to another, this way you can see the differences. One such difference I can point out between Firefox and Chrome is that Chrome provides a “memory” property that outputs some basic memory usage stats. Firefox doesn’t provide this property and yet has a “name” property that Chrome does not have.
Thankfully, most of the differences between the browsers tend to be just as trivial. That way, you can be fairly confident that your code will output much the same regardless of the browser in use.
First things first: clear()
With heavy usage of the console comes a very crowded output of text. Sometimes you just want to clear things out and start with a fresh console. Browsers typically provide a button in DevTools that performs this task. However, the console object itself also provides a command to handle this:
console.clear();
This will clear the console and will helpfully inform you of that by outputting a message like “Console was cleared.”
Common usage: debug(), error(), info(), log(), and warn()
There are five commands that at first glance seem to do the exact same thing. And, technically, they do. But browsers provide additional features tied to the five commands to give each their own distinct benefit.
I’m sure many of you have seen console.log() before (I mean, we just talked about it up top) and have probably used it before. Before we get into what you can log in these five commands, let’s see our first minor difference between Chrome and Firefox.
Chrome console showing debug, error, info, log, and warn
This is an example in Chrome of each command outputting a string, such as console.debug('console.debug()');. Notice that some of them have a color treatment to give a visual indication of the type of output it is. The error and warn outputs have an additional icon for even easier identification.
Firefox console showing debug, error, info, log, and warn
Here is the same list in Firefox and, while it looks similar, there are three minor differences. For example, console.debug() is not color-coded and console.info() has an additional icon next to it. In Chrome, both console.error() and console.warn() can be expanded to show additional information about the output while Firefox only does this with console.error(). This additional information provides a trace of the lines of code involved to get to where the particular command was called.
One thing that is useful about these five commands is that the browsers provide filtering options to show or hide each type as you wish. Firefox has them right there at the top of the console above the output while Chrome hides them in a dropdown, labeled “All levels” which you can see in the earlier Chrome console screenshot. “All levels” is there because I have all five set to be shown. If you were to choose the “Default” option then the debug output (listed as “Verbose”) is hidden while the others are shown. Unchecking “Info”, “Warnings”, or “Errors” causes the dropdown to display a different title such as “Custom levels” or “Errors only” depending on what is selected.
The intentions for usage of error and warn are easy to determine; how to use the other choices is up to you. If you do make extensive use of the different options then you might consider documenting the expectations of each as to not confuse things late in the project — especially if it is a team project.
Now, let’s discuss what we can actually log inside these commands. Since they all behave the same, I’ll just focus on logging as the example.
The simplest examples involve just passing a string, number, object, or array into the log command. Technically, any of JavaScript’s data types can be used, but for most of them, the output is much the same.
Chrome string, number, object, and array log examples
I’m showing these examples in Chrome with the object and array already expanded. They are normally collapsed but the output next to the arrow is consistent between both states. Firefox displays a little differently but, for the most part, the output is the same. Firefox does tell you whether it is displaying an object or array before expanding, but shows the same as Chrome while expanded.
One interesting thing to add is that you can pass more than one item to the log as parameters and it’ll display them inline.
Chrome strings, numbers, objects, and arrays examples
Often when I’m working with x and y coordinates, such as what can be outputted by mouse events, it’s useful to log the two together in one statement.
String substitution
The different console logging commands provide string substitution that allows inserting different values into the string for output. This is useful for describing a variable in the log to make it clear as to what’s being reported.
console.log('This is a string: %s', 'string');
console.log('This is a number: %i', 42);
console.log('This is an object: %o', {object: 'object'});
Chrome string substitution examples
Here is a list of the data types that can substituted into the output string:
Data type
Substitution symbol
Objects and arrays
%o or %O
Integers
%d or %i
Strings
%s
Floats
%f
The first parameter would be the string to output with the symbols placed in the appropriate locations. Then each parameter after that is the value to substitute inside the first parameter’s string. Keep in mind that you’ll have to keep the substitution types and the parameters in the specific order or you’ll get unexpected results.
If your console supports template literals, it’s a bit easier to get similar results as string substitutions.
console.log(`This is a string: ${'string'}`);
console.log(`This is a number: ${42}`);
console.log(`This is an object: ${{object: 'object'}}`);
Chrome template literal examples
Notice that the object is handled a bit better with the string substitution, so pick the appropriate choice for your requirements. Since it’s possible to insert more than one value in the output, let’s compare the two.
console.log('This is a string: %s. This is a number: %i', 'string', 42);
console.log(`This is a string: ${'string'}. This is a number: ${42}`);
Chrome string substitution and template literals
With the string substitution each value is added as a parameter to be inserted into the output. With template literals, on the other hand, you add them wherever they need to be in the output. Also, you can combine them.
console.log(`This is a number: ${42}. This is an object: %o`, {object: 'object'});
Chrome string substitution with template literals
So, there are lots of options to pick and choose from so you can go with the best options for your needs.
Styling the output
Another potentially useful and fun thing is that you can apply CSS styles to the console’s output. It works just like the string substitution method where you insert a %c variable for styles to be applied from the parameters.
Here’s a simple example:
console.log('%cThis is large red text', 'color: red; font-size: 30px;');
Chrome styling in the console
This time there is a slight difference in the Firefox output:
Firefox styling in the console
Not really that much of a difference, but something to keep in mind.
What essentially happens is that %c reads the strings in the parameters to determine what styling to apply. So, say there’s a second styling being passed, %c moves on to the next parameter, much like with string substitution. An empty string in the parameter list resets the styling back to default.
console.log('This is %cred text %cand this is %cgreen text.', 'color: red;', '', 'color: green;');
Using multiple styles in the Chrome console.
The styling properties available are rather limited when compared to typical CSS styling on a webpage. You can look at it as a sort of inline block of text that allow you to manipulate a limited set of styling properties.
With some work and experimenting, you could create interesting messaging within the console. One idea is to draw extra attention to a particular log, especially an error of some sort.
In this example, we can see that the CSS is a bit verbose, but there is something we can do to mimic the class system that we leverage in CSS. The values of each parameter for styling can be stored in variables to allow for repeated use without having to duplicate the string of styles in each parameter.
There are several things going on here, so let’s break it down a bit. First, we have a collection of variables that holds our styling strings. Think of each as a sort of class to be reused in the parameters of the console log.
We are also using a template literal in the log, which means we can have line breaks in our output. Then, for each %c in the text, there’s a corresponding variable used in a parameter to define the styles for that particular part of the output text. In addition to each variable that holds styling, there is also a clearStyles argument that can be used to reset styles to prepare for the next set of styling. You could just use an empty string as in previous examples, but I like the clear intention that comes from using the variable name. The last parameter shows that the variables can be combined, which opens up more possible ways of handling the styles.
Now, that’s a great deal of text covering essentially five console commands that only output text to the console. So, let’s move on to other commands of the console object. Although, some of these can still use many of the features described so far, we won’t focus on that aspect as much with the following commands.
Being assertive: assert()
The console.assert() command is similar to the error command mentioned previously. The difference is that asserting allows for the usage of a boolean condition to determine whether it should output the text to the console.
For example, let’s say you wanted to test the value of a variable and make sure it wasn’t larger than a certain number value. If the variable is below that number and the condition resolves to true, the assert command does nothing. If the condition resolves to false, then the output text is displayed. This way you don’t have to wrap a console.error() command with an if statement to determine if the error message is needed in the first place.
let value = 10;
console.assert(value <= 7, 'The value is greater than 7.');
Chrome assert example
We can see that assert has the same appearance as the error command, except that it also prepends “Assertion failed:” to the output text. Chrome can also expand this output to show a trace of where the assertion came from.
The trace can be quite helpful with common patterns of functions within functions calling other functions and so on. Although, you can see in the example above that the line the assert came from doesn’t tell you how the code got to that line.
let value = 10;
function function_one () {
function_two();
}
function function_two () {
function_three();
}
function function_three() {
console.assert(value < 7, 'This was false.');
}
function_one();
Chrome assert with trace
This sequence is actually in reverse order in terms of the code. The last line shows an anonymous entry (which is an HTML script tag in this case) on line 78. That’s where function_one was called. Inside that function, we have a call for function_two, which, in turn, calls function_three. Inside that last function is where the assert is located. So, in this development world of functions sharing other functions; a description of the path to that point of the assert is quite handy.
Unfortunately, this trace is not provided in Firefox with the assert command, as it is with the error command.
Firefox assert example
Keeping count: count() and countReset()
Ever wonder how many times a certain thing happens in your code? For instance, how many times does a particular function get called during a sequence of events? That’s where the console.count() command can help out.
By itself, the count command is rather simple and has limited use. If you use the command in its default state you only get a simple count. For example, if we call it three times in a row, we get a sequential count.
As you can see, we get a simple count from one to three. The default behavior means that count is merely incrementing the output by one each time it runs, no matter where it shows up in the code. You do get the line number in the code where it happened, but the count is a simple total no matter the situation.
To make this command a bit more useful, we can provide a label to keep a separate count for that label.
Even though using the count command with labels causes the output to alternate between labels, each one keeps its own count. One scenario where this comes in handy is placing a count inside a function so that every time that function is called, the count is incremented. The label option makes it so that a count can be kept for individual functions to provide for a good idea of how many times each function is being called. That’s great for troubleshooting performance bottlenecks or simply seeing how much work a page is doing.
There’s a way to reset the count. Let’s say we have a loop that gets called multiple times, but the number of iterations of the loop can be dynamic. This is done with the console.countReset() command with the same label from the count command.
console.count();
console.count();
console.countReset();
console.count();
console.count('this is a label');
console.count('this is a label');
console.countReset('this is a label');
console.count('this is a label');
Chrome count reset example
Each count — with and without a label — is called twice and console.countReset() is applied right before another count instance. You can see that Chrome counts up to two, then restarts when it encounters countReset. There’s nothing in DevTools to indicate the reset happened, so an assumption is made that it did happen because the count started over.
And yet, the same code is a bit different in Firefox.
Firefox count reset example
Here, the reset is indicated by the count being set all the way back to zero. That is the indicator that the reset was called, whereas we have no such indication in Chrome.
As for label options, just about anything can be used. I suppose a simple way to describe it is that if you give it anything that can be resolved to a string, it’ll probably work as a label. You could even use a variable that has values that change over time, where count will use the current value of the variable as a label each time it is encountered. So, you could keep count of the values as they change over time.
Describe that thing: dir() and dirxml()
The main idea behind these two commands is to display either properties of a Javascript object with console.dir() or descendant elements of an XML/HTML element with console.dirxml(). It appears Chrome has these implemented as expected, while Firefox just uses both as aliases for console.log().
Let’s give console.log(), console.dir(), and console.dirxml() the same simple object to see what we get. Keep in mind that you normally would not log an object with console.dirxml().
Firefox gives us much the same, except the console.dir() is automatically expanded.
Firefox simple dir() and dirxml() example
Another simple comparison to console.log() is to repeat the object in the same command.
Chrome dir() and dirxml() double exampleFirefox dir() and dirxml() double example
Not really that much different other than that Chrome doesn’t show the second object in console.dir() like Firefox does. Which makes sense because Chrome is trying to display properties of an object (ignoring the second) while Firefox is just aliasing everything to a console.log(). So, for situations like this with objects there is little difference between console.log(), console.dir(), and console.dirxml() in the browsers.
A useful benefit of console.dir() in Chrome that I can point out is how DOM elements are handled. For example, here’s how console.log() displays in Chrome and Firefox when given a DOM element.
Chrome console.log() DOM example.Firefox console.log() DOM example
Now, I’ve always liked how Firefox outputs a DOM element inside a console.log(), as it gives you all the properties of that DOM element. So, when I wanted to look up a specific property of a DOM element to manipulate with JavaScript, it’s only a console.log() away to find it. Chrome, on the other hand, gives us the HTML code of the DOM element in the console.log() just like it would in console.dirxml().
To get the properties in Chrome, use console.dir() with the DOM element. I was quite happy to find that console.dir() in Chrome provides the properties of a DOM element just as I came to rely on that information in Firefox.
As for console.dirxml() in Chrome, it can be useful for displaying an HTML element and its children outside of the clutter of the DOM Inspector. You can even edit some of the existing HTML live in the console, but you won’t have the same level of abilities as in the DOM Inspector.
Let’s get together: group(), groupCollapsed(), and groupEnd()
Here’s a simple one: Group different console outputs together to show a form of relationship among them. It is somewhat limited in features so its usefulness will depend a great deal on how you plan to use it. This is the console.group() command.
console.group();
console.log('one');
console.log('two');
console.log('three');
console.groupEnd();
console.group('this is a label');
console.log('one');
console.log('two');
console.log('three');
console.groupEnd();
Chrome group() example
In the first block of code we call console.group() in its default state, have three logs, and then finally call console.groupEnd(). The console.groupEnd() simply defines the end of the grouping. The second block has a string as a parameter that essentially becomes the label for that group. Notice that in the first block without a label it just identifies itself as a console.group in Chrome while in Firefox it shows as . In most cases, you’ll want a proper label to distinguish between groups.
Also notice the arrow next to the labels. Clicking on that collapses the group. In the code examples above, if we change console.group() to console.groupCollapsed(), they start collapsed and must be opened to see the output.
You can also nest the groups. The console.groupEnd() command simply refers to the last opened group.
Just as a quick note, if you want the group label to stand out a bit more in a list of output in the console, you can style it just as we did with strings earlier.
In previous examples, we’ve seen what happens when we put an array or object inside a console.log() or console.dir(). There’s another option for these data types for a more structured display, which is console.table().
Here’s a simple example with an array:
let basicArray = [
'one',
'two',
'three'
];
console.table(basicArray);
Chrome basic array table() example
Here’s the same example in Firefox for comparison.
Firefox basic array table() example
A slight visual difference, but pretty much the same. That said, Chrome does still give you the expandable output under the table, much like you’d see in console.log(). Chrome will also provide basic column sorting if you click on the heading.
So, that was a pretty simple example with basic outputs. How about something a little more complex and is often used in coding projects? Let’s look at an array of objects.
As you can see, this gets us a nice layout of objects with repeating keys as column labels. Imagine data along the lines of user information, dates, or whatever might be data often used in loops. Keep in mind that all the keys in each of the objects will be represented as a column, whether there is corresponding keys with data in the other objects. If an object doesn’t have data for a key’s column, it appears as empty.
An array of arrays is similar to the array of objects. Instead of keys being labels for the columns, it uses the index of the inner arrays as column labels. So if an array has more items than the other arrays, then there will be blank items in the table for those columns. Just like with the array of objects.
So far, simple arrays and objects have simple output displayed. Even a slightly more complex array of objects still has a solid, useful structure. Things can get a bit different with mixing the data types though.
For example, an array of arrays where one of the inner array items is an object.
Chrome array of arrays with object table() example
Now, to see what is contained in those objects in the third column, we’ll have to expand that array output below the table. Not that bad, really. Here’s how Firefox handles the same output.
Firefox array of array with object table() example
Firefox just lets us expand the object within the table.
How about mixing the data types the other way, where we have an object with arrays as values for each key? It works much the same as the array of arrays. The difference is that each row is labeled with a key instead of the index. Of course, for each level of data type you add to the mix will result in a more complex looking table.
This is all about: time(), timeLog(), and timeEnd()
Here we have a simple way to log how long something takes to complete. We call console.time() with a label, call console.timeLog() with the same label for an update, and call console.timeEnd() again with the same label to stop the timer.
console.time('this is a timer');
console.timeLog('this is a timer');
console.timeEnd('this is a timer');
The output for Chrome and Firefox is much the same. Here’s an example output with code that logs the time every second for five seconds and then stops.
Chrome time() exampleFirefox time() example
Notice that the reported times are not quite the same, but probably close enough for most requirements. Also, Firefox is nice enough to note that the timer has ended while Chrome requires an assumption once the label stops appearing. The first four lines of output come from the call console.timeLog('this is a timer'); and the last line is from the call to console.timeEnd('this is a timer');.
Dropping breadcrumbs with: trace()
The console.trace() command is actually similar to console.error() and console.warn(). Calling this command will output a stack trace to the console showing the path through the code to that call. We can even pass it a string as a form of label, but other data types such as arrays or objects can be passed. The behavior of passing data like that is the same as what we would get from a console.log() call. It’s a simple way to pass along some information to the console without triggering a more dire looking console.error() or console.warn() call.
debugger
This is a simple command to trigger a pause in the console’s debugger, if it exists. It is similar to placing a breakpoint in the debugger, or the browser’s equivalent, to cause the same type of pause while executing code. Here’s a simple example:
function whatsInHere() {
debugger;
// rest of the code
}
In this particular example, the open console’s debugger will pause code execution and the browser will open up the source file to show the line of code as soon as the function is called. It could be useful for easy breakpoints with some complicated projects.
Technically, the debugger command isn’t a part of the console object in the browser. It’s a useful feature that the console will respond to from JavaScript code.
Some additional console utilities
That’s a good look at most of the standard commands available to us in the console object. Each of these will work more-or-less the same across modern browsers. There may be some differences between browsers, as we saw in some of the examples. But there are a few more things I’d like to take a moment to point out, as they might prove useful in various ways.
The following examples can be considered more like console “utilities.” They are not a part of the console object like most of the previous examples. Therefore they are not called with a leading console object reference. These utilities are supported directly by the browsers themselves. They cannot be called from JavaScript code but must be typed directly in the console to be used. In some cases the utility might be unique to a particular browser, in others the utility is supported much the same way in several browsers. Your mileage may vary based on your browser of choice.
$0, $1, $2, $3, $4
These five commands are extremely handy. The first one, $0, represents the currently selected element in the DOM inspector. This essentially provides a shortcut instead of having to use more traditional DOM methods, such as getElementById or a querySelector. You can use it in various ways, within various console commands, or by itself to get information about the currently selected element. For example:
console.log($0);
The other commands in this set represent elements that were previously selected. Think of them as a form of selection history. $1 is the previous element, $2 is the previous before that, and so on. Although the first command is available in Firefox, the commands for previously selected elements are not.
$(‘element’), $$(‘elements’)
If you find yourself typing out document.querySelector('element') in the console repeatedly, there’s a shortcut. You can just type $('element') and it performs the same function. The shortcut might remind many of jQuery, but to select multiple elements reminds me of MooTools. To select multiple elements, you’d use $$('elements') instead of document.querySelectorAll('elements').
$x(‘//element’)
This is a shortcut for XPath that will return an array of elements that match the expression. An easy example is $x('//div'), which will present an array of every div element on the page. This isn’t that much different than using $$('div') like we did with $('element'), but there are many options for writing XPath expressions.
One example of a simple step up in a XPath expression is $x('//div[span]'), which would return the div elements on the page that happen to contain a span element. This is the equivalent of :has in CSS Selectors Level 4 draft, which isn’t supported in browsers yet.
These are just basic examples that only scratch the surface of XPath.
clear()
This is another version of console.clear(), but without the “Console was cleared” message.
getEventListeners(object)
This command, when given a DOM element, will report the event listeners registered to that element. For example, using the $0 example from above we can use getEventListeners($0) to get something like this:
Chrome getEventListeners() example
Expanding each item in the array provides various information about that event listener. This function isn’t supported in Firefox, but it does offer something similar that can be found in the DOM inspector.
Firefox DOM Inspector events information.
Clicking on the “event” badge next to the element provides a list of events registered to the element. Then each event can be expanded to show the code involved with the event.
That’s it for now!
I’ll end it here, with a large amount of information detailing various commands that can be used in the browser’s console output or with JavaScript. This isn’t everything that is possible — there’s simply too much to cover. In some cases, each browser has its own capabilities or utilities that can be leveraged. We looked at the bulk of what we might find in Chrome and Firefox, but there’s likely more out there. Plus, there will always be new features introduced in the future. I invite you to dig deeper to discover more ways to leverage browser DevTools for your coding projects.
This is mostly for native iOS apps kinda stuff, but it makes me wonder how much of this is expected when doing a mobile Progressive Web App. On one hand, this kind of stuff looks fun to try to build on the web, and it would be kinda cool to make your web app feel super native. On the other hand, doesn’t that make it extra awkward for Android and other non-iOS platforms?
A few other thoughts:
How much of this stuff do you get “for free” with SwiftUI?
As I understand it, when you build apps with Flutter / Material, the native apps that get built do some smart cross-platform stuff, mimicking how that platform does things.
Erik also does very in-depth design training with enrollment only opening once in a while, the next opens March 4th.
Here are 3 strategies you should consider if your website is struggling. We’ll cover:
Web analytics and split testing
In-person testing
Simplifying your sales process
If possible, implement these strategies ahead of time before you run into any issues. I’m going to cover why these strategies are effective and what they are good at resolving.
1. Analytics and Split Testing
If you don’t know when or where your users are leaving, then you’re missing ou; this is extremely unhelpful if you are selling something.
Analytics will let you see the average amount of time spent per page, and which page your customers are exiting your website from.
If a user views your website and leaves after visiting your homepage without going any further, then you know exactly what to change. If they are spending an excessive amount of time navigating through simple parts of your sales process, then you know something may be wrong, and you should address it.
AB split testing…is particularly good at resolving weak points on your website where visitors are…changing their minds
Depending on which page of your website they are on, you may want them spending more or less time on it. An abnormally high amount of users abandoning their shopping cart might mean your checkout isn’t providing the user with a positive experience.
AB split testing refers to displaying different versions of the same page to different visitors. It is particularly good at resolving weak points on your website where visitors are leaving or changing their minds about going ahead with what you want them to (e.g. buying a product).
Let’s say we have 2000 page visitors, and 70% are leaving immediately from the landing page, and 600 are proceeding forward (30% click-through rate). Instead of presenting one landing page to all visitors, we display two landing pages and show one landing page to half the visitors, and the second landing page to the other half.
We make some changes to the original landing page and send some of the users to the new version and some to the original version. We do this to see if the new landing page will have a better click-through than the original, 30%.
A quick example for a skydiving company: Group A visitors see ‘Book’ in a smaller sized button, whereas Group B visitors see ‘Skydive NOW!’ in a larger sized button. If the ‘Skydive NOW!’ button improves the number of bookings the site receives, we could consider using Group B as the new control and further work on optimising the booking page, perhaps by creating a modification in which ‘Skydive NOW!’ has a different color scheme or is placed in a different position on the page.
This could be a minor re-design, such as changing the color of a button, to something more enticing, or a major re-design.
You can also display more than two versions of a page simultaneously, making multiple modifications, displaying three or more versions to different users. In this case, we would have the original version, A, and two or more modified pages B, C … so on. This can make split testing quicker by immediately testing multiple possibilities but it adds complexity to the process.
2. In-Person Testing
In-person, or remote testing, is a strategy in which you recruit a user to test your website by undertaking various tasks e.g., Buy a specific product and ship it to your home, or find some specific information on your website.
This should be done regularly during the web building process as by doing so when you launch your website, you might uncover major or recurring problems that could have been prevented. If you do it in early development stages, you can use the information from the test to plan before you start building things that don’t work!
If your website is already live and you overlooked testing beforehand, it’s not too late
If your website is already live and you overlooked testing beforehand, it’s not too late. You can still employ a handful of individuals to test it now.
In-person testing is typically done where you supervise an individual and instruct them to carry out certain tasks and take note of how they are navigating your website by seeing the way they browse the page and/or move their mouse. Ask them to think out loud. You should also ask them why they selected that option over another, what they liked about a particular feature, etc. ??
If you already know which areas of your website need to be worked on, but you’re unsure of how to improve on it, you could ask your tester for specific insight.
I typically choose three users for testing, as it’s quick, easy, cheap, and manages to uncover lots of flaws I may have overlooked. Having more users testing the website can be beneficial, but typically most users end up pointing out the same weaknesses.
This is an effective strategy because having a handful of people test your website is like having someone read over your writing. You may not pick up on your own mistakes, but someone else will. It’s also important to note that the way (you), a web-designer browses the web is different from how the average person browses the web. You may have a perfect understanding of what is happening on your website because you created it. Still, someone who is using it for the first time won’t have the same knowledge and experience as you and will try to undertake tasks in the simplest, most intuitive way.
Remote testing is the same principle as in-person testing but executed remotely. This may save you the hassle of meeting up, but might mean that you need to use software (such as a camcorder) to monitor their browsing, along with voice or video calling, to discuss the process with them.
3. Simplifying Your Sales Process
Are you taking care of your customers and guiding them through their purchases?
What happens after your user lands on your website? Is there a good value proposition (product, service, or information that is appealing) compelling them to purchase?
Excellent, now you need to make sure the process is transparent and straightforward.
Be upfront about any extra fees or shipping costs. Let them know how long shipping may take. Customers want to feel like they can trust you.
Customers want to feel like they can trust you
Write out an FAQ (Frequently Asked Questions) addressing common concerns a potential customer may have. E.g., Let’s say I’m buying a dual SIM mobile (two sim cards, one mobile), I want to know which country the product is from, I want to know about the warranty, I may especially want to know details about the phone will store numbers from different cards.
Have an FAQ section addressing general sales questions and a product-specific FAQ. Along with that, address the product specifications and show high-quality photos or videos.
When the customer is satisfied with what they’ve selected, make the checkout process easy. Allow guest checkout if it’s a suitable option for your website. ??Show your customers you care about them and create reasons for them to want to share your website and products. Once you’ve made your sale, send them a follow-up email or little thank you. This will lead to more engagement and a repeat customer. Remember, selling a product isn’t the end goal. Making someone become a lifelong customer is, and you need to facilitate that.
The unprecedented rise of cryptocurrencies, and their underpinning blockchain technology, have taken the world by storm — from the humble beginnings of being an academic concept over a decade ago to current increased adoption in various industries.
The blockchain technology is receiving a lot of attention because of its ability to enhance security in trustless environments, enforce decentralization, and make processes efficient.
Traditionally, Python has been the de facto programming language for blockchain development. However, with the proliferation of this amazing technology, the development options have also increased — and Node.js has not been left behind.
In this tutorial, I’m going to talk about how to build a simple cryptocurrency blockchain in Node.js. It’s not going to be too fancy, but just sufficient to assist you to understand how a blockchain works.
I’ll call this simple cryptocurrency smashingCoin.
If you are a JavaScript developer who wants to take a leap into the burgeoning field of cryptocurrency, this article will equip you with the necessary skills to get started. Or, if you’re curious about how things work in the world of cryptocurrencies, then this tutorial may help in answering some of your questions.
To follow this tutorial successfully, you’ll need to have the following:
Node.js installed on your machine. You can download it from here;
A code editor, such as Visual Studio Code, Sublime Text, or any other.
Let’s get started…
What Is A Blockchain?
Blockchain is the technology that powers digital currencies, such as Bitcoin and Ethereum. It is an innovative distributed public ledger technology that maintains a continuously growing list of records, referred to as blocks, which are connected securely using cryptography.
The term blockchain has earned its name because of the manner it keeps transaction data, i.e. in blocks that are connected to each other to create a chain. The size of the blockchain grows with an increase in the number of transactions undertaken.
Any valid transaction data is logged into the blockchain network, which is governed by peer-to-peer rules that the participants stipulate. For example, this data could contain the “value” of the block such as in digital currencies, a record of transactions (such as when parties exchange goods and services), or entitlement privileges such as when the chain records ownership information.
Besides the transaction data, every block may contain its own cryptographic hash (a unique identifier or digital footprint), its own nonce value (an arbitrary random number used once in cryptographic computations), the hash of the previous block, and a timestamp of recent authenticated transactions.
Since every new block should point to the previous block, if a block is incorporated into the chain without containing the right hash of the last block, it could render the entire blockchain invalid. This immutability property is key to the security of blockchains.
Furthermore, various types of consensus protocols are often applied to maintain the authenticity of the blockchain. Consensus ensures that all participants agree to the network-validated transactions.
For example, a commonly used consensus protocol is proof of work, which aims to identify a number that finds a solution to a complicated mathematical problem after completing a certain amount of computing work.
The main idea of proof work is that any participant in the blockchain network should find this number difficult to identify but easily verifiable. Consequently, it discourages spamming and tampering with the structure of the blockchain.
In the case of most cryptocurrencies, adding a new block to the blockchain requires solving a complex mathematical equation, which increases in difficulty over time as the blockchain grows. Consequently, any person who proves that they’ve done work by solving this problem is compensated with a digital currency, in a process referred to as “mining”.
How To Create A Block
Now, after introducing the blockchain technology and how it works, let’s see how we can apply the concepts in creating a block. As earlier mentioned, blocks are what interlink to each other to form a blockchain.
To create the smashingCoin currency, I’ll use JavaScript classes, which were introduced in ES6.
As you can see in the code above, I created the CryptoBlock class and added the constructor() method to it — just like it’s done in any other JavaScript class. Then, to initialize its properties, I assigned the following parameters to the constructor method:
index
It’s a unique number that tracks the position of every block in the entire blockchain.
timestamp
It keeps a record of the time of occurrence of each completed transaction.
data
It provides data about the completed transactions, such as the sender details, recipient’s details, and quantity transacted.
precedingHash
It points to the hash of the preceding block in the blockchain, something important in maintaining the blockchain’s integrity.
Furthermore, I used the computeHash method to calculate the hash of the block based on its properties, as given in the data above.
As you can see, I imported the crypto-js JavaScript library and used its crypto-js/sha256 module to calculate the hash of each block. Since the module returns a number object, I used the toString() method to convert it into a string.
To add the crypto-js library to your project, go the terminal and run the following command to install it using npm:
npm install --save crypto-js
After running the above command, the node modules directory, which contains the library and other essential files, will be added to your project’s folder.
How To Create A Blockchain
As earlier explained, the blockchain technology is based on the concept that all the blocks are chained to one another. So, let’s create a CryptoBlockchain class that will be responsible for handling the operations of the entire chain. This is where the rubber is going to meet the road.
The CryptoBlockchain class will maintain the operations of the blockchain using helper methods that accomplish different tasks, such as creating new blocks and adding them to the chain.
Here is the code for the CryptoBlockchain class:
class CryptoBlockchain{
constructor(){
this.blockchain = [this.startGenesisBlock()];
}
startGenesisBlock(){
return new CryptoBlock(0, "01/01/2020", "Initial Block in the Chain", "0");
}
obtainLatestBlock(){
return this.blockchain[this.blockchain.length - 1];
}
addNewBlock(newBlock){
newBlock.precedingHash = this.obtainLatestBlock().hash;
newBlock.hash = newBlock.computeHash();
this.blockchain.push(newBlock);
}
}
Let me talk about the roles of each of the helper methods that constitute the CryptoBlockchain class.
1. Constructor Method
This method instantiates the blockchain. Inside the constructor, I created the blockchain property, which refers to an array of blocks. Notice that I passed to it the startGenesisBlock() method, which creates the initial block in the chain.
2. Creating The Genesis Block
In a blockchain, the genesis block refers to the first-ever block created on the network. Whenever a block is integrated with the rest of the chain, it should reference the preceding block.
Conversely, in the case of this initial block, it does not have any preceding block to point to. Therefore, a genesis block is usually hardcoded into the blockchain. This way, subsequent blocks can be created on it. It usually has an index of 0.
I used the startGenesisBlock() method to create the genesis block. Notice that I created it using the afore-created CryptoBlock class and passed the index, timestamp, data, and precedingHash parameters.
3. Obtaining The Latest Block
Getting the latest block in the blockchain assists in ensuring the hash of the current block points to the hash of the previous block — thus maintaining the chain’s integrity.
I used the obtainLatestBlock() method to retrieve it.
4. Adding New Blocks
I used the addNewBlock() method to add a new block to the chain. To accomplish this, I set the previous hash of the new block to be equal to the hash of the last block in the chain — thus ensuring the chain is tamper-proof.
Since the properties of the new block get changed with every new calculation, it’s important to calculate its cryptographic hash again. After updating its hash, the new block is pushed into the blockchain array.
In reality, adding a new block to a blockchain is not that easy because of the several checks that have been placed. Nonetheless, for this simple cryptocurrency, it’s enough to demonstrate how a blockchain actually works.
Testing The Blockchain
Now, let’s test our simple blockchain and see if it works.
As you can see in the code above, I created a new instance of the CryptoBlockchain class and named it as smashingCoin. Then, I added two blocks into the blockchain using some arbitrary values. In the data parameter, I used an object and added sender details, recipient’s details, and quantity transacted.
If I run the code on the terminal, here is the output I get:
Testing to see if our blockchain works. (Large preview)
That’s what the smashingCoin looks like!
It’s an object that contains the blockchain property, which is an array containing all the blocks in the chain. As you can see in the image above, each block references the hash of the previous block. For example, the second block references the hash of the first block.
After testing and seeing that our blockchain works, let’s add some more functionalities to enhance the features of the smashingCoin.
How To Verify The Blockchain’s Integrity
As earlier mentioned, a key characteristic of a blockchain is that once a block has been added to the chain, it cannot be changed without invalidating the integrity of the rest of the chain.
Therefore, to verify the integrity of the blockchain, I’ll add a checkChainValidity() method to the CryptoBlockchain class.
Hashes are critical for ensuring the validity and security of a blockchain because any change in the contents of a block will result in the production of an entirely new hash, and invalidating the blockchain.
As such, the checkChainValidity() method will make use of if statements to verify whether the hash of every block has been tampered with. Starting from the first created block, it’ll loop over the entire blockchain and check for its validity. Note that since the genesis block was hardcoded, it’ll not be checked.
Also, the method will verify whether the hashes of each two consecutive blocks are pointing to one another. If the integrity of the blockchain has not been compromised, it returns true; otherwise, in case of any anomalies, it returns false.
Here is the code:
checkChainValidity(){
for(let i = 1; i
How To Add Proof Of Work
As earlier mentioned, proof of work is the concept applied to increase the difficulty entailed in mining or adding new blocks to the blockchain.
In the case of smashingCoin, I’ll employ a simple algorithm that deters people from generating new blocks easily or spamming the blockchain.
So, in the CryptoBlock class, I’ll add another method called proofOfWork().Essentially, this simple algorithm identifies a number, passed as a difficulty property, such that the hash of every block contains leading zeros that correspond to this difficulty level.
Ensuring the hash of every block begins with the number of zeros as set in the difficulty level requires a lot of computing power. The higher the difficulty level, the more time it takes to mine new blocks.
Furthermore, I’ll add a random nonce value to every hashed block such that, when rehashing takes place, the difficulty level restrictions can still be met.
If I run the code on the terminal, here is the output I get:
At last, our smashingCoin cryptocurrency! (Large preview)
As you can see on the image above, the hashes now start with four zeros, which correspond with the difficulty level set in the proof of work mechanism.
Conclusion
That’s it! That’s how you can build a simple cryptocurrency blockchain using Node.js.
Of course, the smashingCoin cryptocurrency is far from complete. In fact, if you release it without making more improvements, it is unlikely to meet the current market demands for a secure, reliable, and intuitive digital currency — making you the only one using it!
Nonetheless, I hope that this tutorial has equipped you with some basic skills to get your feet wet in the thrilling world of cryptos.
If you have any comments or questions, please post them below.
Every once in a while I’m motivated to attempt to draw some shapes with , the all-powerful drawing syntax of SVG. I only understand a fragment of what it all can do, but I know enough to be dangerous. All the straight-line syntax commands (like L) are pretty straightforward and I find the curved Q command fairly intuitive. Box yourself into a viewBox="0 0 100 100" and drawing simple stuff doesn’t seem so bad.
Here’s a classic example of mine that draws things with all the basic commands, but also animates them with CSS (Chromium browsers only):
The other day I had a situation where I needed a UI element that has a different icon depending on what state it’s in. It was kind of a “log” shape so the default was straight lines, kinda like a hamburger menu (only four lines so it read more like lines of text), then other various states.
DEFAULT
ACTIVE
SUCCESS
ERROR
First I wrote the most complicated state machine in the world:
…I can alter those paths in CSS for the rest of the states. For example, I can take those four straight lines and alter them in CSS.
Note the four “straight” lines conveniently have an unused curve point in them. Only paths that have the same number and type of points in them can be animated in CSS. Putting the curve point in there opens doors.
These four new paths actually draw something close to a circle!
For the other states, I drew a crude checkmark (for SUCCESS) and a crude exclamation point (for FAILURE).
Here’s a demo (again, Chromium), where you can click it to change the states:
CodePen Embed Fallback
I didn’t end up using the thing because neither Firefox nor Safari support the d: path(); thing in CSS. Not that it doesn’t animate them, it just doesn’t work period, so it was out for me. I just ended up swapping out the icons in the different states.
The advantages of using SVGs in web development are well known. SVGs are small in size, can be made quite accessible, are scalable while maintaining their quality, and can be animated. Still, there is a learning curve. Things, like the syntax of SVG, can be a little tricky and having to hand-alter SVG code sometimes isn’t out of the question.
Most SVG assets allow styling to be applied in predictable ways. For instance, this circle has a hover state that functions much like any other element in the DOM.
CodePen Embed Fallback
However, a problem I’ve encountered on several front-end projects is being provided a sub-optimal SVG asset by a client, designer, or brand resources site. There isn’t anything “wrong” with these files, but the SVG code requires manual revision to achieve necessary functionality. Instead of requesting new files, it is often easier to tweak them myself.
Styling SVGs is complicated by the fact that, as XML-based files, they act like HTML in some respects, but not in others. Let’s work with an example provided by Instagram themselves (which is also easily findable on Wikipedia). Because the spaces in between paths act as a sort of transparency this image displays whatever background has been applied behind it.
Why isn’t there a background color on the SVG so we can apply a color change on hover (e.g. svg:hover { background: #888; })? It’s because the paths fill the reverse of the space you would think they would. The negative space renders whatever sits behind this element ( in the CodePen examples below). Often this is not a problem and may even be desirable for large background designs to ensure organic transitions between content areas. However, because I am using this SVG as a link, I will need to alter the file so that I can style the space behind it.
The Instagram logo is a perfect example of an awkward SVG file that requires more CSS finesse than most. Again, there is nothing wrong with this SVG, but it presents some challenges for styling. In order to add a hover state that alters the background, we will need to change the code above.
There are several ways to go about this, but the easiest fix is to add another element behind the image. Because the Instagram icon is rectangular, we can add a <rect> element behind the three foreground paths that comprise this SVG. If the logo was circular or oval, I would have used the or element. Be sure to set a height and width to match the viewBox when adding this type of element, and use the rx value to round the corners as needed. Rather than adding a class or fill to every path in the SVG element, we can target the and elements in the CSS file.
CodePen Embed Fallback
The advantage of this approach is its simplicity. Instead of having to alter multiple files or use JavaScript or third-party JavaScript libraries, we can add one line of code to the SVG code block and style it.
If, for some reason, you need or just prefer to leave the SVG file alone, you can revise the CSS to achieve similar functionality.
We could add a background property on the social-link class but, for this tutorial, I will instead use the slightly more complicated, but equally effective, strategy of revising an SVG by applying a pseudo-element to it. In the example below, I have used the ::before pseudo-class to add a shape and the opacity property to make it visible on hover. To avoid having this shape leave a border around the icon, I have made it slightly smaller than the SVG using the height and width properties (calc(100% - 2px)). Then I center the pseudo-element behind the SVG and match the transition property for both element and pseudo-element.
/* Sets the link's dimensions */
.social-link {
display: block;
height: 24px;
position: relative;
width: 24px;
}
/* Targets the pseudo-element to create a new layer */
.social-link::before {
background: #fff;
border-radius: 2px;
content: "";
display: block;
height: calc(100% - 2px);
opacity: 0;
position: absolute;
transition: all 0.2s ease-in-out;
width: calc(100% - 2px);
}
/* Changes the background color of the pseudo-element on hover and focus */
.social-link::before:hover, .social-link::before:focus {
background: #000;
}
/* Makes sure the actual SVG element is layered on top of the pseudo-element */
.social-link svg {
position: relative;
z-index: 1;
}
/* Makes the background-color transition smooth */
.social-link svg path {
transition: all 0.2s ease-in-out;
}
/* SVG paths are initially white */
.social-link path {
fill: #fff;
}
/* The pseudo-elememt comes into full view on hover and focus */
.social-link:hover::before, .social-link:focus::before {
opacity: 1;
}
/* Fills the SVG paths to black on hover and focus */
.social-link:hover svg path, .social-link:focus svg path {
fill: #000;
}
CodePen Embed Fallback
I recommend the above strategies for a quick fix because using vanilla JavaScript or a JavaScript library like vivus.js or raphaeljs is overkill for adding a hover state to an SVG in most cases. However, there are times when modifying an SVG using JavaScript is preferable. Because JavaScript is undoubtedly the most flexible method to change styles, let’s examine what this might look like.
My example separates the JavaScript file, but if you want to add JavaScript inside the SVG element itself, you will need to add a element, just like an HTML file. Be sure to add a CDATA marker to your element to ensure it is parsed as XML.
CodePen Embed Fallback
I’m using jQuery to simplify things a bit and keep CSS as minimal as possible, although for clarity sake, I have added a background property on the social-link class in the CSS file rather than adding it via JavaScript. Notice that this solution targets svg path when altering the CSS method rather than assigning a class to these paths because, in this case, each path should be treated the same.
There are many many ways to style SVGs, but the examples collected in this article are useful and extensible. Strategies for altering SVG files need to be evaluated by an app’s full functionality, but I suspect most front-end developers will find that the element offers the simplest and most readable solution.
Are you looking for a tech job where you clock in, or for a career where you’ll be seen?
Seen by Indeed is a matching service for software engineers, product managers and other tech pros that sorts through thousands of companies — like Twilio, Overstock, VRBO, and PayPal — and matches tech talent like you to the role that’ll take you further. Not only does Seen by Indeed match on things like skills, experience and salary, but we’re with you every step of the way with free one-on-one career coaching, resume reviews and in-depth resources.
So, whether you need negotiation tips, networking strategies or just want to talk to someone about your career, Seen by Indeed has you covered. In fact, you can start by getting a free resume review that covers formatting, how to beat the resume-screening bots and personalized tips on how to show yourself off.
What are you waiting for? Put Indeed’s new tech-focused matching platform to use to move up in your career.
Lead generation is a critical step in the marketing process, but more important, it’s fundamental to business growth.
In fact, a study by Marketo showed that companies with sound lead generation practices achieved at least 133 percent more revenue than enterprises that don’t have good techniques in place.
And while business owners from organizations big and small, as well as marketers at all stages in their careers, say they understand the key role lead generation plays in boosting the bottom line, they also say that it’s one of their greatest ongoing challenges.
We’re here to help. In this guide, we’ll cover key considerations to keep in mind when developing a lead generation strategy. We’ll also explore various techniques for generating leads online. And we’ll review business-to-business (B2B) lead generation methods, investigate the concept of lead scoring, and discuss how to measure and optimize lead generation campaigns.
In essence, we’ll prepare you to use lead generation to start achieving the marketing and business results you want to see.
What is lead generation?
There might be thousands of prospects out there who are aware of your brand, but until they engage with you in some way, they remain strangers to your company. How do you draw such targets in and capture their interest so that they’ll make themselves, and ideally their email addresses or phone numbers, known to you? Through lead generation.
Simply put, lead generation is the process of converting strangers — prospects that have indicated an interest in what you’re offering — into leads and starting them on the journey of becoming a customer.
After all, if you haven’t captured a prospect’s interest and figured out how to communicate with and identify them, you have no one to aim your marketing efforts at — no one to nurture toward purchase. That’s why it’s important you manage your lead generation practices well.
Lead generation strategies: Key considerations and effective lead magnets
If lead generation is the process of converting strangers into leads, then a lead generation strategy refers to the approach you use to support and optimize this process. Essentially, it’s a plan of action to attract and capture leads.
Naturally, there are a number of concepts you need to understand and a range of decisions you have to make when building an effective lead generation strategy. In this section, we cover key definitions and outline important factors to consider before you start implementing specific tactics.
How lead generation has evolved with digital transformation
First and foremost, it’s key to understand that the lead generation process today looks nothing like it did 40, 30, and even 20 years ago. With the rise of the internet, the way brands reach potential customers has changed drastically.
Here we outline a few of the digital transformation-related developments that have impacted this aspect of marketing. It’s worth familiarizing yourself with these changes so you can adjust your strategy, if necessary, and capitalize on these opportunities.
Information overload and attention scarcity. With the proliferation of online channels, consumers are now inundated with information. They’ve had to learn how to tune certain messages out, and they’ve become pickier about the content they consume. As a result, brands have to work much harder to cut through the noise and grab attention. A strong lead generation strategy is now essential.
The shift from “finding” to “being found.” Because ofthe abundance of information out there, buyers today are fairly self-directed. They do their own research and actively seek out brands that appeal to them. While in the past, companies would spend much of their time looking for and “finding” prospective customers, today businesses invest in tactics that position them to “be found” by consumers organically.
The rise of new channels. Companies used to be limited to offline lead generation tactics (more on this later). Today, thanks to digital transformation, businesses can use everything from blogs and Facebook posts to SEO and pay-per-click (PPC) advertising to capture attention.
Access to data. Thanks to analytics, we can now closely monitor user behavior and measure the impact of marketing activities. Insights from data provide us with invaluable information about prospects and the types of messages they respond to best. As a result, lead generation strategies can be less generic and more personalized, and less based on intuition and more on hard facts.
A heightened focus on relationships. Lead generation used to be about initiating interest for the purpose of ultimately closing a sale. Now, customers expect engagement with brands. They want two-way communication and meaningful interaction at multiple touch points. Lead generation is now more about initiating long-term relationships with prospects than anything else.
Lead generation approaches: Inbound marketing vs outbound marketing
One of the first decisions you’ll have to make when developing a lead generation strategy is whether you’re going to rely on inbound or outbound marketing tactics, or a mix of both.
Inbound marketing explained
The goal of inbound marketing lead generation is being found. These effortsrely on a strong digital presence.
Inbound marketing is the process of companies pulling in prospects organically by giving them something they’re actively looking for (something useful or educational, for instance). Organizations earn attention this way, and the prospective customer is the one who opens the lines of communication.
Examples:blog posts, organic social media posts, podcasts, opt-in emails, optimized content, YouTube videos
Outbound marketing explained
In contrast to inbound marketing, outbound marketing efforts focus on broadcasting messages to find prospective customers wherever they are. In this case, the organization buys or otherwise gets attention, and it’s the business that initiates communication, not the prospect.
Examples: Cold calling, which entails phoning a prospect you’ve had no prior contact with, is a key example of outbound marketing, and was once a popular tactic. As this methodology relies on making contact with cold leads (more on this below), it’s lost much of its efficacy today. That means that if you’re going to make use of this technique, it’s critical that you’ve mastered the art of cold calling first.
Aside from the above, other examples of outbound marketing include television, radio, and print advertisements; billboards; direct mail; and email blasts to purchased lists.
Outbound vs inbound: A direct comparison
Outbound marketing
Inbound marketing
Direction of focus
Outward
Inward
Approach
Push messages to customers
Pull customers to messages
Audience (scope)
Large and broad
Smaller and more targeted
Messaging specificity
Tends to be quite generic
Tends to be more personalized
Conversation dynamics
One-way conversation
Two-way conversation
Customer control
Low: Customers see messaging whether they’re looking for it or not
Tends to be lower (as compared to outbound marketing)
Offline lead generation: Why you shouldn’t neglect it
With all the emphasis on digital, it’s easy to forget that there are ways to generate leads offline, out in the physical world. While many may try to convince you that online is the way to go, there’s still some merit to offline lead generation tactics. Some of the benefits of going this route — to supplement your digital efforts — include
Tapping into the offline market. Depending on your brand identity and offering,there may be a slice of your target market that isn’t very active online. This audience is, therefore, going to be more receptive to offline tactics than blog posts and PPC ads, which they’ll likely never see.
Building relationships the old-school way. As mentioned previously, today’s customers want relationships with brands, and there’s no more powerful way to engender trust and strengthen connections than to engage in face-to-face interactions. That’s likely why 51 percent of B2B professionals name trade shows and industry events a top source of leads.
Playing where there’s less clutter. With most marketers moving online, it’s become less common to encounter offline lead generation techniques. If consumers aren’t as flooded with content in this area, attention scarcity becomes less of an issue, and they might be more receptive to messaging.
Examples of offline lead generation
Consider some of the following non-digital lead generation activities:
Setting up a booth at a trade show
Presenting at a seminar or conference
Sponsoring an event
Sending direct mail
Publishing entertaining or educational content in print mediums (offline content marketing)
Lead generation, lead management, and the sales funnel
Lead generation is just one part of the broader process of individuals and businesses progressing from strangers to committed customers. The marketing-sales funnel, or the lead funnel, is a visualization of this process, and it indicates the various stages that consumers move through on their journey toward purchase. It’s meant to help marketing and sales professionals better understand where prospects are in this process and what information they might need to become customers.
To develop a sound lead generation strategy, you need to understand where this particular part of the process fits into the broader sales picture. It’s also vital to remember that marketing doesn’t stop at lead generation. Once you’ve captured a lead, you still need to nurture this prospect down the funnel toward a sale.
Let’s take a look at the traditional lead funnel and its various components.
Top of funnel (ToFu)
Awareness
Prospects at this stage are aware of your business (perhaps they’ve seen your social ads or heard about you from a friend), but they haven’t yet engaged with your brand in any way.
Interest
Prospects have engaged in an activity that indicates interest in your product or service. They’ve exchanged some of their own information for an offer of some sort and are in the early stages of research.
Lead generation is a top-of-funnel (ToFu) acquisition tool. It takes place throughout the awareness stage and at the intersection of the awareness and interest phases. Essentially,it’s the process of taking mere awareness and converting it into active interest, which you capture in some way so you can enter the prospect into your lead management system. What does this look like in practice? Often, it’s a website visitor who fills in a form on a landing page, giving you their information in exchange for an offer.
Middle of funnel (MoFu)
Consideration
As its name suggests, this funnel stage sees targets start to more seriously consider your product or service. They engage in more targeted information-gathering attempts but haven’t yet made any kind of buying decision.
Intent
At this stage, the lead has taken an action that indicates they intend to make a purchase. That is, they’ve demonstrated interest not just in your offering but in the act of making it their own (they’ve placed an item in their online shopping cart, for instance).
Bottom of funnel (BoFu)
Evaluation
Prospects are very close to purchase but are making final comparisons with similar products or services and are evaluating all of the fine details to make a buying decision.
Purchase
The prospect makes a purchase and turns into a customer.
The importance of developing buyer personas for effective lead generation
Before you can pull in the kind of leads that are most likely to convert, you need to have a clear understanding of who you’re trying to attract in the first place. In other words, you need to grasp who your ideal customer is and what motivates them to buy. For this reason, creating buyer personas — research-based representations of customer types — is a critical early-stage step when developing a lead generation strategy.
Developing a sound understanding of your target audience will help you to
Select the most appropriate lead generation channels
Develop content that addresses targeted concerns and, therefore, is likely to be valued
Personalize messaging for different audience segments
Select appropriate lead magnets (see description further down)
Determine which leads are more likely to convert — based on their similarity to the target audience — and, therefore, which prospects are worth nurturing (see more on qualifying leads below)
Questions to ask yourself when building buyer personas
What’s our target customer’s income and education level?
What are their key interests?
Which social media platforms do they frequent?
What compels them to buy?
What are their biggest pain points?
What’s their role in their company?
Where do they look for information?
How do they prefer to communicate?
How much power do they have to make decisions (for B2B)?
What are some of the key challenges in their industry (for B2B)?
Answer the above questions by conducting market research, surveying your existing customer base, conducting focus groups, and using analytics.
What’s the difference between cold leads, warm leads, marketing-qualified leads, and sales-qualified leads?
Up until now, we’ve talked about leads as if every one of them is equal. But that’s simply not the case. Some leads are warmer than others. Some are more qualified than others. It’s important to understand the difference and have the tools to make the distinction, so you don’t waste time on leads that aren’t worth pursuing or miss out on the opportunity to convert a promising lead.
Cold leads. A cold lead is a prospect you’re aware of (perhaps you’ve purchased their contact details, for instance), but who isn’t necessarily aware of you and hasn’t yet expressed interest in your solutions.
Warm leads. A warm lead, in contrast, is aware of your company and has taken some kind of high-level action to express interest in your offering. They haven’t seriously considered a purchase yet, though, and haven’t ironed out the details of what they’re looking for.
Qualified leads. This type of lead meets key criteria that suggest they’re worth pursuing. They’re closer to the buying stage than a warm lead, they likely fit your buyer persona, and they’ve engaged in a telling action, like downloading your company brochure. Qualified leads fall into two different categories:
Marketing-qualified leads (MQL). An MQL is a lead that’s more likely to become a customer than others but is still not quite ready to make a purchase. They’ve shown that they’re receptive to your marketing efforts and are engaging with your content (perhaps they’ve visited your website multiple times or have downloaded an e-book), but they haven’t made a buying decision yet. These leads warrant further nurturing; a sales call might be too much, however.
Sales-qualified leads (SQL). Sales leads are further down the funnel than MQLs. They are prospects that have indicated they intend to make a purchase and are, therefore, ready to be handed over to the sales team for conversion.
An overview of lead scoring: How to rank and qualify leads
How do you go about labeling a prospect as an MQL or SQL so you can target outreach accordingly? You use lead scoring to qualify leads.
In lead scoring, you assign points for different attributes and actions to determine a final score that indicates buying stage and purchasing intent. The higher the score, the closer to conversion the lead is.
You have to decide what weight (or point value) to give different qualities and behaviors, and you have to identify a score threshold for the promotion of a lead to MQL or SQL status. In bigger companies, this requires collaboration between marketing and sales teams. Once definitions are in place, many businesses then program lead scoring software to assign points and measure leads against benchmarks.
For the most part, businesses determine points based on
Demographic information. How closely does the lead match your target B2C customer profile?
Company information (in the case of B2B selling). How closely does the lead match your target B2B customer profile?
Behavior on your website. Has thelead visited high-value pages? How many pages have they viewed?
Email engagement. Does the lead frequently open your emails? Do they often click through from newsletters to your website?
Social engagement. Does the lead regularly like, share, or comment on your social media posts?
What’s a lead magnet? 22 effective examples
Prospective customers aren’t just going to hand over their personal information. You need to offer them something of value (beyond your product or service offering) in order to make this exchange fair. This “thing of value” is your lead magnet, so called because it attracts leads by giving them something they want or need.
Generally speaking, good lead magnets are specific,accessible, and easy to consume, and solve a defined problem or address a particular need, while positioning you as a thought leader in your field.
Just as your ability to capture leads depends on the strength of your lead magnet, it’s essential that you identify appropriate options early on while developing your lead generation strategy. What works will depend on the buyer personas you’ve developed and the type of offers that prospects are likely to find most valuable.
We cover 22 examples below.
22 examples of awesome lead magnets
Checklist
Template
Starter kit
Downloadable recipe
Calendar
Spreadsheet
Webinar
E-book
Resource guide
Case study
Report
Infographic
Whitepaper
Quiz
Video
Giveaway
Desktop wallpaper
Game
Free trial
Special offer
Coupon
Free consultation
How to generate leads online
Once you’ve sussed out the nuts and bolts that underpin your lead generation strategy, you’re ready to power up your lead generation process.
In a recent study, the Kellogg School of Management found that focusing on the digital side — rather than on an in-person, offline approach — tends to drive more leads and ultimately more sales. While various tactics could prove successful when it comes to really getting your lead generation engine cranking, digital may be your best option.
This may differ for different businesses and verticals, but if you decide to prioritize generating leads online, you need to first create something that provides value for prospects — beyond just your product offering. (Revisit the lead magnet section above for some ideas.)
Once you’ve identified your lead magnets, use these four simple techniques to start driving, capturing, and nurturing your could-be customers to conversion.
Build a great lead generation website
Your website is ground zero in the lead generation process, with 63 percent of consumers reporting that it’s their preferred port of call when searching for and engaging with a brand.
Beyond just providing information about who you are and what you offer, this all-important marketing channel is where you capture your leads via a lead capture form.
This form can come in all shapes and sizes, but its primary purpose is to collect potential customer contact information in exchange for your lead magnet so that you can continue to market to — and ideally convert — leads into buyers.
For example, you may use a lead capture form to collect an email address in exchange for updates about special offers, or perhaps you have a useful downloadable tutorial that users can access after filling out a form that asks for their job title, company name, company email address, and phone number.
However you decide to capture leads — and regardless of what information you deem most important to collect, it’s essential to make sure the lead generation forms on your website are optimized and fully functional.
7 brilliant ways to capture and generate leads with your website
Popup with lead form
Hero image with lead form
Hello bar with lead form
Sidebar with lead form
Blog post with lead form
Gated content with lead form
Traditional landing page with lead form
How to optimize a lead generation form
There was a time that creating and embedding lead capture forms on your site required the know-how of a development team, but these days, services like JotForm have revolutionized the process, making it easy for anyone to create and publish forms on their website in only a matter of minutes.
With technical difficulties removed, you can really focus on optimizing your lead generation form to get the best possible results. Here are six best practices that can help you put together a lead capture form that converts:
Embed your form above the fold, so users don’t have to scroll down a page to view or complete it.
Create a headline that encourages readers to take action.
Don’t include too many fields in your form — and don’t ask for too much personal information. A study by HubSpot found that the conversion rate increases by 50 percent when the number of form fields decreases from four to three.
Choose the color of your call-to-action button carefully. Research generally reports that red is best.
Think twice about asking prospects for a phone number; asking for this information leads to the highest form abandonment rates. Consider making this an optional requirement if you must collect this information.
5 lead generation form templates for your website that really convert
Dial in your email marketing and think carefully about cold email from purchased or rented lists
Year after year, email earns the blue ribbon as the channel that’s both the best source of leads and the avenue responsible for the most valuable leads.
It’s also generally a low-cost tactic that won’t exhaust your precious marketing budget — if you do it right.
And by right, we mean first and foremost starting with a strategy that can help build your opt-in list of contacts. The days of buying or renting email lists from third-party providers and sending a cold email have gone the way of the dinosaur. Don’t be fooled into thinking that the promise of a 10,000-person instant pool of prospects for a good price is going to be some sort of lead generation silver bullet.
Nowadays, people are not only more discerning and interested in hearing only from brands they’ve formed a relationship with — inboxes are also more selective, often filtering out unsolicited emails from brands as well as blatantly promotional offerings.
And when you buy or rent a list, you forfeit control over the quality of the contacts in that list. That means you have little to no knowledge of whether the email addresses you’re purchasing are active, attached to the correct information, or even legal (in which case you could be violating the CAN-SPAM act and at risk of incurring thousands of dollars in fines).
Instead, take the time to brainstorm some lead magnets that can provide prospects with serious value, encourage them to sign up for a newsletter, subscribe to receive exclusive promotional offers, or exchange their contact information for a valuable piece of content (e.g., a how-to guide, a webinar that features a thought leader in the industry, or a white paper that carefully compares service offerings).
Once you’ve identified the appropriate lead magnet and captured key details, the magic of email marketing can move your new lead further down the sales funnel and, ultimately, to conversion.
To do this well, create custom marketing pathways for future customers based on the information you’ve gathered about them. This could include demographic data (e.g., their job title, geographical area, or income), or it could be based on a behavior or action they’ve taken (e.g., clicked on a certain pay-per-click ad or viewed your demo).
Each successful email marketing campaign should include emails that are as personalized to your prospect as possible, both in terms of the substance of what they’re offering and the messaging (think subject line, email copy, and the language of the call to action).
What’s more, you’ll want to come up with a sequence and a time line that make sense for each of your segments. This may take some experimentation, but by continuously testing everything from email text to the nature of what you’re offering to when you’re sending out your email, you’ll be able to optimize this lead generation effort and get the return on investment you want.
Finally, if you really want to scale and operationalize your efforts, you may want to use customer relationship management (CRM) software to facilitate lead tracking, lead scoring, and lead nurturing.
These tools automate data collection and the lead generation process, making it easier to glean key information about your leads and serve them the right messaging at the right time.
Leverage the power of social media
Social media — like Facebook, Instagram, LinkedIn, and Twitter — is another great lead generation tactic. Over 66 percent of marketers agree that as little as six hours a week spent on social media campaigns can have huge lead generation benefits.
What’s more, 76 percent of people are prepared to have a conversation via social media; whereas only a mere 10 percent of decision-makers would be receptive to cold calls. When it comes to lead capture via social media, there are three primary ways to collect information from users:
Creating posts that send users to a landing page with a lead capture form and lead magnet
Embedding lead capture forms in an actual social post, company page, or ad
Encouraging prospects to follow your social account
Some platforms, like Instagram, don’t yet have the functionality to embed lead capture forms, but others, like Facebook and LinkedIn, have a few different embedding options. We’ll explore these in more depth below.
Facebook lead ads
Back in 2015, Facebook made it faster and easier for companies to market to their more than 1 billion users with the advent of lead ads.
These souped-up, mobile-friendly advertisements essentially allow Facebook users to click on an ad, triggering a lead capture form popup. Facebook automatically prepopulates the form with information based on a user’s Facebook profile. It even has the capability to sync with your CRM so that you can start selling to your new prospects instantly.
Some of the most popular uses of Facebook lead ads include newsletter signups, quote requests, and even an event registration. Improvements in customization now allow businesses to give new leads the option to click to call, indicate appointment preferences, and even find out the location of your closest brick-and-mortar location.
For B2B marketers in particular, LinkedIn is an invaluable lead generation source. Thanks to LinkedIn Lead Gen Forms, companies can capture high-quality leads at scale without having to divert users from the social media platform to their website.
Like Facebook’s Lead Ads, this business-centric platform gives brands the opportunity to capture contact information with just a few clicks on some carefully created ads (for example, something that promotes a webinar or an e-book download). LinkedIn Lead Gen Forms also integrate with CRMs and give marketing professionals the opportunity to download leads from the tool’s Campaign Manager.
Last, thanks to in-platform analytics, it’s easy to measure the efficacy of your campaigns by examining cost-per-lead metrics and form fill rate metrics.
Use the best lead generation software and tools out there
Online lead generation efforts have changed over the last decade, and the tech stack that supports this critical marketing activity has followed suit.
Today, there are countless free tools and robust software options that can make the process of managing leads, identifying hot leads from a massive contact list, and automating marketing to leads quicker and easier. Here are a few of the best (we’ve tried to provide different options for different levels of business maturity).
JotForm
This powerful and affordable online application makes it lightning fast and super easy to create custom lead capture forms and embed them on your website — no coding experience required.
While JotForm is ideal for any size business (it has special options for enterprise-level organizations), it’s especially useful for startups, nonprofits, and entrepreneurs who need a simple way to collect client or customer contact information.
JotForm has a number of pricing options, including a free starter plan, and each of the fee structures gives you access to all of the application’s features.
Callingly
According to the Harvard Business Review, sales teams that reach out to leads within the first hour are seven times as likely to have a meaningful conversation with prospects and decision makers.
Callingly is a lead generation tool that facilitates this process, automatically triggering connections between sales reps and hot could-be customers as soon as a lead comes in.
The service syncs with any CRM as well as applications like JotForm, and it collects important analytics so you can track and improve call performance.
Callingly is ideal for small and growing businesses, but it does have an enterprise-level pricing option (as well as a free trial).
HubSpot
Now a household name in the inbound game, HubSpot is perhaps the most widely known marketing software in the business. The company’s all-in-one tool is committed to helping organizations big and small grow their traffic, convert leads, and track prospects through the sales funnel.
Beyond just lead tracking, scoring, and management functionality, HubSpot gives companies the ability to build landing pages, lead forms, lead generation content, and full-fledged email marketing campaigns.
There is both a free option and a considerably more robust professional version that comes with over 30 additional features.
Marketo
Far and away one of the most trusted and formidable marketing automation solutions out there, Marketo is an invaluable lead management and tracking tool for more established businesses.
The software makes it especially simple to nurture leads to conversion via functionality that allows you to create landing pages, email marketing campaigns, and social marketing campaigns.
Marketo does come with a hefty price tag, however, which is why the software is useful primarily for larger companies that are well resourced and regularly work with thousands of prospects.
Pipedrive
Pipedrive bills itself as the “first sales CRM designed by salespeople for salespeople,” and true to form, it boosts sales efficiency by identifying the most qualified leads and making it easy for salespeople to reach out to, connect with, and continue to communicate with promising prospects.
Pipedrive comes with extensive reporting and forecasting features, and their mobile functionality allows users to access the information they need from anywhere and at anytime.
Pipedrive has a number of different pricing options, which makes it ideal for both growing businesses as well as heavyweights in any industry.
Methods for B2B lead generation
B2B and B2C marketers face the same central challenge — finding high-quality leads likely to convert to customers at the lowest possible cost.
At the same time, B2B marketing has some unique characteristics that differentiate its lead generation and subsequent lead nurturing process from lead generation for consumer-based businesses.
The most obvious difference is that the process, from initial contact to sale, can take much longer, with the majority of B2B marketers spending at least one month, and as long as one year, engaging leads prior to a sales commitment, according to one recent survey.
Similarly, B2B sales typically involve multiple decision makers, sometimes as many as seven, which means that your lead generation efforts will have a wider scope, targeting a more extensive collection of buyer personas.
Capturing more information at the point of lead generation is pivotal because the marketing process that follows should be nuanced, with different materials and tactics prepared for each particular persona as they move through the lengthy lead nurturing process.
Consider collecting the size and type of business that leads represent, the price points they seem most interested in, and their title or job function.
Since B2B leads are other businesses, the avenues for finding prospects and converting them to leads differ from B2C lead generation. For example, a company looking to capture and convert B2B leads into sales would likely find more success focusing on venues like trade shows and industry conferences, rather than direct mail or consumer advertising, methods that may be on the decline but still have their place in B2C brand marketing.
Finally, B2C lead generation differs from its counterpart in the way that it often focuses on creating added value or enhanced experiences with a brand, for example, providing a quiz focused on your product via a popular consumer website. In contrast, B2B lead generation is likely to be less entertainment-focused and emotional in its appeals, and more information-heavy and devoted to proving return on investment.
Best B2B lead generation channels
According to data from researchers at Kellogg School of Management at Northwestern University and the Spiegel Research Center, B2B marketing professionals report that they have more success with blog posts and articles, webinars, white papers, branded digital content, video, and images.
Conversely, in-person seminars and workshops, once regarded as highly effective, seem to be less popular and less effective among today’s busy decision makers and purchasers.
B2B marketers also report that the most common channels for finding leads are email, search, and digital content. More than 50 percent of B2B marketers cite email as the most prevalent source of leads as well as the channel with the most effective and efficient return on investment, the most reliable source of lead generation and nurturing, and the most effective method of conversion from lead to sale.
Demand generation versus lead generation for B2B
Another vital component of a successful B2B lead generation strategy is a strong demand generation approach.
Demand generation is the process of building awareness and creating long-term engagement between prospects/customers and your brand. Though marketers may mistakenly use this term interchangeably with lead generation, lead generation is one of the many activities that falls under the demand generation umbrella.
Other marketing elements that are part of demand generation include demand capture, the process of driving existing demand within your sector to your brand, and pipeline acceleration.
Think of it as the way your marketing team — or you — will guide your potential customer through their journey with your brand, from target audience to lead to customer and beyond.
Demand generation is marketing that focuses on forming a meaningful interaction for potential customers. It communicates your brand’s utility and value, fosters increased levels of trust and confidence from the top of the funnel through the transition to sales, and even leads to future engagement with customers, allowing them to become champions of your brand through social media shares, product reviews, endorsements, and more.
Lead generation is one aspect of demand generation, typically focused near the top of the funnel at the critical point where a targeted audience member begins sharing information that marketing, and later sales, can follow up on to strengthen the interaction between the potential lead and your brand.
SEO-friendly lead generation
There’s no doubt that paid advertising works when it comes to lead generation, but when it comes to online search, the majority of people simply don’t click on formal advertisements (only 2.8 percent according to one study by Moz.com).
Most searchers prefer to click on organic results, unpaid listings that a search engine deems most relevant to a user’s search query and thus prioritizes.
Accordingly, to capture searchers’ attention and drive traffic to your website so that you can generate leads, you need to understand how to get the search engines to prioritize your website.
What is SEO?
Understanding what people are searching for and how to create a website that increases the quantity and quality of your traffic is known as search engine optimization (SEO).
The ability to leverage SEO best practices can be the difference between an optimized website with a steadily increasing flow of traffic — and by extension leads and new business — and a website that no one ever finds and merely acts as a catch-all for your paid marketing efforts.
Optimizing your website is one of the most cost-effective lead generation approaches, as it doesn’t demand continuous funding, like advertising.
As JotForm’s Chad Reid points out, “If you’re solely relying on paid search rather instead of SEO for lead generation, you might miss out on valuable sales.”
How to optimize your website with 5 SEO best practices
Effectively optimizing your website according to SEO best practices can be a complicated and ever-evolving endeavor.
That’s because major search engines, like Google, constantly adjust how they prioritize and rank websites, which means you’ll need to keep up to date with critical changes and make sure your website puts these new developments into play as they roll out.
The structures search engines already have in place to evaluate websites function according to a robust mix of technical, editorial, and outreach fundamentals. To leverage the power of search and ensure this marketing channel is operating at its best, it’s key to understand how all of these components work together and what you need to do to check all the right boxes.
That said, there are a few tried-and-tested practices that you can apply to your website to generate traffic and leads relatively quickly.
1. Make sure your website can be crawled and indexed
First and foremost, make sure that your website is discoverable to search engines. In SEO speak, that means that your website should be crawlable and indexable.
Crawlable: a website that’s created in a way that allows search engine bots to identify and download all of the data on the pages and move through each section of the site with ease
Indexable: a website that’s created to appear in the search engine results pages
The most important steps you can take to ensure a crawlable and indexable website are making your site’s navigation clear and easy to follow and not having robots directing search engine crawlers to ignore certain pages.
2. Identify keywords and generate relevant and compelling content
Keywords, or search queries, are the terms that internet users type into a search engine to find relevant pages. To drive the right kind of traffic to your website, determine which keywords best align with your business and your audience’s interests.
To generate this list, start by brainstorming the kinds of topics people would search for when looking for information about your product or service offering. You may also want to examine the kind of information competitors have in order to refine this list.
Next, use a keyword research tool, like Ahrefs or Moz Keyword Explorer, to get a better idea which topics have the highest search volumes.
Once you’ve identified a list of roughly 20 to 40 keywords that are most relevant to your website, create content pages that address these topics and provide users with the information they’re most interested in.
3. Understand key places of prominence and tailor content accordingly
When search engine bots crawl your site, they investigate the data to get a clear idea of what your pages are about and how relevant they are to particular keywords.
One way they do this is by examining key places of prominence on a page, like a title tag, header tags, and the first 100 words of content, to see if your keyword — and other related topics — are included.
Make sure you have a clear idea of the key places of prominence and have written keyword-rich content to insert into these areas.
Key places of prominence for website optimization
Title tag
Meta description tag
H1 tag
H2 and H3 tags
First 100 words of content
Image alt text
URL
4. Create a great user experience
Recently, search engines have started to find ways to measure and evaluate websites based on their user experience, which is, in a nutshell, how easy it is to use your site.
One of the top ways they evaluate user experience is page speed, which is how fast your website loads and appears for users — both from a desktop and mobile perspective.
While there are a number of other factors that affect this best practice, working with a developer to make sure your load speed is in the green zone in Google’s PageSpeed Insights tool is an absolute must.
5. Build links, build links, build links
One of the most important parts of optimizing your website is making sure that other websites link back to your content pages. That’s because Google and other search engines use the number of links that lead back to your site (and the quality of the domains from which these links originate) as a critical measure of how reputable and relevant your website is.
Think of it as a voting system, where the number of links pointing to your website is similar to the number of votes you’d get in an election.
It’s essential to make it easy for other high-quality sites to embed links back to your site. Here are three ways to make this a reality:
Create compelling content that people naturally want to link to.
Create content partnerships where you provide other websites with great content that includes links back to your own.
Ask your partners or customers to link back to you from their publications.
How to measure the results from SEO
As the old saying goes, if you can’t track it, you can’t improve it — and just like your lead generation efforts, you should have a solid approach to measuring both how well you’re performing from an SEO perspective and how this ties into your lead generation approach.
The metrics attached to these elements can be broadly separated into search-related tracking and engagement tracking. Search-related tracking directly relates to how much traffic you’re bringing to your site, whereas engagement tracking deals with how people behave once they arrive at your site.
In both cases, the most critical tool for keeping tabs on your numbers is Google Analytics, which can be easily set up with or without the help of a developer. Google Search Console is another free tool that can also prove useful.
Search Related Metrics
Total organic users
The number of visitors to your site from unpaid search over a set period of time
Tracking tool: Google Analytics
Keyword rankings
Where in the search engine results pages your keywords rank over a particular period of time
Tracking tool: Google Search Console
Clickthrough rates
The rate at which people click through to your website as compared to how many times it appears in the search engine results pages
Tracking tool: Google Search Console
Engagement Related Metrics
Conversion rate
The rate at which users complete a task on your website as compared to the number of visits to your website or page
Tracking tool: Google Analytics
Time on page
The amount of time a user spends on your website or on a particular page
Tracking tool: Google Analytics
Bounce rate
The rate at which a visitor leaves your website without visiting another page as compared to those who visit more than one page
Tracking tool: Google Analytics
When it comes to lead generation, the most important factor to monitor is conversion rate, which gives you an indication of the rate at which people are completing a task on your website (e.g., completing a lead form).
This will give you some insight into which of your pages is the most successful in generating leads and which needs improvement. Once you understand the numbers, you can make strong data-driven decisions — for example, creating more pages like those are that successful or applying the same techniques that were successful on effective pages to poorly performing pages.
As with all marketing efforts, measuring your efforts and constantly refining them is key to success.
The rise of relationship marketing: Maintaining good communication with leads after purchase
Engaged customers become repeat customers. They sing companies’ praises and bring in new leads via word-of-mouth promotion. For this reason, it’s vital that you don’t invest your time in lead generation and conversion efforts just to forget about buyers once they’ve made a purchase. You need to put practices in place to boost lifetime value for consumers and maintain good communication with existing customers.
Recognizing the importance of long-term engagement with leads has led to the rise of relationship marketing, which focuses on customer satisfaction and retention. It has also inspired an extension of the original marketing-sales funnel to include four new post-purchase stages, as described below.
The post-purchase marketing funnel
Adoption
Customers have just made a purchase and are starting to put it to use. At this stage, it’s essential that you, as a brand, support their adoption of your product or service, and optimize their first experience with it.
Retention
At this stage, a brand ideally cements a good relationship with the customer. To encourage leads to stick around, you’ll need to offer them ongoing assistance and provide them with tools and content of value to help them get the most out of their purchase and association with you.
Expansion
If you’ve successfully retained a customer, you’ll reach this stage, when they’re open to buying add-ons, upgrades, or additional products, and you can successfully cross- or upsell them.
Advocacy
At this point, customers become loyal brand ambassadors. They promote your brand via word of mouth, and in so doing, pull in new prospective customers for you. Cultivating brand advocacy is, therefore, in itself, a lead generation tactic.
8 ways to maintain communication with leads and transform customers from adopters to advocates
Provide onboarding tools, resources,and guides to help customers get maximum value out of your offering.
Offer superior customer service and reliable support, especially during the adoption phase.
Show that you genuinely care about your relationship with customers by requesting feedback. Adopt a “help” mind-set, listen to consumers’ needs, and offer solutions.
Use segmented email marketingto consistently deliver valuable content targeted at post-purchase needs and concerns. Personalize outreach by researching buyer behavior and demographics.
Talk with customers, not at them. Encourage two-way communication, and aim to help, not to sell.
Make use of live chats and messaging apps to engage customers in real time.
Set up a loyalty program to reward existing customers for ongoing interaction with your business.
Reward customers for referrals and invite, or otherwise encourage them, to post user-generated content and reviews on trusted platforms.
Why bother with lead generation? Tracking-led conversion
Once you start generating leads, you should begin analyzing them at various steps in the marketing-to-sales lead nurturing process in order to prioritize them, more effectively evaluate the success of your lead generation efforts, and ultimately optimize your campaigns to perform better and more efficiently.
There are two main ways to think about lead tracking: volume and quality.
The first approach is to measure the volume of leads you acquire at each phase of your marketing strategy. This will tell you where you are experiencing drop-off, where you may need to improve engagement, or if you need to think about expanding your efforts to draw in more leads at the earliest stages of the funnel. You can also measure the total number of leads and number of leads per channel, as well as conversion rates (successful lead captures) per channel.
Each channel will have different metrics you’ll want to drill down into: For example, to hone your email marketing lead generation efforts, you’ll want to measure delivery rates, open rates (those who opened your email), unsubscribe rates, and click-through rates for the links contained in your email. Optimizing for these elements can ultimately help you capture more leads.
Similarly, for content marketing, you might measure the number of visitors to a particular page, the number of clicks on a call-to-action on that page, click-through rates, and conversion rates. Another way to measure the effectiveness of your content marketing is to measure the amount of time visitors spend on your site and calculate time-to-conversion rates.
The quantity of leads can be very important for high-volume B2C sales models, but a high number of leads does not necessarily equate to efficient ROI for many B2B products or low-volume, high-ticket B2Cs. For these businesses, lower volume but high-quality leads are crucial, and it’s equally crucial to develop effective metrics to analyze the quality of leads.
To measure lead quality, which more aptly translates to how likely it is that a lead will become a customer, select a variety of key performance indicators (KPIs). Assessing the quality of leads allows you to prioritize marketing and sales efforts based on the leads who are most likely to become customers.
Lead quality metrics include:
Demographic information. You can ask for this at various stages of your marketing strategy in exchange for further information of value, such as webinars. Once you have this information, you can look for demographic information that your converted leads tend to have in common, such as location, and assign values accordingly.
Social engagement. You measure this according to what leads say about your brand on social media or whether they share your content.
Fitness. Assign points based on how closely the lead fits the profile of your target customer: for example, whether the lead lives or is located in a given geographic area, if a business is large enough to benefit from your product or service, or if it has a high enough sales volume to afford your product.
Interest. Measure interest by download tracking, willingness to provide more information in return for further engagement with content, or submission of product queries.
When it comes to tracking lead quality, lead scoring (see below), is the first order of business. By assigning categories and values to leads at the beginning of the lead generation process, and continuing to refine that data as those leads make their way through the funnel toward final sale, you can refine your lead nurturing processes.
Adopting a sophisticated approach to analyzing leads will help you discover the cost of conversion in terms of resources and investment, as well as how much time employees spend per lead. For this reason, some companies measure lead-to-conversion costs by tracking leads from first click to last click, either by the time between each click, or the number of clicks or steps between each stage.
The following tools can aid in lead generation analysis:
Assigns positive and negative scoring to prioritize marketing and sales efforts
Lead scoring and audience segmentation
Lead scoring is the practice of assigning numerical values to leads using a scale from “merely interested” to “ready to make a purchase,” with the goal of determining a target score that will indicate when a lead needs to transition from marketing to the sales team.
It’s important that sales and marketing use the same metrics for lead scoring. Sales and marketing also need to agree on when and how to measure in order to assign point values. You can also track costs per lead and other aspects of lead generation to more efficiently allocate resources and make necessary adjustments and improvements.
Lead-scoring software can automate lead analysis. These tools can be categorized in a few ways:
Rules-based lead-scoring automation systems assign numerical scores to leads based on certain agreed-upon behaviors, like how many high-value content pages a lead visits.
Predictive lead-scoring systems use predictive modeling and complex algorithms to predict lead behavior and assign scores accordingly.
Either scoring system can be used to create priorities for sales contact. Many comprehensive customer relationship management systems have highly regarded lead scoring applications built in. Another option is to use a separate lead-scoring solution.
Lead or audience segmentation is another way of categorizing and evaluating leads. Rather than assigning a numerical value to leads based on their behavior metrics, segmentation categorizes leads based on demographic information such as job title, geographic location, and industry.
A/B testing and other forms of lead analysis
Testing is another way of applying an analytical framework to adjust and improve your lead generation and nurturing processes. A/B testing involves changing one aspect of a lead magnet, for example, a headline on a landing page, sending one version at random to one half of your audience and the other version to the other half, and then analyzing conversion to lead rates to determine which version is most effective.
Buying and selling leads
Like anything of value, leads can be bought and sold. However, just because you can purchase leads doesn’t mean you should.
The pros and cons of buying leads
It’s true that buying leads might save time and money at the top of the funnel. But how do you know these leads will have any interest in the product you’re selling? Even if the lead may need the services you provide, you’ll still have to invest in the rest of the marketing-to-sales cycle. In other words, you may save yourself some of the cost of lead conversion investment, but a large proportion will still remain.
Nevertheless, buying leads may make sense if
You’re a startup and haven’t had time to hire and train a robust marketing and sales team
You’re an organization of one or just a few
The vendor you work with scales their pricing to the size of your business and works closely with you to understand your brand and target audience
You’re having trouble driving traffic to your digital marketing platform, or your traffic has stalled
However, for most mid-sized or larger organizations, purchased leads are generally not recommended for the following reasons:
Purchased leads come from a place that isn’t organic to your content; therefore, when you contact those leads, you’re interrupting them rather than following up on an interest they’ve expressed.
When you contact purchased leads, they may feel tricked or even betrayed by the organization that transferred their data to you.
You may need to work harder to transform a negative impression into goodwill.
Purchased leads might label you as spam, and then all of your communications will be filtered out.
If enough users flag your marketing efforts as “spam,” you may risk being “backlisted” by email providers, and your IP reputation may suffer.
You’ll end up paying more than you would for in-house generated leads.
Lead-buying sources
Knowing the risks involved, if you decide that you need to buy leads, look for lead providers that are well-reviewed by trusted sources, such as the U.S. government’s Small Business Administration’s Resource Guide, Chronicle of Small Business, TechCrunch, Home Business, or Small Business Trends. Below are several reputable sources of leads.
There are a number of reasons you might want to sell leads. Leads are a quantifiable commodity, an asset at any company, and one worth leveraging in certain situations. If you have the time and resources to devote to selling leads, and you’re in a position where you can’t convert them yourself, then there’s no reason to leave money on the table.
Below are a few of the scenarios when it might make sense to invest time into researching how to sell leads:
You’ve accumulated a number of leads that don’t make sense for your business model but that are nonetheless verified, qualified leads that might be of value to someone in a different sector with a different product.
You’re planning to close your business, but you still have a large number of marketing- or sales-qualified leads in the pipeline.
You’re interested in starting a business but have no real interest in creating a product or providing a service. In this case, you might consider going into the business of locating and verifying leads, a business model that doesn’t require large startup investments and involves no manufacturing, packaging, or shipping costs.
On the negative side of the ledger, selling leads takes time, resources, and attention away from selling your core product or service. Here are some reasons to think twice before you decide to sell leads:
You may be selling leads you’ve deemed too difficult to convert before you’ve realized their value to your business.
You may not have much control over what entity you’re selling your leads to, and the product or service may not be of any interest to the lead you’ve garnered, thus damaging your reputation.
If you’re starting a business that focuses solely on lead generation, it may take some time to gain traction, and you may not earn enough money to make up for the time — in the form of the lost income that time represents — you’re putting into your new endeavor.
How to sell leads
Once you’ve weighed the pros and cons and decided you want to try to sell leads, it’s time to create a process for gathering, categorizing, and pricing your leads. As you price leads, be aware that leads that have voluntarily opted into your content streams and provided contact information along the way are worth more than leads you’ve purchased or collected from lists.
Next, you’ll need to create a buyer network. If you’re shutting down a business, you may want to contact competitors directly. Or you can sell leads to lead brokers. You can contact the Association of National Advertisers for a list of reputable lead brokers.
GDPR compliance and customer consent forms
The European Union’s General Data Protection Regulation (GDPR) took effect in 2018. Designed to guard consumer privacy, it applies to any organization that markets or sells products or services to citizens of EU countries, as well as those that possess data about those citizens.
GDPR requires companies to obtain frequent and clear consent before gathering personal data on potential customers. In addition, if customers or leads ask to have their data expunged from lead lists and databases, companies must comply under GDPR’s “right to be forgotten” provisions.
If your company violates GDPR, you could be fined up to 4 percent of total revenue, or 20 million euros, whichever is greater (if the maximum fine is applied). If you plan to buy leads from companies that do business in the EU, make sure they’re in compliance with GDPR.
Conversely, if you’re considering selling leads, make that possibility clear as you gather information from leads, and if you haven’t done so, you should be aware that GDPR may affect your ability to sell leads; you may need to contact users who provided information knowingly or passively through data capture and alert them that you may be sharing their data with outside entities in the future.
Given the complexities of the new regulation, as well as the growing concern about user privacy, it makes sense to consider revising your privacy policy and terms of use statements to make sure you are in compliance with GDPR. JotForm makes this easy by providing a self-serve Data Processing Addendum that users can agree to and that will keep you GDPR compliant.For more information on GDPR, visit eugdpr.org. You may also want to seek the advice of an attorney with knowledge of international privacy laws.
Pixel Surplus created this gorgeous and functional sans-serif that has amazing readability whether it’s upper or lowercased. This font is so sleek and elegant, and what really had me hooked was this visual.
I mean, just look at all that creativity wrapped up in one image.
Here’s what the creator of Manrope had to say about their font.
“Sometimes, creativity comes from simplicity, elegance, and readability. This font is an extra mile towards, guided by optical balance, and packed with modern features.”
Moving on to my next favorite font of this list, here I present to you Oneday.
This font is like a modern-day font that is presented in stencil style. As you can see, almost all of the letters have disconnections in them, which make them stand out and look quite futuristic, in my opinion.
Check it out through the link below and get it for free!
Cornerstone screams professional, modern, and no-nonsense. This modular font is a bit elongated and is great for things like banners, logos, and headers.
It’s definitely got that modern feel that many people are looking for nowadays, and the best part is that it is “free-ninety-nine”! Aka, 100% free.
This classic modern serif called Vanity is absolutely stunning.
With the perfect combination of thick and thin lines, this classic yet modern font is ready for you to use for any beauty product packaging or magazines.
This font that was created by Hendrick Rolandez is ready for you to download for free via the link below.
