Categories
public-work

Creating a Custom POS/E-Commerce

Overview

Digitizing a Validation & Ordering Process

I performed interaction design on a platform intended to digitize manual validation and ordering processes for custom products.

The platform had to incorporate

  • the selection of products according to a user’s eligibility,
  • several types of customization,
  • translations for a global audience,
  • the technical affordances of the Clover POS
  • ….

My team included the SME’s in my client’s office, internal IT, and a 3rd party development team.

Goals & Methods Overview

Understand the Environment, Ordering Options, and Logic

I needed to understand the ordering process in detail, all the available product option types, the qualification rules, and the environment where sales took place.

Method: SME Interviews

I spoke with SMEs and began drafting up a journey map as a single asset for all information pertaining to the ordering process.

Ensure Useful & Usable Software

I needed to make sure that the software actually solved the problems that various stakeholders were having, and that it didn’t create more problems in the process.

Method: User Interviews, Prototyping, Demos, Testing

I shared prototypes of the software with internal members and walked through the process.

Obviate Risk of a Very Short Timelines

We had 3 months to produce working software. There was a lot to be careful about.

Method: Constant communication with development, SMEs, and IT

I maintained open communication channels with the development team to ensure they received sufficient technical information; with the SMEs to ensure we were solving the right problems; and with IT to properly incorporate qualification rules.

Now, let’s take a look at some of the work

Define, Analyze, Ideate

Interviewing SMEs

My first interview was with the sponsor. The problem was expensive and persistent. In our initial interviews we covered high level themes like:

  • what were our opportunities for digitization here?
  • how do we see this solution integrating with existing environment?

In addition to:

  • who are the buyers?
  • how do staff presently tend to them?
  • what are some insights and challenges shaping the current process?
  • what are some problems with the current process?
  • how does staff process the orders?

From this meeting, I was able to begin drafting an itinerary of the steps taken during sales process from start to finish.

Buyer-Qualifying Data

Since I was preparing the specifications document for a development quote, I wanted to make sure we had details regarding the qualification criteria, but also details about the database schema used to source these criteria.

I spoke with a prospective vendor regarding the details they wanted, and included them in the specifications document.

One such asset was a table containing the qualification criteria for each product.

From User Journey to Initial Sketches

While continuing to discover more about the workflow, I sketched out the screens and general UI elements that seemed necessary on sheets of paper.

Protyping & Validating

And Then Paper Prototyping

I presented the flows to the SME and we walked through it as they explained what they thought was going on in each screen.

We changed the flow 2-3 times and made numerous valuable notes thanks to the decades of experience presented by the SMEs during this process.

We Change the Flow Based on New Information

Walking through the flow, the SME identified 2 significant issues.

The Changing Lives of Buyers

While qualifications required to purchase certain products didn’t change, buyer’s themselves changed through time. Their names changed, their professional lives changed, and so on. We needed to allow for this flexibility within the flow.

This meant that we needed to allow buyers to enter different names and professional designations for each product they purchased. Originally, these details were entered once in the beginning of the process and used for every product.

In this video, we see users can alter their names and designations as they add products to their cart.
Opening the Door to Identity Fraud

All this flexibility in identity increased the possibility for identity fraud. I wanted to make sure that the digitization process didn’t eliminate the existing barrier of human appraisal preventing this type of fraud from occurring.

When the product information was transferred to a cashier, we made it easy to cross check the names we had on file with the names provided by the buyer for each product.

Designing for Failure

Besides for thinking a lot about about the path we want our buyers to take, we considered the ways they might fail to complete.

Then we designed the system to correct or accommodate these failures.

Increasing the Fidelity with Figma

When the flow and UI appeared largely to have stabilized, I wireframed the results in Figma. I paid particular attention to making sure all necessary elements and critical flows were represented.

Challenges and questions were identified and addressed for the web app’s RFP.

Categories
public-work

