Add a Website Skype Button to Talk With Leads and Customers

This post demonstrates several ways to add click-to-call and click-to-chat Skype button functionality into your website. Beyond just being a modern way to use a web browser, it enables a modern approach to interacting with leads and customers. There is good reason to do this. Let me tell you why…

Example Website Skype Button

A New Definition of “Social” Brands

The meaning of “Social” in terms of business and e-commerce is changing. There are a couple of trends that are having a big influence of this shift.

The first trend is that there are so many social and messaging platforms available, we are allowed to pick and chose the level of privacy and involvement we associate with each one. For example, I use Facebook and Whatsapp for close friends and LinkedIn and Skype for business. (No surprise they are both owned by Microsoft now) These expectations are evolving considerably with the birth of ever new platform and the generations that are native to each.

The second trend is social commerce; the consumer expectation that a relationship with a brand will be not only tangible but also responsive. There is a higher expectation of interactivity An example of this is how Facebook Pages are reporting response times – putting a brand’s level of interactivity on display for all to see.

So what does it mean? Social does not mean just sharing.Social means interacting.

This post offers an easy way to become more interactive with your customers.

Read More

Web Addresses Explained: What Every Human Should Know About URLs

If you can remember your elementary school English lessons, you might recall learning how to format postal addresses so you could send a letter or navigate yourself to a particular destination.

Today, most of us navigate to Web addresses far more often than street addresses and yet we no sense about how web addresses work, what their parts mean, and how they are formatted. Here is the elementary school Internet lesson that you missed. And it is going to make you feel like an Internet Jedi.

Here is the elementary school Internet lesson that you missed. And it is going to make you feel like an Internet Jedi.

The Web Address Internet Jedi

The Internet is more than just cat gifs. Now you can discover all of it!

It’s easy to see the similarities between Web Addresses and postal addresses because they are both used to describe locations. However, the analogy is not perfect.

The difference between web and postal addresses is that while postal address is used to send things to a location, web addresses can be used to both send and retrieve things. Most people use web addresses to retrieve web pages, but as you will find, the syntax (the way web addresses are assembled) can have a big impact on how information is sent to, or from a location.

Read More

Top 3 Resources to Learn Digital Marketing Technical Skills | $10k Tech Skills 4/4

This is part one of four in the $10k Technical Skills for Digital Marketing series. You’ve gone a long way, Keep it up!

Getting Started and the Learning Mindset

Being a technical marketer is as much about using technologies as it is about learning and adapting to new ones. The learning mindset may not get its own bullet point on a resume (even though it probably should) but its value increases with the rate of new technology. Lucky for you and me, the learning mindset has nothing to do with education or intelligence – it is solely about determination.

Determination is tested the most in the beginning when you don’t know where to start. There are tons of resources for learning Web and programming technologies but there are far fewer resources geared to learning these technologies for digital marketing. The corpus of technical marketing resources is mostly comprised of blogs, API documentation, open source code repositories and forums. Your search skills will be tested.

I have chased down plenty of rabbit holes and run into many dead ends. From all this confusion I have found a pretty familiar flow of how different types of resources are used. The rest of this post is about how these different resources are used in the ideation, development and execution of technical marketing tactics.

Ideas generally come from one of two places: a problem that needs a solution or the blogs of other creative digital marketing geeks. From there, the idea will generally have to be tailored to a specific use case.

Ideas + API Docs + Code = Execution

Part of applying a good idea to your problem is determining if this idea can be executed. For this, I often turn to API documentation. Whether it is the DOM API or a REST API for a marketing technology, this is the place to find out what the digital medium capable of.

Screen Shot 2015-06-29 at 10.21.07 PMAPI docs describe what the API allows a “client” (a.k.a. a program on your behalf) to do and how the API can be manipulated to do it. Sometimes reading API docs can even broaden ideas by introducing the full set of the API’s capabilities!

API documentation is typically structured in one of two ways, the REST API way or the code library/Software Development Kit (SDK) way. REST API’s docs generally need to describe what resources (structured data) or methods (things the API can do) the API offers. They also need to communicate how these resources can be obtained. These docs usually offer a description of the resource, the location of the resource (URL) and a sample resource representation in code.

A great example of a REST API is Optimizely’s REST API.

Libraries/SDK’s generally describe the “public” methods (methods that are for users of the library not internal workings of the library) that the API offers. These docs communicate what each method does, how the method is called/used and what the options are for using the method. Code samples are usually included to show these details.

Good API documentation that you are likely to come into contact with are Mozilla’s Browser API, jQuery’s API and Google’s various code library’s’ APIs.

GitHub: The Best Thing Ever

When its time to begin developing an idea, a great way to start is to look for code that either accomplishes what you want or gets you the first 80% of the way, Hello GitHub! If you don’t already know about GitHub you better learn quick. It is public code-sharing repository and version control system where you can find code on just about anything! It has enabled almost every great open source project and is one site that truly represents what is great about the Web. It is a great place to start from when launching your solution development.

This is the code you are looking for.

