Google Tag Manager and how to use it. The basics.

Standard

Have you ever wondered what Google Tag Manager (GTM) is? Does it seem complex to you? Did you notice that the new Google Analytics script references tag manager?

There are 2 main components we are going to talk about. The first is tags and the second is triggers. In the image below, we are looking at the tags section of one of my website GTM accounts. You will notice in the third column, is the ‘Firing Triggers’ column. In order for a tag to be used, it has to be triggered by some sort of event.

Google Tag Manager tags
Tags page of our GTM account.

What is a tag?

A tag is basically HTML or javascript you execute when the trigger happens. If you have ever had to add tracking code, or some sort of code to the footer of every page, once you have Google Tag Manager installed you can add it from there. The upside of using GTM is you can see what tags get fired when instead of having it hidden throughout your code.

If you have ever ran ads either on Google Adwords or Facebook, you know you need to add pixels and conversion tracking to help track how well your ads perform. Depending on the complexity of your setup, this could be achieved with no coding on your end.

What is a trigger?

A trigger is an ‘event’ that happens, and when it happens it will load a tag. Google Tag Manager comes with a ‘All Pages – Page View’ trigger out of the box. This trigger is used whenever you need some tag to fire on every single page.

You can have all sorts of triggers, such as form submissions, clicks to certain elements or links, custom events you send yourself, even timers that fire every so often.

In the image below, we have defined 2 triggers. The first trigger happens when our form with and id of “registerform” is submitted. The second trigger is a page view but when the URL is specifically our registration page. When each of these triggers are true, they each fire a tag.

Google Analytics Triggers
Google Analytics Triggers Page

Below we can see what tags the triggers fire. The ‘Facebook Pixel ViewContent’ tag is fired for the ‘Registration Page View’ trigger. As mentioned above, this trigger happens when you land on the page with ‘/register’ in the URL. Next we see the ‘GA – Register Form’ tag is fired when the ‘Register Form Submission’ trigger is used.

GTM Tag Example
Example Tags

Why use Google Tag Manager

If you are uncomfortable with editing your website, Google Tag Manager gives you an easy way to add some integrations. If you pay a company to manage your website for you, this allows you to add those integrations without having to pay a fee for a simple “add this script here” request. You can do it yourself, or have a whiz staff member do it.

Once you understand the concepts between tags, triggers, data layers and what not, you can unlock a lot of tools and not have to worry about code or updating your website.

What I use Google Tag Manager for

I use Google Tag Manager for some basic things. On TodoSage.com for example, here is what I use:

  1. Google Analytics
  2. Sending events to Google Analytics I want to track (see the register form submission trigger above)
  3. Facebook Pixel and ad tracking
  4. Hot Jar heatmap tracking

Most of these are simple embed scripts on every page and they ‘just work’. When you are just starting out, you don’t have to go crazy with your implementation. Start small and add more over time if you need to.

It’s best to only add things you need and are going to use. If you have noticed all those “we use cookie” banners, those happened because of websites doing all sorts of tracking of you that you don’t know about. It resulted in countries finally taking issue with it and demanding more transparency.

Gutenberg blocks disabled, thoughts after I fixed it

Standard

When I first experienced Gutenberg when upgrading to WordPress 5 it was a terrible experience. The ‘+’ new block icon didn’t work, and I couldn’t figure out how to add any blocks. It gave me one to jam everything in.

It turns out I had the visual editor disabled in my user profile. I imagine I did that at some point in the past so I didn’t have to fight with TinyMCE but totally forgot about it.

Disable visual editor was disabling Gutenberg

After I enabled it, the blocks started working. Now, let me tell you what, Gutenberg is pretty awesome. I did my first post with multiple blocks and it made life so much easier.

I imagine it will greatly mess with the other page builders that go over the top, but Gutenberg definitely makes it feel more natural when adding long form content.

Advice for WordPress/Automatic/Gutenberg Team

Please, please, please, for the first time a user loads the editor page and has the visual editor disabled, show some sort of warning and just don’t show the ‘+’ new block button. It was extremely confusing and frustrating.

Gutenberg image block

Tailwind CSS, I try it out on the TodoSage website

Standard

When building websites it’s so easy to just grab Bootstrap or Foundation and take off running. Better yet, grab a theme off of one of the many theme sites who integrate bootstrap for you and go. Tailwind CSS has always been in the back of my mind as I have a few courses from the author and the people I follow on twitter are friends with them.

While I wasn’t happy with the TodoSage.com site, I decided to give Tailwind CSS a try. I have looked at it a few times but only had big projects that I could use it on. Basically it was just too big of a leap for me to take at the moment.

One of my goals before the new year was to replace the Todo Sage site with a new one that included screenshots. In doing so, I decided to give Tailwind a try as it’s just a few pages.

Tailwind CSS Homepage
Tailwind CSS Homepage

I have done ‘utility’ style classes in many projects. .pl-15 (padding left 15), mb-10 (margin bottom 10) and much more. Tailwind as built as a utility framework and comes with a lot of classes. To make things easier, they have a config file where you can define colors, margins, and all sorts of things it uses to generate classes. This actually made it really easy to keep ‘on brand’ in the HTML. Here is a purple button, and on hover it should be ‘purple-darker’.