Custom ERP & Sales Tool

Description

Digitizing Sales & Admin Processes

A company that sells assets upwards of several million dollars wanted to digitize all their sales related processes. This meant creating a single portal that encompassed:

  • Private Access Catalog of Assets
  • Messaging, Surveys, & Email Notifications
  • Improved Asset Management Functionality & UX
  • Document & Photo Management Centers
  • User & Admin Dashboards
  • Exhaustive User Roles & Permission System
  • Google Analytics Integration

It also had to be completely mobile responsive.

The team consisted of myself, 2 visual designers, and our remote development team.

The Problem

Outgrowing Boxed Software

Our client was using a boxed version of software which approximated their needs well enough to allow them to operate.

However, they did not own their own data; the platform was not mobile responsive; the platform was very ugly from the buyer side, contra their brand; the platform required numerous workarounds which increased the complexity of their processes.

Goals & Methods Overview

Surface Complex Processes

We needed to understand their business processes in detail and ensure system level cohesiveness.

Method: User Interviews

I spoke with end users and documented their workflows, problems, needs, and expectations.

Enhance Relevance

We had to surface relevant actions for users in a variety of use-cases.

Method: OOUX, User Interviews

I referred to OOUX methodology and created an action inventory and object map prior to UI design. Information for these were also gathered from interviews.

Ensure Usability

We needed to employ familiar UI design patterns within a relatively complex and mobile responsive portal.

Method: Design Research, User Validation

So I researched functionally similar web apps and refactored them as necessary. These were then demoed or presented to our client end-users and feedback was gathered.

Obviate Critical Risks

It was essential that to minimize and isolate project risks.

Method: Agile & Dual Track UX Process

I initiated 2 primary work streams, one for Research and Validation, another for Production. I will write more about how I structured this project later.

Within each stream, we conducted frequent feedback, demos, user validation, and testing.

Now, let’s take a look at some of the work

Define & Ideate

Definition and ideation occurred regularly during design stages.

Requirements were elicited through focused discussion with the client.

My team and I produced new solutions and reviewed them internally.

Winning ideas were further prototyped, analyzed, and iterated on.

Big Picture Process Diagrams

Getting the big picture allows you to see what’s coming.

Through meetings with a senior analyst, I was able to diagram the business processes we would be digitizing.

System Map

The fidelity of this map increased with regular end user discussions and feedback.

I used these to enumerate actions required of pages used within particular use-cases. I documented these in an action inventory.

Action Inventory

The idea behind creating this was to lay out both required and additional actions all users would have access to in various screen contexts.

This helped me:

  1. Ideate on design goals for the next stage and reduce the number of considerations per stage.
  2. Focus my attention on creative ideation for actions various users might take in particular situations.
  3. Clarify distinct user permissions for the development team (logged in User U with Permissions P can perform Action A)

Object Map

Here, I gave the action inventory a visual representation. This format was a simpler visual representation incorporating relationships between objects — whereas the action inventory was simpler to create and edit during the ideation phase.

Pattern Research

Researching Competitors

In this project, I was not able to study competitor software. This would have been hard to find and acquire for our purposes. Instead, I continued to refer to our required business process map and sought out functionally related design patterns.

Sections of the web app such as

  • document and photo management centers,
  • messaging,
  • user surveying,
  • user and admin dashboards,
  • or the exhaustive permissions system,

all have functional corollaries.

For instance, Google has Google Drive, and Facebook has Photo Management.

So I asked myself, how would Google and Facebook address some of these problems.

So I recorded videos of apps as I used them in specific ways relevant to my project, and took screenshots of the parts that I would be referring to frequently.

Protyping & Testing

Weekly Prototyping Sprints

Epics were wireframed or prototyped on a weekly basis. These were shared with my team for review and feedback, and then shared with the client.

Wireframes

Prototype

Surprises

What Did We Learn?