Many web searches will lead to GitHub by default but GitHub also offers excellent advanced search functionality. If you can’t find the code you are looking for there, it may be a rare occasion that the code has either not been written or not been shared yet. When you find a repository that looks like what you are looking for, there are a few things you need to know to make sense of what you have found: 1. A repository represents a file directory and each file in the directory can be viewed separately. 2. The readme.md (markdown file format) generally offers a description of what the code repository has to offer and how it is used. 3. There are metrics associated with the repository that are generally an indication of the popularity and overall use of the repository. (More popular generally means more stable/trustworthy code)

StackOverflow: The Duct Tape of the Internet

When your brilliant idea looks executable and code is on the screen, there is still a way to go to complete you technical solution. You will probably find some rough edges and interfaces that don’t connect the way you want them. When these bumps in the road arise, the best place to go for quick problem-specific answers is StackOverflow. This site has solved more problems than duct tape, bubble gum and elbow grease combined. And like GitHub, StackOverflow is another “best of the Web” site in my opinion.stackoverflow-logo-1-624x195StackOverflow is question answer forum site for programming questions. It rewards its users for asking great questions and providing great questions. This, in turn, increases the knowledge of everyone. Another benefit of the forum format is that many questions will receive several legitimate solution, so the likelihood that you find a solution that meets your needs is far more likely than not.

To use StackOverflow, you will generally start with a search. Googling: [error message] [programing language or application] will often land you on a StackOverflow page. But because the site is full of natural language question and answer, Googling a specific question will also turn up solid results from the site. In the beginning, if you are unable to find what you are looking for through Google searches, use StackOverflow’s excellent advanced search functionality there is a lot in there. In my experience, as Google starts to recognize that I have favored StackOverflow search results, I find that they are provided more often.

Finding answers on StackOverflow can be daunting at first but you just have to know what you are looking for. The /questions/ pages all have the same format which you will get familiar with.

The heading is the question or problem description that was originally submitted and directly below that is a detailed description of the problem. Below that are the responses. Users rate questions and responses based on their quality and how helpful they are. Scores reflect their popularity and generally reflect best practices. But note that if you don’t love the first answer, keep looking at answers below because you might find an answer that points you in the right direction. Also pay attention the date of the question and make sure that both the question and answer are both still relevant to your use case.

Finally, I have to mention Quora; part because the amateur philosopher in me loves is but also because it is great for asking higher-level questions. This is a great place to hear from seasoned pros and is a perfect place to discuss philosophical matters like if one approach is better than another. Google forums, Google+ groups and Meetups are also a good place to interact with people who are solving the same technical problems as you.

With all these resources, it comes down to a matter of time and determination. Never give up if a solution seems too difficult. Keep searching and keep learning. Learning the technical stuff is all about momentum.

Read the rest of the $10k Technical Skills for Digital Marketing or…

 

For more digital geekiness, get the updates!

Learn the Power of API’s for Digital Marketing | $10k Tech Skills 3/4

This is part 3 of 4 of the $10k Technical Skills for Digital Marketing.

You could be so much faster! Right now, you are using your browser to view HTML pages. You go to a page, get some information and move on. Imagine how much more information you could gather if you could tell your browser to look at 10 pages per second, compile it all and give you the executive summary. This is the power that API’s and a little bit of code provide.

Powerful Data Meme

API’s are your key to the Web at scale. An API (Application Programing Interface) allows you to interact with services like social networks, and marketing, advertising, or analytics platforms. With a bit of code or the right tools, API’s can be used to do almost anything that a digital marketer does manually. The real power of marketers who can program comes from using API’s to programmatically execute marketing tactics that would be otherwise impossible for humans to do at the same speed.

Painless Reporting

“I love creating the same report every month”  No one ever.

Reporting is part of being-data driven but unfortunately, it sucks. It is time consuming and takes your valuable time away time away from creating or optimizing marketing strategies. API’s are a very elegant answer to recurring reports. If you have to get data from several places just to format it into a spreadsheet or charts, let APIs help. Google Spreadsheets and Google App Script offer a friendly API to allow you to populate spreadsheets and charts with data programmatically. Just make a call to your analytics platform or email marketing platform or your advertising service’s APIs to create up-to-date dashboards.

Automation: The Key to Growth Hacking

There are also many other tasks from response emails when users sign up to keyword research using Google’s auto-suggest to PPC bidding with Google Adwords that can be automated using API’s.

Keyword Research? Ain't nobody got time for that!Even social media management can be automated using API’s (think of that annoying “growth hack” that people try when you tweet to hashtag and they favorite it or add you to a list 3 seconds later.) I am not saying it should be done, just that it can be done.

All of these digital marketing tasks have one thing in common: they have an input and depending on what that input is, they have a slightly different output. These tasks are perfect candidates to be handled by algorithms. Write the instructions in code to decide when/how these things are done and your work time becomes a lot more efficient and your work will scale infinitely. Think of this like IFTTT (which is all about interconnecting API’s with some logic) for digital marketing.

Web Scraping: Research at Scale

Web scraping is very similar to interacting with API’s but in this case, the API is a collection of HTML pages or files with consistent formatting. Take for example, the indeed.com trend graph images that I have been using; depending on the URL input, their server will respond with a different image. Try it yourself (change {keyword} to a job or skill):

http://www.indeed.com/trendgraph/jobgraph.png?q={keyword}+{keyword}