By removing the theme I used in the past, this will make it easier to iterate and try things out.

Things I like about Tailwind

There are a bunch of things I like about Tailwind.

  1. The configuration file is well documented with comments inside it. This makes it much easier to understand and doesn’t come across as overwhelming.
  2. It just looks good. If you look at the examples and work towards mimicking it at first, it comes out looking pretty decent.
  3. Once you understand the ‘formatting’ or ‘syntax’ of the classnames, it’s super easy to use and guess. If you have used ‘font-light’ it’s easy to guess ‘font-bold’.

Things I don’t like while using Tailwind

  1. The setup is a bit confusing. You can of course load their CDN version that gets their defaults. But to match what you need, you of course need a local install of it. They provide multiple scenarios, but the install page makes it look scary. I am never confident I have it working until I see that it is.
  2. This isn’t on Tailwind, as they provide reasonable defaults, but it’s easy to not remove the stuff you don’t need. The default config comes with black, grey, white, red, orange, yellow, green, teal, blue, indigo and purple. Most of those have darkest, darker, dark, (base), light, lighter, and lightest. If you don’t remove the colors you don’t use, you end up with a lot more classes than you need. This is more of a newbie mistake.
  3. The examples are beautiful and a great way to get started, but make sure to remove all the classes you don’t need on the elements. A section that just has text centered probably doesn’t need flex classes. Again, as a newbie mistake, it’s too darn easy to just grab and go.

Bottom line, I like Tailwind and the more I use it, the more I like it. All 3 things I don’t like about it will disappear as I become more familiar with it. It certainly made spinning up a restyle of TodoSage easier and not a 6 month process.

Not sold yet? Follow them on twitter.

WordPress Gutenberg

Aside

WordPress 5 + Gutenberg…. What happened?????

How do I add more blocks? How do I add links? How do I do anything with this? This is a disaster.

Update: Turns out “Disable the visual editor when writing”  in my user profile was checked and that kills all blocks.

Ting, why we switched and you should too

Standard

Over the years we have jumped cell phone carriers mostly switching between Sprint and it’s MVNOs. For the past few years we have been on Ting and so far it’s a win for us.

Ting allows you to pick between CDMA and GSM. With CDMA you are on Sprint’s network while GSM you are on T-Mobile’s network. This time around we went with T-Mobile and GSM phones. The main reason we switched though is to lower our monthly bill. Starting on Sprint we were paying about $128 per month for 2 lines, then when to Boost Mobile which dropped it down to $80 then Virgin Mobile to get it down to $64 and as of late Ting, averaging around $45.

Ting has no plans. You pay for what you use. We still have a home phone (Ooma, check them out too), and are constantly on Wifi either at home, work, the store or wherever. By using the home phone when we are going to do lengthy calls, and being on Wifi we tend to stay in their small and medium tiers.

Subdomain testing in Laravel

Standard

Learning about automated testing and implementing is great. Unfortunately some projects I work on are multi tenant, and each client has it’s own subdomain. I then have an “app” subdomain with separate routes on it for things like API, or switching tenants if you belong to multiple of them. You may find a few articles that say to just use $this->call() instead of $this->get() or $this->post(). It really is that simple.

I use a domain like lvh.me which points to 127.0.0.1 along with it’s subdomains.

Here is my setup:

App: app.lvh.me
Tenant App Example 1: test1.lvh.me
Tenant App Example 2: my-company.lvh.me

Example routes.php file

//app domain routes
$router->group(['domain' => 'app.lvh.me'], function($router) {
    $router->post('register', 'App\RegisterController@store');
});
 
//tenant routes
$router->group(['domain' => '{account}.lvh.me'], function($router) {
    $router->post('login', 'Tenant\LoginController@store');
});

To test the login route for the Tenant App Example 1 we do:

$this->call('POST', 'http://test1.lvh.me', ['email' => 'test@example.com', 'password' => 'mysecretpassword']);

To login to Tenant App Example 2, we would do:

$this->call('POST', 'http://my-company.lvh.me', ['email' => 'test@mycompany.com', 'password' => 'mycompanypassword']);

For routes on our App domain we do:

$this->call('GET', 'http://app.lvh.me/register');

New struggles moving around

Standard

If you have ever moved a far distance there are ‘odd’ things that popup you did not expect. When we moved to Colorado the bugs were a lot less than in Michigan. Now that we are in Florida, the bugs have come back with a vengeance.

The other day as I was leaving the development a Florida softshell turtle was trying to cross the road. I tried to assist but it was having nothing to do with me. After I got back in my car, it turned around and started going back the way it came.

A few hours later and a neighbor is telling me they got a 6 foot alligator out of the pond. Then they went for a bigger, estimated 12 foot alligator but unfortunately left before they got it.

Florida… it’s a weird place. Working at COLaunch in Titusville, I see dolphins, or manatees almost daily from my desk.

Darn Nest had my wires reversed

Aside

I was installing a Nest in the new house and the thing was only blowing out hot air even while on cool. I ended up calling an HVAC company and they came out and switched 2 wires. For some reason Nest has them switched on their wire guide or my A/C is odd.