I believe generally that if you aren’t surprised at any point in the process, then you didn’t do user discovery.

However, my work on this project was so tightly coupled with end users, that useful insights occurred constantly. Because of this, they were also relatively “small.”

For this reason I have left them out of the presentation and focused on the bigger picture process.

Categories
guides

Find Out How Far Users Are Scrolling with Scroll Event Tracking

Most of my clients don’t get really useful information from Google Analytics because they don’t segment their data and they don’t leverage the various tools that GA provides.

Using this Scroll Depth trigger as an indicator of reading or viewing, and you could segment your readership to see who reads what, and correlate that to conversion – just as an example.

Step 1 – Configure Your Variables

Step 2 – Create The Trigger

Step 3 – Create The Tag

Step 4 – Test

Categories
public-work

Online Community Marketplace

Overview

Designing an Online Marketplace

I was brought in as the interaction designer for an online marketplace where users can exchange favors, offer their skills and experience, and request help.

I was responsible for designing a proof of concept and specifications to define the approximate scope and development estimates.

The team included myself, an account manager, and a 3rd party development team.

Goals & Methods Overview

Designing a Complex System

Understand the Client Vision

I needed to understand the client’s vision for the product.

Method: Client Interviews

I interviewed the client and created a “1 pager” containing a product description, ultimate vision, challenges, and revenue options.

Design for the Same People

I needed to make sure the client and my team had the same set of users in mind.

Method: Persona Creation

Through YouTube videos and online articles, as well as interviews with the client, we were able to create a basic understanding of our primary audience.

Ensure Useful & Usable Software

I needed our flows to be useful and patterns to be familiar.

Method: Competition Research, Demos, Internal Testing, Feedback Sessions

I did first hand research on 2 popular web apps that achieve functionally similar results and documented the findings.

Development Handoff

I needed to ensure we produced the information necessary to produce development estimates.

Method: Regular Development Discussion

I worked regularly with the developers to forward updated information, respond to their latest questions, and document the necessary information.

Now, let’s take a look at some of the work

Define & Ideate

Client Interviews

In the initial client interview, we discussed the concept and its origin story.

Origin stories are really important for brand development and culture building, but they can also provide useful cues and insight into the heart of the original problem and intended audience.

After interviewing the client, I produced a “1-pager” and an initial set of user-stories.

user-stories

Persona Creation

After reviewing the client interview notes, YouTube videos, and articles.

Persona

Big Picture Flows

We needed to instantiate the vision into a concrete system that didn’t contain pernicious loopholes.

I started with how Task Rabbit and UpWork executed a few key flows

  • How users registered
  • How users posted jobs
  • How users found jobs
  • How job details were negotiated and finalized

I recorded a video as I performed these, then enumerated and described details of each step.

enumeration of steps and description

Example: Creating Job Posts

I turned the observations into a minimized version that we could use.

Meanwhile, I considered how we might further reduce the work involved in creating tasks. I returned to this particular topic towards the end of the project and created a 3rd option. Essentially, this concept connected a to-do list (the task creation) to a job board.

The details of the project would be hashed out in a stream with a few custom functions for sharing additional details as needed, as well as setting time/date and cost.

competitor flow

System Diagram

Having checked out the flows from competitors, I was able to define some of the system logic in greater depth. I used this to help create the prototype, to make sure I was not omitting critical logic.

I also noted possible issues, database interactions, and user notifications.

system flow diagram

Protyping & Validating

Making Experiences out of Diagrams

From the system flow diagram, I was able to get a sense of the input requirements at each step, and approximate back-end processes that would need to take place.

These informed the core of the functional elements which would appear on a page.

I used this to design the wireframes and prototype that we’d eventually build upon internally and test with client stakeholders.

Categories
rambling

Initial Thoughts on Busyness (Part 1)

An Interest in Busyness.

My impression is that people are often too disorganized or busy to:

  1. Do anything besides what they presently have momentum for
  2. Think about planning something else