If you were looking for the newest trending skills, instead of searching their website over and over, you could make a hundreds of requests to their /jobgraph URL extension and you could quickly scan the images to see what skills you need to learn. That might be a trivial example but you get the idea!

As you can see from the last example, APIs can be used to speed up processes at any scale but are absolutely essential to large processes.

Hacking Social for Fun and Profit

Exploring API’s can offer new and creative ways to market your product or service. One especially remarkable tactic that employs the Instagram API was just started by Marais Shoes last year. Marais uses the Instagram API to check, in real-time, for comments on their images that contain the hashtag “sold.” If the comment author has signed up on their site using Instagram. The member is emailed a link to their shopping cart with the featured product conveniently in their cart. This brilliant tactic would not have been possible without the combination of marketing savvy and an understanding of API technology.

REST, JSON, XML, WTF?

Finally, In order to know what an API is capable of, a marketer must know what data can be interacted with and how it is transmitted. This is where transfer protocols and data structures get involved. But don’t let the language scare you, at an operational level these are not that complicated! The large majority of API’s these days are very user friendly thanks to REST (REpresentational State Transfer) and JSON (JavaScript Object Notation) formatted data. JSON is very easy to understand once you try. It has a very simple set of rules about how data is organized and formatted. These rules are much like MLA formatting for research papers (except much simpler). The consistency allows us (computers and humans) to easily understand information because we know what formatting to expect.

Here is an example of JSON formatted data. It comes from the Facebook API and is simplest representation of me in the eyes of Facebook. See, not so bad!

https://graph.facebook.com/trevor.fox.921

Learning How to Use REST API’s

A great way to build an understanding of REST is using a cool tool called PostMan. PostMan is a Chrome App that acts as a “client” to inspect what data is available in what way from different API’s. You enter in the URL of the service you want to work with and PostMan will bring back the data and format it in a way that is easy to understand. From there you can write a little big of Google Apps script or server side code and automate the whole process.

Another cool tool is cURL. This is the nerdy grandfather of PostMan that lives in the Bash Shell. It works in the same way as PostMan except you enter the URL in the command line and then the data is printed to the screen. cURL is definitely as user-friendly as PostMan but it is good to be familiar with because many API’s and services refer to cURL in their documentation. Spend one hour learning cURL. It will save you loads of time banging your head into API error responses.

For more on learning how to you API’s, the next post explains how to make sense of API documentation, how to find the data and make the data work for you.

Read the rest of the $10k Technical Skills for Digital Marketing or…

Get notified when each posts is released!

Learn Programming and Databases for Digital Marketing | $10k Tech Skills 2/4

This is part t in the $10k Technical Skills for Digital Marketing Series. Part one introduced the importance of learning client-side technologies and offers a plan to learn Javascript, HTML and CSS for digital marketing. This post broadens the picture by introducing server-side programming and databases, which together compose web applications. Understanding how web applications work is a major benefit and should be essential knowledge for digital marketing. Enjoy!

Learning How Web Applications Work

From Google Bot to the Facebook Social Graph, to this WordPress blog; the web as we know it, is a massive system of interconnected applications. All these applications are simply programs and databases that run on servers. And while building these applications is a massive undertaking, learning the underlying processes and concepts is not. It takes nothing more than a bit of effort and time to learn enough about programming and databases to significantly set yourself and your resume apart from the average digital marketer.

While the benefits of learning how to write server-side code and interact with databases are not as immediately useful as many of the skills listed in Part 1, it is actually the process of learning this skill that presents the real value. The learning process will provide and intuition about how applications work and how processes can be scaled. This is key to digital marketing at scale.

If you can understand how search engine bots crawl websites, you can understand what makes a website crawl-friendly and you begin to understand the technical aspects of SEO. If you understand how algorithms work, you can understand Edge Rank and how Facebook decides to distribute content and broaden your reach. If you can understand how your CMS works you can map your analytics platform to it and gain better insight, which you can then use to, automate processes like email and offer personalized experiences. This new intuition about the web will continue to present opportunities.

You will also find many practical opportunities to employ your new programming and databases querying skills for digital marketing tasks and processes. While these skill starts to bleed into the realm of web development and data-science/business intelligence there are still many applications for server side scripting languages, from automation to optimization that can be very powerful for digital marketers.

Programing for the Web

When starting out on the road to learning server-side scripting, it is most realistic to start with PHP, Python or Ruby on Rails. All three are open-source, have strong communities and plenty of free learning resources. They all offer many similar advantages but each is powerful (and practical) in its own way.

programming languages for digital marketing

You see why I chose python…

PHP, for better or worse, has been the defacto server-side language of the Web for a long time. PHP is what powers WordPress, Magento, ModX and many other content management systems (CMS’s) and if you are in digital marketing for long you will likely run into at least one CMS powered by PHP. Learning PHP will come in handy when you find yourself wanting to add schematic markup for search engines or scripts for testing or analytics platforms like Optimizely or Google Tag Manager.

Depending on the site(s) and development resources (or lack thereof) that you are planning to work with, PHP may be good choice. It is the easiest code to deploy, as all popular web servers will support PHP.

