Categories
guides

Creating a WordPress Child Theme, and Importing CSS, JS, and CDN through Functions.php

Introduction

This is a short reference guide on making child themes and preparing them for development. I will come back to this guide and fill in some additional details.

Create a Location for your Child Theme

Go to the following…

  • Add an Assets Folder
  • Add the theme’s stylesheet
    • file name: style.css

Every wordpress theme need this style.css file, and they need to begin with at least 2 specific comments. These comments are parsed by wordpress and used during installation.

A few other comments are also useful, but not necessary.

to the location:

assets/css
  • … and amy javascript files

I am going to need to use some javascript for this site, so i’ll be adding a file called mkd-index.js to the location:

assets/js

Create & Import Everything in The Fuctions.php File

In the theme root, you should create a file called functions.php. We will add the following code:

<?php 

// CSS
// Include parent and child theme style sheets
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parenthandle = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
        array(),  // if the parent theme code has a dependency, copy it to here
        $theme->parent()->get('Version')
    );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get('Version') // this only works if you have Version in the style header
    );
}

// JavaScript
function collectiveray_load_js_script() {
	if( is_page( 2 ) ) {
	$parenthandle = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
	$theme = wp_get_theme();
	  //wp_enqueue_script('mkd-index', '/assets/js/mkd-index.js', array('jquery'), '', false);
	  //or use the version below if you know exactly where the file is
	  wp_enqueue_script( 'mkd-index.js', get_stylesheet_directory_uri() . '/assets/js/mkd-index.js');
	}
  }
  
  add_action('wp_enqueue_scripts', 'collectiveray_load_js_script'); 

  // CDN 
  wp_register_script( 'GSAP', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js', null, null, true );
  wp_enqueue_script('GSAP');

Breaking Down the Enqueue Code

I want to make sure to keep all my child theme’s modifications actually within my child theme, so our functions.php file should start from the child theme’s root.

If you look at this WordPress example on how to include CSS and JS files (here and here), the code included will default to the parent theme’s root directory. In the second example, it’s a bit confusing because the code is filed under Advanced Topics > Child Themes.

So, we’re going to use a different function to get the path of the child theme’s directory. We’ll be using:

 get_stylesheet_directory_uri()

Categories
guides

Setting up SSH with VS Code for Amazon Lightsail

Installing Remote SSH in VS Code

Install Plugin:
Remote – SSH

It will include a configuration plugin as well. But to login, you’ll need 2 things

  1. username
  2. PEM file

I’ll also show you

  1. where your bitnami app password is located
  2. if you’re using WordPress, where your public files are located

Finding Your Credentials

USER:

Lightsail seems to use Bitnami containers. Make sure you’re using the right username for your container. For a WordPress container, your username is bitnami (at time of writing). The full username for ssh will be this

bitnami

PEM FILE:

Go to the section of the Amazon Lightsail site with access to ssh and instance management. 

Scroll down and find the public key 
Download this
Store it in the same folder with your .ssh config.
On my Mac, that location is 

~/.ssh/tot.pem

on my PC this location is

c:\users\marcin\.ssh

Enter all this into the ssh config file. It should be formatted roughly like this:

Host {an arbitrary label for users to select this host}
HostName {enter your ip address from above}
User {enter your username from above}
Identity File {the path to your PEM file}

Example config file:

Host MyTestSite
HostName 11.234.567.23
User onewithux
Identity File ~/.ssh/tot.pem

PASSWORD:

You shouldn’t need this password but it might be needed elsewhere, beyond he scope of this short guide.

Open the virtual ssh terminal available from your Lightsail instance and type:

cat bitnami_application_password

bitnami_application_password is where the password is stored. This file may change in the future. Copy/paste this password temporarily in case you need it.

Setting Up Config in VS Code

I thought this video was pretty good, and the YouTuber uses a funny intonation. I set the video to play at the 1 minute mark, which is where he shows you how to create the initial config file.

Now, just in case that video gets deleted, I’ll note the steps here.

  1. click on the Remote – SSH in the left toolbar of VS Code
  2. on the “SSH Targets” dropdown menu, click on the “+” icon
  3. enter the following ssh command, without quotes “ssh {username}@{ip address}”, for my example above that would be “ssh bitnami@11.234.567.23”
  4. click on the first location that appears. on my computer that’s that is “users/martin/.ssh/config”
  5. your new Lightsail host will appear below the “SSH Targets” dropdown, click on the new window icon located in the new host file’s selection area
  6. at this point, you may be running into an error pertaining to the PEM file’s permissions.

Updating Your PEM File’s Permissions

Now, this is close to working, but you may have received a permissions error.
You have to change the permissions to either 400 or 600.

Open terminal to the location of the PEM file.
Type in the following

Chmod 400 {your pemfile.pem}

for me that looked like

chmod 400 tot.pem

use 400 if you’ll change the PEM file rarely (more likely)
use 600 if you’ll change it more often

That’s It!

WordPress

I’m using WordPress and need to find the relevant public files to begin making changes. They’re located here

home/bitnami/apps/wordpress

home/bitnami/apps/wordpress/htdocs

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
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.