To-do lists are popular, time-blocking is another one that comes up these days, and sometimes people know about entire frameworks like GTD.

But to-do lists are limited, time-boxing isn’t really effective if you experience many disruptions, and every solution tends to require all sorts of manual effort to effectively manage and deploy.

This means they’re primed to persistently fall prey to the original problems of being disorganized and busy.

So, what can we do about freeing up people’s time?

The problem is so pervasive, that it’s most noticeable when speaking with folks that just don’t seem to have the problem. The last time it happened I remember thinking something like, “these people seem to do a lot of cool things and don’t appear rushed at all.” *¹

This leads me to believe that the problem is not only about being busy, but about doing things you value. So I want to make an additional note, potentially at risk of inviting busyness back into the fold.

Would it be worth presenting alternative activities which they might value more?

Naming the Knowns

  1. There is a psychological component to the feeling of freedom (as in having more time for self-determination)
    eg: having more time for self-determination doesn’t mean one will feel freer, nor that they won’t use the time to detract from their overall sense of freedom.
  2. To-Do lists and GTD type approaches suggest this is also about time management.
  3. The volume of tasks, distractions, “fires” in a person’s life at present is likely to be a significant factor.
  4. Tasks will come in a few forms
    1. A task is essential and needs to be done (taxes, eating, garbage disposal).
    2. A task is not essential but appears related to some goal (writing blog posts on design, a/b testing landing pages)
  5. Thinking about freeing up time from tasks involves type 1 and type 2 risks:
    1. Type 1: You don’t stop doing inconsequential tasks.
    2. Type 2: You stop doing consequential tasks.

Naming the Unknowns

  1. Is busyness the source or a symptom of what I’m trying to pin down?
  2. How does the psychological component of being and feeling busy, work? What is it connected to? What are the flows?
  3. Where is the boundary between the mental and material states of busyness?
  4. Does this need to focus on both? What are the existing options for mental and material busyness?
  5. How can we identify and measure mental and/or material busyness?

Naming the Constraints

At present, the scope seems pretty big and poorly defined. This is an obvious issue. I’ll need to decide which part to focus on as the project moves forward. I’ll also need to identify whether it addresses the core challenge, or whether it changes my observations fundamentally.

Notes

– being rushed seems related to the ideas of contaminated time, time serenity, and even flow

Categories
rambling

First Thoughts on Poshmark

I am interested in Poshmark as an online marketplace that borrows a lot of ideas from the social media space.

I haven’t yet used it, but know a bit about it and wanted to jot down my initial thoughts going into it.

Marketplaces & Social Media

Topping the marketplace layer with a social media layer seems like a logical next step given the amount of preoccupation with social media by the creators and primary audience of such an app. I want to take a closer look at what aspects of “social” have been borrowed, and how.

Ethical Concerns

I suspect that the combination of designing for addiction (a la Nir Eyal) with monetizable on-site social media type behaviors make for very high-order ethical concerns that challenge existing business models (Tristan Harris, Chamath Palihapitiya, Jaron Lanier). It seems like a tighter integration of liking and sharing to revenue generation for the user.

New Design Patterns

I am interested in the resulting interaction design patterns shaping these emergent platform models.

Technology in the crypto space will definitely borrow these novel design patterns, and incorporate new layers of incentivization. I want to keep this in mind.

Categories
rambling

Notes on Projects, Calendars, and Planning as they Pertain to Busyness (Part 3)

Coherency vs Interruption

A normal calendar has the basic function of visualizing your time and the hours of the day as space in a grid. If there’s something you want or have to do, and you’re a relatively organized person, you find an open slot and fill it.

There are however, other variables which normal calendars don’t automatically factor in, which productive people do implicitly. For instance, the number of concurrent threads one can manage, the cost of context switching, and considering an activity’s overhead.

https://twitter.com/dorrismccomics/status/1126184428357681153/photo/1