Python is also used to build websites with frameworks like Django and Flask but more often, sites that are built with Python are apps built with a specific, custom purpose. Unlike, PHP and Ruby, which are designed for, web development; Python is a general-purpose language, which makes it go-to languages for data-science. (The resources featured here are most about how to learn python as that is the language I have focused learning the most. It has been great!)

For the technical marketer, Python is useful for scaling big(er) data science-y processes like web scraping, querying API’s, interactive analysis and reporting. Many processes that are carried out manually can be programmed using Python and run on a cron job or other triggers. One major benefit of Python is that it is so easy to learn thanks to the number of educational resources and friendly syntax. If you find yourself venturing into the world data science, you will be well prepared with Python as a large and active data science community supports it.

Ruby on Rails, well, I really haven’t played with it much but I have heard it’s very nice. The key, I hear is that it is good for rapid Web app development.

Node and JavaScript were much of the focus of Part 1: Learning Javascript.

Database Querying and Analysis

Digital marketing without data is not digital marketing and the digital marketer who is not data-literate is just a marketer. I am not arguing that all digital marketers should be become SQL ninjas but learning this skill, like programming, is as much about gaining an intuition about how systems and applications work as it is about developing a practical skill.

databases and analtyics

For a real-world use case that employs this skill as both intuition and a practical skill, look no further than Google Analytics. The Google Analytics web interface is ‘simply’ an elegant way to query, sort, filter and visualize site usage/performance data that is collected in a database. Having a general understanding of how Google Analytics stores data and how different data points/hit types interrelate allows you to be much more precise in your analysis and confident that the data that you pull from Google Analytics is accurate.

SQL knowledge can also help you in times that you need to pull raw data out of Google Analytics for further analysis or to avoid sampling. With Google Spreadsheets’ QUERY function, you can query spreadsheet data using SQL (Structured Query Language). For quick analysis and more complex inspection of data sets, writing SQL queries to explore and form data to your needs can be much quicker and easier to debug than writing a successive set of spreadsheet functions.

When dealing with large amounts of Google Analytics and sampling becomes a significant issue, Google’s BigQuery can be hooked up to Google Analytics to provide SQL-like query functionality with greater speed and scale. When you become comfortable with this GUI-less interface, the ability to query any database become much less daunting. You can then answer question by directly querying databases such as a website’s MySQL database using phpMyAdmin.

“Every question can be distilled into a database query,” Adam Ware of SwellPath told me when I first started learning about databases. The phrase seemed very exciting and has since proven accurate. I have come to realize that databases simply hold all the raw information in a defined structure. By asking the right question in the right way, your digital marketing insights are limited only by your data.

Once you start to understand how databases operate you will notice their appearance in apps across the web from ecommerce stores to analytics platforms to blogs. The understanding of how data is stored and how to extract the data that you want will also significantly improve your ability to use applications to their full potential, ideate optimization for existing apps and learn new applications. This intuition is skill that helps turn data into to knowledge and as you knowing is half the battle.

How to Learn Web Application Programming

Start Here: Codecademy.com

This is a great place to start with any web programming language. It is the quickest, easiest and most fun way to get up to speed with a programming language that I have found. Best of all it is free. It offers courses in PHP, Python and Ruby and hosts very helpful Q&A forums for coders who are just starting out.

Get up to Speed: Intro to Programming with Python (Udacity)

Once you have gotten a feel for programming (and a few bumps and bruises to go along with it) the next place to go is to start to understand the real power that programming offers. Udactity’s Inro to Programming in Python picks up where CodeAcademy.com leaves off and introduces capabilities rather than just syntax and style.

For the digital marketer, this course is especially useful because the course is taught through constructing a very rudimentary search engine crawler (or at least the general idea of one). This application opens a window of understanding how big applications work and will make you think differently about how search engines operate.

How the Web Works: Web Development (Udacity)

There is a lot more than just programming that differentiates marketers who can program from web developers. From hosting, to caching to cookies, this course does a good job introducing these concepts.

From my experience, it was a bit too difficult as a follow up from the Intro to Programming in Python course to actual create and deploy a web app, but it does give a substantially understand of technical web terminology to communicate effectively with web developers. (This is a very valuable skill if you ask me.) From this course you will have an understanding of what topics you need to take on in detail to accomplish what you need to do as a technical marketer.

How to Learn Data Analysis with Databases

Become Data-Driven: Intro to Data Science (U. Washington & Coursera)

In my opinion (and I am a bit of a biased data-geek), this is the best online course I have taken. Each lesson offered “aha!” moment after “aha!” moment while teaching really useful skills.

The course assumes only a bit of Python experience and offers a comprehensive introduction to everything from interacting with API’s with Python and to querying databases from the command line to how to think and communicate with data. Taking this course will make any digital marketer more data-driven and will back them up with the skills to take action.

Database Deep Dive: Introduction to Databases (Stanford & Coursera)

Slightly more academic than Intro to Data Science, this course provides a very strong foundation for understanding data and databases. If you are a “why does this work” type of person, this course will be very interesting.

From a practical standpoint, the course offers very good lessons on JSON and XML formats which are everywhere in digital marketing and their understanding is essential for working with API’s. The database portion of the course will take you at least as far as you will need to go for the digital marketing applications of databases.

Put it all Together: MongoDB University