In the comic, these other variables are all sort of visualized at once as size and position.

If this were a visualization of projects, we can safely assume the block size doesn’t simply represent the time to complete a task, but to how all the factors add up.

Each person will have their own thresholds which would determine the size of a project block, but I bet there’s a generalizable baseline from which a person can either gently expand or contract.

Calendar Events as Interruptions

A few years ago some friends and I had the idea that a calendar can quickly feel like a series of interruptions. In some cases, even the things we want to do on the calendar might feel like interruptions.

The challenge is to try to frame these events within a longer timeframe.

However, the assumption is that people can hold long timeframe goals and not feel as though the day-to-day activities have also somehow become distractions.

Incorporating Ideas From Budgeting and Project Management

For some perspective, I’ve started thinking about the tools for financial budgeting, estimating, and project management as analogs to dealing with attention.

  • There are different budgeting approaches. What are some of the inputs for budgeting time effectively? 
  • When creating estimates, we might factor in buffers as shorthand for admin work, for instance. Would you factor in 40% time buffer for your time estimates? (eg: related to one’s stress tolerance. A lower tolerance means greater buffer)
  • Considering all the things on a person’s weekly to-do: what is their work in progress (WIP)? How many goal-threads can we manage at once?

My Personal Experience Budgeting

One of the early problems I’d had with budgeting involved ‘over analyzing’ my budget and getting too granular.

What worked best was simplifying the approach. Simple, I set a single savings goal.

I decided how much I wanted to save by a specific point in time, made sure the monthly savings wasn’t eating in to “operating costs” like rent and utilities, gave myself a little weekly wiggle room (we’re better at managing scarcity than abundance), and put regular increments into savings.

Sometimes a little more, sometimes a little less.

What worked for me was to budget around my goal and to think about that goal first, rather than around my operating costs.

I knew that by X date I would have $Y, my operating costs would be covered, and that I would intuitively take care of the rest.

It was incredibly motivating and I saved a bunch of money.

Re-Introducing the Context of Busyness

Yet, I know I don’t always think about my time and attention this way.

I don’t know what my “operating costs” are in terms of time and attention.

To budget my dollars I know I need a goal, and I need to pay out money for things like rent and insurance.

But where am I paying out time and attention? and to what end? What is the goal?

What involving time and attention is required for me to have a healthy mind and body?

Categories
rambling

Sources of Busyness (Part 2)

My Design Problem is Too Vague

See Here

Busyness can come from a state of mind which is totally independent of being busy. This is to say it can be present as a psychological phenomenon or a material one, and is likely a system involving both.

Not to mention, I haven’t really thought about who I want to help. “Busy people” is too general since different people are often busy in very different ways. There could be some important overlap, but I’ll have to look deeper and find out.

Learn Form Normal People

I spoke in-person with a University Professor and a Television Producer regarding their own busyness.

I also posed questions in various Facebook Groups, Relevant.community, the UX Mastery forums.

The prompt for all the above was usually some version of the following:

My impression is that being disorganized and/or busy stops us from doing things we might prefer to do, or things we might value more.

If you agree, why do you agree? How do you know when you’re busy? Where do you think it comes from? What do you do?

If you don’t agree, what do you think I’m missing?

Learn From Existing Material

I read several articles and 2 scholarly works.

I looked through this amalgam of research related to busyness, contexts for thinking, and managing time in Digital IT: https://ulyngs.github.io/cog-design-space-ict-self-control/an-integrative-dual-systems-approach-to-digital-self-control.html

I also read and continue to read parts of the book Thinking, Fast and Slow and Scale by Geoffrey West.

Thinking, Fast and Slow seemed relevant to build an understanding of the psychological components involved in thinking and responding, and the limits of these components

Scale seemed relevant as it makes references to the “speed of society,” and attempts to link it with mathematical considerations of physical structures.

Immersion

As immersive research, I took up work at a digital marketing and development agency full-time for several years. I acted as our client’s primary point of contact, UX designer, and oversaw resource allocation through design and development on projects averaging about 5-9 months from kick-off until about 3 weeks post-launch.

Analogs

Hooked Canvas

Something that stuck out to me was the association between “busyness” and the hook model in Nir Eyal’s book “Hooked.”

It shouldn’t really have come as a surprise that the hook model would be a part of this, but I overlooked a few things.

Fundamentally, each quadrant of the Hook model canvas correlates to a stage in the loop of habit formation. The extreme claim would be that the object of the canvas is, functionally speaking, the human psyche itself.

For the Business Model Canvas, the object is a business. For the Hook canvas, the object is human behavior.

To this end, I had overlooked that you could actually use the Hook canvas on yourself to break the loops which in some sense, belong to others.

In order to do this, you would need to observe your reaction (action) to specific stimuli (triggers), identify the rewards, and pay attention to how you become more invested in the stock of these rewards.

So, returning to the original question of busyness and narrowing the scope.

The parent problem seems to involve identifying whether a person is actually busy, or if they are feeling busy. Every new moment inherits the challenge of this parent problem, “am I really busy, or do I feel busy?”

I think this is what makes busyness and other psychological states with corresponding actions and rewards, so insidious. The threat can reassert itself at any moment provided the right trigger.

I find that I keep returning to the idea:

The heavy lifting is left to people while they’re likely in a poor psychological position for focus and intentional deliberation.

I think this is the problem that the Hook model presents us with, and one of the symptoms is busyness. For users, these hooks stack on top of each other within the individual’s unconscious.

I think these are important questions:

  1. How do we differentiate between being busy and the perception of being busy?
  2. How can we resolve the problem once we have differentiated?

Proceeding further, the problem space will vary depending on which way it goes.

  1. Should it go the way of “actually busy” then we still have to decide if the task is critical, non-critical.
  2. We also have to determine the nature of the task. Perhaps it involves sensitive data or is really specialized.

Zooming out from these lower-level questions, being open to the influence of others’ “hooks” might mean a lack of guiding purpose.

What Are Some Possible Solutions?

First approach

Provide a simple repeatable process that we can use at regular intervals, and help turn that into a habit.

  1. This process would help us identify whether our feeling of busyness aligns with the material state.
  2. If not, then I would look towards mindfulness routines.
  3. If so, then we might incorporate something like an Eisenhower matrix, or a method to realign ourselves with our goals.

Second approach

Simplify the outsourcing process and expand the range of tasks folks outsource.

Some Of The Challenges

For the first approach

  • Disinterest in explicit self-care. Explicit interest in self-sufficiency.
  • Not knowing what more “relaxed and in control” feels like, and mistaking that for what you already feel.

For the second approach

  • Getting people to offload chores
  • Getting people to trust others
  • Getting people to see and try the app
Categories
guides

How To Set Up & Test Cross Domain Tracking in Google Analytics & Tag Manager

Making Sure Your Properties Are Set Up Correctly

If your business website is set up across multiple domains, you might want each of them to report to a separate Google Analytics property or view. There are however, more than a few good reasons to have each domain report to a single view as well. If you’re not sure, it’s relatively simple to do both.

If you’d like to learn why why you might want all your domains and sub-domains reporting to a single view, you can email me and ask.

For now however, I’m going to show you how I did it.

This will contain all the domains you want to link together. Later, we’ll use this variable to indicate which domains should be linked together.

In this instance, I am using example domains. However, at the end of this guide, I’ll show you how to test this and make sure it was properly implemented.

Step 2: Create a Google “Universal Analytics” Tag & Modify Configuration in Google Tag Manager

Now that we have a variable which auto-magically links your domains together, we’re going to put it to work inside of our pageview tag. Make sure to select the correct UA variable under “Google Analytics Settings.” The view corresponding to the UA code here is the one which all our data will display to.