If all these courses have been interesting to you and you have a good handle on programming, then this is the course for you! You will build a real webb app from the ground up while learning MongoDB hotness. Another digital marketing specific benefit to this course is that the app that you build is a blog. Understanding how blog content is retrieved and presented will help you understand a lot about semantic SEO.

I hope you have at least one direction that you are excited about. Leave a comment if you have any questions or follow the rest of  the $10k Technical Skills for Digital Marketing series by signing up for email notifications when new posts are up. API’s, web scraping and “how to learn” are still to come!

Learn JavaScript, HTML and CSS for Digital Marketing | $10k Tech Skills 1/4

This is part one of four in the $10k Technical Skills for Digital Marketing series. Being able to code JavaScript, HTML and CSS are the technical skills that enable you to design the presentation and experience of your marketing messaging. JavaScript will also take you much further. These skills will really increase your market value if you are interested in conversion rate optimization, web analytics, email marketing, PPC or SEO. See how these skills are useful and how to learn them.

Learn JavaScript. Love JavaScript.

JavaScript was the first technical skill and first programming language I really learned and it turned out to be one of the greatest gifts I have ever given myself. JavaScript is arguably the most frequently used, extensible and most valuable tool for digital marketing. It broadens my capabilities, it increases the speed of my work and it adds value to the work I do. How many skills can you offer to an employer (or yourself) that can make that claim?

JavaScript Skills Trends

Let me substantiate the three claims I just made:

JavaScript Adds Value

JavaScript adds value in the form of more and better data. JavaScript is what enables on-page Web analytics data collection. Anything beyond standard pageview tracking such as Google Analytics custom events, dimensions, metrics or product data demands custom JavaScript code.

In digital marketing, better data enables better performance. With a basic understanding of how JavaScript works, you can communicate clearly with developers how you want to collect the data that you need to improve marketing decisions. With JavaScript coding capabilities you can employ Google Tag Manager and handle the custom tracking instrumentation yourself.

JavaScript Broadens Capabilities

JavaScript is used everywhere! Web Analytics data collection was the original reason for marketers to learn JavaScript but now, thanks in large part to Google, JavaScript can be used to automate tasks from email marketing reporting with Google Spreadsheet to PPC bidding and account maintenance with Google Adwords Scripts.

Finally, the application of JavaScript that has the most potential is UX testing and optimization. JavaScript is what testing platforms like Optimizely use to transform a page into different variations of an A/B test. Along with web analytics tracking, this capability offers enormous value and will certainly continue to do so into the future.

JavaScript Increases Speed Through Automation

JavaScript can be used to program repetitive tasks. Automation makes you fast and enables you to work a larger scale. From simple tasks like finding information on a page using a bookmarklet or Chrome Extension to larger jobs like crawling sites and automating task with PhantomJS.

Better, faster, stronger. See why I love it? In addition to the practical benefits, learning and practicing JavaScript is really fun and will introduce a very cool and progressive community. The last bonus about learning JS is that since Node and MongoDB taken hold, it looks like JS is going to be sticking around for a while.

Read and Write HTML and “Get” CSS

HTML is an easy one. Seriously.

HTML literacy is probably the skill that translates to quantifiable value in the shortest amount of time. HTML takes little time to learn, is relatively easy to become proficient with and there are many opportunities to use the skill. It is everywhere! Take, for instance, an organization where there is little existing HTML literacy, you can step in, change and remove ancient images on website’s rotating marquee and Boom!, digital facelift and decreased page load time! Your boss, your site’s visitors, and Google will thank you.

Even if you just become comfortable enough with HTML to be able to visually parse the source code of a webpage, you will have the ability to identify issues and understand their causes. This skill is especially valuable for Search Engine Optimization.

HTML5 Skills Trends

Technical On-Page SEO

Future-facing SEO, along with common meta-tags, integrates structured data such as Schema.org and JSON-LD requires specific syntax to have their intended affect. Page markup can also affect search engine crawlability, page load times, and cross browser compatibility. In this way, valid HTML affects search engine performance and user experience.

HTML literacy also demonstrates its value when implementing analytics or remarketing tags. The code markup and location of the code on the page must be accurate to properly send data to analytics platforms. Being able to debug implementations and communicate with development partners and not fully rely upon them for minor technical support drastically improves the fluidity of technical marketing initiatives and spares you from worrying how or if things will get done.

Email Marketing

Another quick and measurable impact comes in the form of email marketing. You probably already know this but in case you don’t, emails are coded with HTML. You probably also know that email marketing is often one of the most effective digital marketing channels. The ability to test and optimize the look and feel of marketing emails can have a great impact on the effectiveness of the channel and truthfully of the brand’s identity. From simply swapping out images to writing inline CSS and using email platform template tags, the ability to code HTML is vital to a strong email marketing program.

Conversion Rate Optimization

The final use case for HTML and CSS knowledge is one that offers a remarkably high potential value and that is on-page testing and optimization. Conversion optimization tools like Optimizely and Google Content Experiments allow you to add, remove modify the HTML and CSS (styling, location, spacing) or elements on a page to create different experiment variations of the page. Some of the earliest and biggest wins that come from conversion rate optimization experiments are relatively simple CSS changes so having operational knowledge of CSS can translate to significant value rather quickly.

Conversion Rate Optimization Skills Trends

HTML and CSS knowledge can also translate to a sustainable value beyond the operational, nuts and bolts, knowledge. As your conversion rate optimization testing plan develops and experiment possibilities become less immediate, having the knowledge of presently untapped methods of displaying a page or newer HTML technologies will open up new testing possibilities. As long as browsers and HTML standards continue to change (this will always) prove its value.

Learning JavaScript

Learn By Doing

CodeAcademy.com is a great place to start. It offers a great introduction to the basics of the JavaScript language; syntax, data structures, expressions, etc. It also offers an intro a course on jQuery. The jQuery course is offered before JavaScript which seems strange to me as jQuery is built on top of JavaScript. I would strong suggest taking both courses if you want to learn jQuery.

Learning From The Work of Others

Learning JavaScript, HTML, and CSS is unique in that all the code that makes up a web page is accessible to you. You just have to know how to find it. Chrome Developer Tools (don’t be intimidated) offers a ton of useful ways to inspect and learn what is happening on any web page on the Internet. You can inspect and live-edit pages, see what files are coming into the browser across the network and write JavaScript in the context of any web page with the JavaScript Console. This is a very valuable tool and learning it will also teach you a lot about how browsers, the DOM and web pages work.

Automate Something

Google Apps Script offers an easy interface to try your new skills and accomplish some pretty useful things. It is nice because it abstracts away a lot of complicated things and offers a very simple API to Google Spreadsheets, Google Drive and Google Docs. There is also a lot of good documentation for getting started. If you manage PPC, try Google Adwords Scripts. FreeAdwordsScripts.com offers a lot of good code examples and cool ideas to show how to work with the Adwords Script API.

Books to Read

DOM Enlightenment (Free Online): All you could ever want to learn about interacting with the Document Object Model and more. This is a great one to accompany your exploration of Chrome Developer Tools and the JavaScript console.

Object-Oriented JavaScript: Knowing JavaScript prototypal inheritance is one of the big differences between knowing JS and knowing JS. This is a pretty sweet deep dive into the subject.

Secrets of a JavaScript Ninja: This was written by John Resig who created jQuery. Needless to say, there are a ton of clever patterns to take your JS capabilities to the next level.

Google Apps Script: If you are more interested in the Google Apps Script and simpler forms of automation, this book is great. It will introduce you to a lot of server-side concepts. This stuff is great but just be weary, getting too deep into Google Apps Script may prevent you from learning the really powerful server-side programming languages.

Videos to Watch

Videos can be pretty inspiring. YouTube searches for whatever you are learning can be very helpful but a couple videos that I recommend are:

Learning HTML and CSS

Learn By Doing

codecademy.com again. You have to get repetition with the basics and this is a great intro. Get through it and then read a book and start really practicing.

Guru99 has a ton of free resources.

Learn by Editing

  1. Get to know and love your code editor! Download the code editor of your choice. Atom is free and pretty good.
  2. Write some basic web pages and learn how to use scripts and link style sheets to your web page. Reference w3schools.com and look at the source code of existing pages for reference. GitHub.com has some nice clean source code. (You will also want to get to know GitHub anyway)
  3. Learn some tools. HTML5 Boilerplate is a great place to start with solid web standards and learning Twitter Bootstrap CSS framework will almost certainly come in handy.

Books to Read

HTML5 for Web Designers is great if you want a good basic intro. It will tell you what you need to know but no necessarily how to do it. This book is a must if you are going to be using Optimizely for testing. http://www.abookapart.com/products/html5-for-web-designers

HTML5 & CSS: Learn to Design and Build Websites is an intro to the medium and teaches how to use it at the same time. This is a great book to read in conjunction with step 2 above.

Now go make something awesome! Or rather learn how to make something awesome and keep practicing until you do. These front-end skills will take you a long way and make you very valuable. Check out the rest of the series to learn more about the Back End and Applications, API’s and Web Scraping and Technical Resources and How to Use Them.

Read the rest of the $10k Technical Skills for Digital Marketing or…

Get notified when each posts is released!

Automate Optimizely Reports With the Results API

“Report automation” is my favorite two-word combo besides “free pizza.” And because of the nature of the testing and optimization game, and the speed it happens (in comparison to something like SEO), reporting can can pile up rather quickly. This is why I was as happy as [see picture below] when Optimizely recently released a test result endpoint from their REST API. To celebrate, I hid in my basement for hours on end and coded an Optimizely + Google Spreadsheet Report Automator that makes it easy to send email reports and import data directly into Google Spreadsheets.

Report Automation Greatness

A REST API, for those of you who haven’t fallen in love with HTTP yet, is essentially a menu of available data that you can request from a service, like Optimizely, Google Analytics, or Moz, based on the service’s URL that you request. (I borrowed that explanation from this great explanation of REST API’s on Quora.)

The Optimizely Results API

The Optimizely Results REST API makes available all the data about your Projects, Experiments, Experiments’ Variations, Goals, and Visitor Segments. If you’re really ambitious you can use the service to create, update, and delete experiments. For me, and hopefully you since you are reading this, the most useful part of the API is the Results endpoint. When you request the Results endpoint, the Optimizely API returns a list of all possible combinations of Goals and Variations. So if you have two variations: ‘Original’ and ‘Variation #1’ and three goals: ‘Engagement’, ‘Users Getting Totally Stoked’, and ‘Revenue,’ the API will return a list of six objects that describe how each variation performed for its corresponding goal.