Fields to Set: allowLinker: true

Selecting “allowLinker: true” enables GTM to include the additional data in the URL which links all the sequential page visits across the site together as a session. If you forget a specific domain in the “autoLink variable” above, this chain will be broken at that domain, and cross domain tracking will not work on those pages.

Fields to Set: cookieName: _rollup

Make sure all pages included in this instance of cross domain tracking share the same cookie name. Here I am using a common term “rollup” to designate that this cookie is going to push data to the cross domain view in Google Analytics. This is an incidental detail, you can name your whatever you’d like.

Tag Configuration: Cross Domain Tracking Section

Finally, you’ll notice that the constant made in the previous step is selected here under “auto link domains.” At first, I write “true” but correct it by selecting the variable name.

At this point, cross domain tracking should be working – but it’s always important to make sure! There are more than 1 way to test this.

Testing: Real Time Reporting Method

You can do it in “real time” by visiting the domains you linked together and viewing the real time reports. If you, a single user, is showing up as 2 or more users (1 user per page), then it is not correctly set up. However, if you have lots of traffic on your site this method will not work. You simply won’t be able to tell if the difference between the numbers is significant or accurate.

Step 3: The UTM Method of Testing The Success of Your Cross Domain Tracking

3.1 Create UTM and Browse All Domains

We know it works when a user’s journey across multiple domains are linked together in a single session. We can track the desired session by creating a UTM and visiting the site, then visiting all the other linked domains as well.

3.2 Create Segment and View Pages

Under site content > all pages: create a segment using traffic source, insert your UTM info, then apply it. The result is a list of all the domains you traveled to in that session, in order from most traveled to least.

Note: Make sure you’re viewing the data in a view that is not filtering your IP in Google Analytics. I actually did this and wasted some time trying to figure out what was wrong.

Categories
guides

How To Set Up & Test Custom Dimensions in Google Analytics & Tag Manager for WordPress

Custom Dimensions are ??!

Custom dimensions allow you to take all kinds of data about your visitors and turn them into dimensions which you can use to segment data in Google Analytics.

You can use these as secondary dimensions in standard reports, or as primary dimensions in custom reports.

Below I’m going to outline how I’ve done it in the past.

Step 1: Create the DataLayer in WordPress (or whatever CMS you’re using)

How you do this will depend on what information you want to access. For instance, accessing a user’s IP address will generally require different steps than accessing member information from your database. For the IP address example, you have to capture and store the IP address in a variable in the dataLayer. However, to access member information from the database you need to use the right commands and functions to surface with your database.

In this specific example, I am accessing member information from the database, however, this particular approach also incorporates a solution for IP addresses. For this WordPress example, I use GTM4WP.

This can be found and installed like most plugins, via the WordPress Plugin Directory directly through your WordPress site. It’s called “DuracellTomi’s Google Tag Manager for WordPress” by Thomas Geiger.

Step 1.1: Turning on Visitor Data in GTM4WP

Enabling visitor data in GTM4WP will take visitor data and store it in the dataLayer.

A little background: Google’s dataLayer is a javascript array, which you can think of as a dictionary in the form of a 2 column spreadsheet. In the right column is the “value,” or the definition of the word and in the left column is the variable “key,” or the word we’re going to define.

In the video, I show how you enable visitor information. It is located under the basic data tab in GTM4WP, which you locate at settings > Google Tag Manager. In this particular example, I am going to observe user types which GTM4WP happens to call user names. You’ll see that I have already selected all these.

Step 1.2: Find The Names That WP4GTM Uses for dataLayer Variables That You Need

If you go to the GTM4WP website you’ll find a section dedicated to explicating the dataLayer variable names of the various dimensions it allows you to access. If you navigate to the section titled “Data about the logged in user on the site,” you’ll see things like visitorId and visitorLoginState.