I thought this was an interesting way of doing this but the awesome @OptimizelyDevs tell me that this is how it must be done in order to keep the service truly RESTful. (See: super-geek read about REST)

Automated Reports > Free Pizza

Back to delicious automation… I started automating reports for myself and team members as soon as I found out that the results endpoint was available and, ever since then, my life has been better. If you think about it, making data more available to your team is going to have two awesome results:

  • Less time wrangling data means more time analyzing and ideating!
  • Promotes an open culture of testing by giving everybody a stronger connection to the experiments and results.

How to Automate Your Optimizely Reporting

With the Results endpoint, there are a number of ways you could set up experiment reporting, like notifications when experiment goals have reached thresholds, notifications when experiments start or end, or time-based reporting to keep your team up-to-date. I tried to make this as broadly accessible to as many experiment driven optimizers as possible so I used the Optizely’s generic export format that you get when you share an experiment’s results. You can either email this to a list of emails or print it to a spread sheet. I made the assumption that you would only want to report on active experiments so that’s what this does. Please comment below to suggest changes. Let’s make this awesome!

Step 1: Enter Your API Token

Go to the Optimizely + Google Spreadsheet Report Automator and make a copy.

To get your Optimizely API token, go to www.optimizely.com/tokens, and click “Generate.” Copy the active token into the Optimizely API Token box then go to the Optimizely Reports menu and click “Test API.”

 

Optimizely Report Automation API Key

This should bring up the following. Please comment if it doesn’t.

Optimizely Report Success

Step 2: Send Email Reports

Enter a list of emails and click “Email Reports” in the Optimizely Reports dropdown. Wait a tick and check your inbox. You have become a reporting spam master!    

Step 3: Auto-create Spreadsheet Reports

Click the Spreadsheet Reports menu item, wait for some HTTP calls and  watch the sheets populate.

Step 4: Set Triggers and Automate Everything!

To set up a time-based trigger, from the spreadsheet click “Tools” > “Script editor…” to open the script editor.

Optimizely Report Menu

Don’t worry, there’s no need to touch the code. In the code editor window click “Resources” > “Current Project’s Triggers.”

Optimizely Report Google Apps Script

Then setup up your time-based trigger for the reporting method that you want.

Optimizely Report Triggers

Test Like Crazy! Report Like a Sane Person!

I hope this works out for you. Please comment with any issues that you might face. If you think this could really be improved. Let me know. Let’s make something great!

Data-Driven Marketing Starts With the Data Layer

The term “digital marketing “ should describe the marketing methods as much as it describes the marketing medium.  

Too often, marketers are satisfied with their “digital marketing” efforts when they send a tweet, “blast” an email or run a search ad because their message is transmitted over a digital medium.  Unfortunately, this misunderstanding so vastly underestimates the potential power of digital marketing; well…I just had to write a blog post about it.

If you take just one idea away from this blog post take this: The  access to data that the digital medium affords, when interpreted correctly and acted upon confidently, infinitely strengthens the performance of the digital marketing medium.

If you take two ideas away from this, take this too: The data layer is the very first place to start to capture and leverage your data. It provides the capability to merge data at its source. This is the foundation for data-driven action in real-time.

I wrote this post to illustrate the value of the data layer in the context of today’s digital marketing stack. I explain the present state of the digital marketing medium and how and why the data layer has a role in it. If you’re done reading, please tell your friends. The share buttons are above. Otherwise please read and leave a comment below.

I deal with data

I have data skills!

What is the data layer?

It is essentially a menu of available data, from which data consumers (defined and explained later) can order from within your web app or page.  Technically speaking, the data layer is a JavaScript data structure that receives and holds data about the user, the user’s interactions, the app, the view or page, and the context of the user interaction within an app or page.  The data layer can then be accessed by a tag management system or application for data collection or to trigger marketing actions.

The tag management system sits on top of the data layer and is responsible for routing data to data consumers. This could be as simple as a few lines of home-baked of Javascript or as intricate as Google Tag Manager. Ultimately, a tag management system is the logic that decides where the data is routed and to some extent how the data in the data layer will be used.

Why does the data layer exist?

To understand the role that the data layer plays in digital marketing, it helps to understand two currently sexy terms: Web App and the Digital Marketing Stack. I will explain those later but let me pull a little Chuck Palahniuk on you and set you up with these three eerily similar but presently unrelated premises:

The data layer exists because:

  • Web apps have multiple players providing and consuming data within the app.
  • Similarly to the concept of data independence, data access should be flexible and independent from the external user-facing layer of an application.
  • Data access and acquisition should not be barriers to data-driven action.

And now a story…

How the data layer came to be

(and A Brief History of the Web Apps.)

In the beginning there was HTML. It was and is the commonly used document structure for web documents.  In a very basic sense, the HTML language codes how text is hierarchically structured in a document. So as you remember in 1997, we could request an HTML document from a server far away and we could view it in our browser as a webpage, and things were great.

Sometimes, people would add some style to these documents and, depending on the browser you were using, things may or may not have been so great. The problem with adding style to an HTML document was that writing the style rules to the document itself meant that any time there was a need to change the style of a document, it meant changing the document itself. This was very messy and inefficient.

Then came CSS, a separate additional layer of style rules that your browser would apply to an HTML document.  Colors, sizes and blinking distraction exploded on the page in a barf of glory. People in the Wild Wild West of the web now had a simple method of keeping their theme of yellow Courier font over the top of a picture and John Wayne across all the pages of their site by using the same style sheet across their site. It wasn’t always tasteful and it certainly wasn’t interactive but it was consistent. Web developers hailed the separation of style and content layers.

Hello World! Here comes JavaScript!…and ten more pop-ups about things you wouldn’t bring up at a dinner party. JavaScript could both blow your mind and ruin your browsing experiences depending on your browser. Like document style, it was often a jagged mess until people realized the virtue in separating the JavaScript code (the behavior of the page), from the content and style of the document. Recognize the theme?

JavaScript is what is responsible for the prolific < booming voice > WEB APP </ booming voice >.  It is behind all of the shifting, scaling, constantly updating, interactivity that we now know and love. Possibly, the most powerful aspect of what JavaScript offers is the ability to get more data from a server without requesting a whole new web page. This is called AJAX and is what makes Facebook login for your favorite ecommerce site possible. It is also what makes web analytics products like Google Analytics possible.

Today, interactive Web Apps have become the norm. From Facebook, to Gmail, to EBay, to your website, web apps do more than just serve dynamic content from a server. With the help of AJAX, they can host an entire ecosystem of plugins, pixels, scripts, snippets, iframes and APIs that communicate with the other servers of the web! There are data providers (players that add data to the page like an embedded YouTube video, Qualaroo survey or the app) and there are data consumers (players that take data on the page for their own use such as analytics platforms like Google Analytics, MixPanel and SiteCatalyst, marketing tags like Adwords, Facebook or Adroll, email marketing platforms like Campaign Monitor or Mailchimp and testing and optimization platforms like Optimizely using all this data to trigger their own events using logic defined by each specific data consumer.)

“There ought to be a layer!” some smart person shouted after this mix of independent data and logic got pretty messy.  Again, a new web feature arrived and a new layer arose.Each layer of an application separated the business of each feature from the business of other features. By separating all the layers, it became possible to manipulate and modify each layer without affecting other layers or the application as a whole. The web is stable. Occam put his Razor away.

Enter the data layer. There is data in the application, there is data in the users’ interactions, and there is data coming from outside sources. The data layer exists to separate all this data from the business logic of the application. This way the application is only responsible for serving the user, and all other data consumers have a central point of access for the data they use.

How the data layer works (by example)

Let’s say that your brand just produced a video to promote a new product.

Your digital marketing stack looks like this: Your brand’s website uses Google Analytics to track user interactions and session source from several paid and earned channels that you cultivate. You have remarketing tags for Facebook, YouTube and Adwords and you use Optimizely for testing and dynamic content. Finally, you use Google Tag Manager to manage and trigger your marketing tags.

Because you’re smart, you recognize that just posting this video on YouTube is not going to have any impact on sales. (The right people have to see it!) You also recognize, based on your last video campaign, that users who saw the video were 15% more likely to convert, making it very important for users to view the video.

So you feature your video on the homepage.  As users come in, you use JavaScript to check their referrer and place that information in the data layer.  Based on the referrer you can infer their likelihood to convert; we know that a user who comes in via a certain branded paid search campaign is very likely to convert. We tag users who visit from this campaign with a value of “high” and place that data in the data layer. You could capture this in Google Analytics in a “User Value” custom dimension.

As users interact with the home page, some watch your new video and are tagged as “video viewer” (again, this could be captured as a Custom Dimension) and some navigate past the home page without viewing the video.  These users are not tagged. Because users of this segment have proven to be worth such a high value based on their referral source, you have set up Google Tag Manager to tag this specific audience with both Facebook and YouTube video remarketing tags. This user must see this video!

A couple days later, the user returns via a Facebook video post tagged with UTM parameters that are again read by JavaScript. This time, because the user came from the video post, we use Google Tag Manager to tag this user as a “video viewer.” When this happens, another event happens: this user is added to an Optimizely audience. Optimizely then cookies this user so that when they navigate back to the home page, instead of seeing the video front and center, they see a persuasive call to action above the video that shortcuts them toward the ultimate conversion page. Finally, a transaction is registered in Google Analytics along with a few events and a branded search campaign and Facebook video campaign source for attribution.

In this case, there were four players involved, but the most important thing to recognize is that without the data layer to unify all the data that each player was consuming, each player would have continued to act independently. The data layer provided the capability to merge data at its source, making it possible for all these players to interact with each other in real-time. The value created by each part of the digital marketing stacks working together is greater than the sum value of their parts.

 

data-gangster

Value is in the aggregate. Be a data gangster.

So much data! So much opportunity!

There is data everywhere. As long as there is a common thread between a single user and your website/application, there will be data that describes that relationship. Managing this data, finding the value in it and finding the value that it provides to other data role players is the key to maximizing digital marketing success.

To learn more about the data layer in action, see: Enhanced Ecommerce Using the Data Layer.