We’ll use these in the next step.

Step 2: Create your Google Analytics (GA) Custom Dimension

The data is going to stream over from the user behavior on your website, through Google Tag Manager, and into Google Analytics. In the video above I create the custom dimension for the data stream to belong to. Custom dimensions are located under custom definitions in Google Analytics.

2.1 Locating Custom Dimensions under Custom Definitions in Google Analytics

  1. Click Admin, located on the bottom left of most screens at time of writing
  2. Locate the Property Column, towards the right
  3. Locate Custom Definitions towards the bottom of this column
  4. Click Custom Dimensions

2.2 Custom Dimension Names, Scope, & Index

Name

In this example, I make 2 custom dimensions in GA. These names must be exactly the same as the variable names in the dataLayer created by GTM4WP.

In this case, I am making one with the variable name visitorId and another for variable visitorUsername. visitorUsername is a new addition to the plugin and not actually present in the documentation I shared above. However, it functions as expected.

Scope

The scope could belong to user, but what if users upgrade to a new membership type? In this case, I want to scope my dimension at the session level.

Index

Take note of the index number for the custom dimension! After you create it, it will be in the third column of your new custom dimension’s row.

Step 3: Create the User Defined Variable in Google Tag Manager (GMT)

Remember, the data is going from my website to GTM, then to GA.

  1. We’ve set up the dataLayer in WordPress and identified the name of the variable we want to use.
  2. We’ve created a custom dimension in GA with the same variable name.
  3. So now we move upstream to GTM and create the dataLayer variable there.

In the video, I create a dataLayer variable in GTM with the variable name visitorUsername, which is simply a bucket for several user types. Keep in mind now, since we are working in multiple platforms, variable names will have their specific names within the platforms. In the example above, I name this dataLayer variable “GA – DL – visitorUsername,” which we will use in the very next step.

Step 4: Create the Custom Tag in Google Tag Manager (GTM)

Now that we have the variable defined in all the platforms that will be using the data, we have to create a tag for the variable to belong to, and also use the tag to tell GTM how it’s going to use the variable by adding some custom dimension variable details.

4.1 Creating An Event Tag

The tag is an event tag, for which we name the event category, action, and label. As with most things in GTM and GA, you want to make sure you have and respect a naming convention. I go into more depth on event naming conventions elsewhere, which I will link to in the near future.

The event “Label” here will be the GTM name of the dataLayer variable we made in the last step, in this case, “GA – DL – visitorUsername”

4.2 Adding Custom Dimension Variable Details

In the video above, I created the event tag, filled in the 3 event names, then saved and published the work, but I forgot to do something very important. Luckily, I caught this mistake by performing Step 5 below.

I forgot to use the tag to tell the second half of the story. The tag is currently listening for an event named gtm.load, but then what? I made no mention of the custom dimensions it needs to capture for GA.

So here I modify the tag I just made and insert the custom dimension data. You’ll see that I add the index from step 2.3 and the corresponding variable name.

Step 5: Create the Custom Trigger in Google Tag Manager (GTM)

Now that we have all the platforms using the same variable names, and GTM knows how it’s going to use the variable, we have to tell it when to use the variable. GTM4WP automatically attaches an event name to the dataLayer, it’s called “gtm.load”. In the I use GTM preview mode to show how you can identify the name of a dataLayer if you didn’t create it yourself.

By creating an event trigger in GTM with the name of the event from the dataLayer, we are telling GTM to watch out for an event with a specific name, in this case “gtm.load”

Step 6: Test Logging To Ensure Proper Functionality

You probably noticed that in each video, I have GTM preview mode activated (the toolbar along the bottom of the screen), but I am also using the GA Debug chrome extension which is presented within the console area of Chrome on the right side of the window.

Here I show how I test my setup to make sure the information is being passed from my website into GA. You know it’s working because on the right-hand side, I can spot the new dimension being sent to Google Analytics.