Google Tag Manager Useful Tips: Pause & Copy Tags

Google Tag Manager is a tag management system that allows users to publish and manage a variety of website tags from one platform.

Tags, Triggers and Variables make up the main features of GTM.

Tags for websites include code snippets, typically javascript, that is used to track and better understand website interactions with users.

Examples include:

User analysis tools (i.e. CrazyEgg, HotJar, Google Optimize)
Web analytics tools (i.e. Google Analytics, ComScore Digital Unified Measurement)
Ad tracking (LinkedIn Insights, Facebook Pixel, etc.)

Triggers and Variables are used to apply controls and conditions to the tags; such as when to fire or capture on-site user activities.

Tags can be paused and/or copied.
Useful for testing and quick reproduction

This can be helpful as you may experience a time when you don’t want to completely get rid of a tag you’ve created, but you do want to pause it.

Similarly, you may want to copy a tag, for instance to repeat 80% of the tag, but perhaps adjust the tigger condition or the variable on the tag.

How To Pause or Copy Tags

The features to pause or copy tags in GTM are built in.

They’re easy to use and intuitive, but if you haven’t clicked around you might not know where they are located.

You can find the options to pause or copy tags in the 3 circle icon in the tags page section.

google tag manager tag copy and pause options menu

To get there you can…

First navigate from the main workspace area into the tags area by clicking tags on the main menu.
Once there, click or tap on an existing tag.
A site section will slide open and in the top right-hand corner you should see a vertical row of dots.
Choose copy or pause based on your interests and needs.

When you pause a tag the interface will provide you with a visual cue that the tag is paused. You should see a yellow pause button icon in the trigger that fires the tag.

There doesn’t appear to be any limit to how long a tag can be paused; presumably they can be paused indefinitely.

When you copy tags be sure to review the triggers and variables associated with the original version. If you want to change the trigger or a condition within a trigger you will not want to forget to make those changes. With the quickness and ease of copying a tag it is not uncommon to forget to take that step.

Creating a Child Theme: WordPress Site Templating Fundamentals

Developing a child theme is a WordPress fundamental worth grasping. If you ever plan to build sites using the CMS, which is a template-driven content management system, knowing how to setup a child theme is useful if not essential.

So, what is a child theme?

The child theme is basically an extension of the parent theme. The parent theme is a set of files that dictates the websites style along with other aspects (site menu, page layouts, widgets, and site functions). Any WordPress theme can become a parent theme, you’ll just need to generate a child theme to move it to that category.

One reason that you would want to have a child theme is that WordPress themes are updated from time to time. If you built custom pages and site sections into the original (or parent theme) and then that theme was updated the update would erase all of your customizations.

When we use a child theme we allow ourselves space to create customization that won’t be erased.

So, let’s setup a child theme, eh?

Each WordPress website has a theme. Even if the theme is a starter theme like BlankSlate, each site has a theme. The theme’s primary job is to dictate the design of a website.

Once we have a theme that we wish to extend upon we can being the process of setting up a child theme. So, for illustrative purposes, we might use the WordPress 2020 theme as our to-be parent theme.

This is the theme we will extend upon.

Each year WordPress produces a new ‘core’ theme, but there are 10s of thousands of themes – many free, some require purchase.

We need to have cPanel or FTP access to the host environment in order to setup our child theme.
This is an important point to consider if you want to use the advise herein.

STEP 1: Login to Host

We will need to login to the host environment. Then, we will navigate to the site files > the wp-content files > the theme files.

STEP 2: Create Child Theme Directory

We then need to create a directory (or a folder) with the name of our child theme. A best practice is to use -child to denote the child theme of a parent. For instance, if our parent theme was TwentyTwenty then our child theme folder will be TwentyTwenty-Child.

STEP 3: Create Style File

Next, within the directory, we need to create a style sheet using style.css.

Once we have that completed we need to do something quite technical. However, with the guidance of the developer handbook you can likely get it accomplished with just a couple of copy paste actions. Let’s give it a go.

STEP 4: Enqueue Scripts & Styles

This final step is to do something called enqueuing the styles and scripts. That is to say, we’ll tell WordPress to load the pathways to files that hold the css and javascript for the website.

This is done through a function. We can find details about the parent theme’s treatment and use that to help determine what to do within the child theme to finish things up.

Read the handbook. If your situations allows for it, copy the code snippet below and simply paste in your own functions.php file. Again, this will go inside a functions file you create in the child theme. The handbook covers it all.

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
    );
}

Is the US Inching Toward GDPR-Type Consumer Privacy Laws? California Is.

California’s Governor, Gavin Newsom, is expected to sign into law a set of new amendments that seek to empower consumers with greater say in how their personal information is handled and it may take effect January 1, 2020.

The California Consumer Privacy Act (CCPA) recent amendments give internet users the ability to see what information is being collected about them and give them the ability to decide whether their information can be sold.

The CCPA does not allow for consumer litigation against companies, however it does put a new onus upon companies which may result in increased fines for any companies that do not comply.

Intents of the CCPA include providing consumers with the right to…

Know what personal data is being collected about them
Know whether their personal data is sold or disclosed and to whom
Say no to the sale of personal data
Access their personal data
Request a business to delete any personal information about a consumer
Not be discriminated against for exercising their privacy rights

Additionally, the CCPA asserts that…

Organizations are required to “implement and maintain reasonable security procedures and practices” in protecting consumer data. – Wikipedia

There are exemptions, whereas the CCPA would (in its current form) only apply to businesses that (1) do business with California residents and any one of the following items: (1a) has annual gross revenue exceeding $25 million, (1b) possesses personal information on more than 50,000 consumers, or (1c) earns more than half of its annual revenue from selling consumers’ information.

This would be a landmark case and a likely precursor to other US states taking similar action. As MarketWatch points out, the “CCPA mirrors the European Union’s General Data Protection Regulation (GDPR) with one key difference: It defines “personal information” more expansively…”.

Additionally, Analysts that spoke with MarketWatch on the matter suggest that though this may be a bellwether point in the impending regulation (as well as the adoption of similar laws in states across the country) of the internet via US law, it is not likely to upend many internet businesses.

While the potential for fines of larger businesses will exist through the acceptance of this set of laws, early forecasting suggests we’ll only see minor to modest changes to the business as usual of online commerce.

The Re-Read List; Articles to Revisit and Review

Here are a few articles I’ve come across recently that I felt offered value enough for reiteration and review.

Workplace Communication

Good communication and positive conflict resolution are what Harvard Business Review essay, How to Collaborate with People You Don’t Like aim to inspire.

In it, the author shares a story of colleagues that have different styles. Further explaining how this had caused one of the co-workers to avoid the other, though the avoid-er knew they needed the collaboration.

What resulted, in essence, is the set of recommendations listed below. Each point is elaborated on in the article. Each offers insight and encouragement in how to work with those who may rub you the wrong way.

Reflect on the cause of tension and how you are responding to it.
- Take an honest look at what is causing the tension and what role you play in creating it.
Work harder to understand the other person’s perspective.
- Make time to think deliberately about the other person’s point of view.
Become a problem solver rather than a critic or competitor.
- To work better together, it’s important to shift from a competitive stance to a collaborative one.
Ask more questions.
- Put aside your own agenda, ask good questions, and have the patience to truly listen to the other person’s answers.
Enhance your awareness of your interpersonal style.
- It’s easy to chalk up conflicts to poor “chemistry” with another person but everyone has different styles and often being aware of those differences can help.
Ask for help.
- Asking for help can reboot a difficult relationship because it shows that you value the other person’s intelligence and experience.

Pew Research, Gen-Z & Life’s Meaningfulness

A recent addition of David Brooks’ opinion column in the New York Times provides a few notes on how many Americans currently define and find meaning in life.

Owing a considerable amount to ‘family’, respondents to the survey questions leave Brooks to question the defining aspects of a ‘meaningful existence’ among differing generations.

Will Gen-Z Save the World? A revolt against boomer morality. — New York Times

Pew Research forum: What Keeps Us Going — Pew Reseach

Where Americans Find Meaning In Life — Pew Research

Super Borders Tutorial on Angular and Non-Standard Borders — Part 2

Web design trends of recent continue to push the boundaries on the status quo of rectangular layouts.

One way this manifests is in the border between two sections of a webpage. Often the borders are angled, sometimes curved, but visually interesting for sure.

In this post we’ll look at one way to approach the section border.

Create a swooshing section border with background image property.

https://pingendo.com/ provides insight and inspiration.

How to do it:

 {   
background-image: url(site-assets/cover_silver_flip_dark.jpg);
background-size: cover;
background-position: right top;
}

use an image like the one they’ve used

Super Borders Tutorial on Angular and Non-Standard Borders — Part 1

Web design trends of recent continue to push the boundaries on the status quo of rectangular layouts.

One way this manifests is in the border between two sections of a webpage. Often the borders are angled, sometimes curved, but visually interesting for sure.

In this post we’ll look at one way to approach the section border.

Create an angled section border using clip-path

https://bootstrapstudio.io/ provides insight and inspiration.

How to do it

clip-path: polygon(0 25px,100% 0,100% calc(100% - 25px),0 100%);

Other resources on clip-path include:

Make your own unique shapes with this helpful tool https://bennettfeely.com/clippy/

Learn more about using clip-path from this article https://alligator.io/css/clipping-with-clip-path/

See which browsers support and when adoption of clip-path makes it mainstream https://caniuse.com/#feat=css-clip-path

Be Proactive: Habit 1 for Highly Effective People

I’m a huge fan of Stephen Covey’s seven habits of highly effective people. The book is full of smart ideas and principles for conduct and can help anyone in business and in life.

Throughout the book, but certainly in chapter 1 Covey’s advice works.

In chapter 1 after highlighting the idea of our own individual paradigms, he instructs us to consider and to review our own language.

Over a day or a weeks’ time do you hear yourself or others using reactive or proactive language?

It’s a good challenge and bit of advice.

Reactive		Proactive
There’s nothing I can do		Let’s look at our alternatives
They won’t allow …		I can …
If only.		I will.

In my 20s I came to a similar realization about life and would often say, “The only thing we must do in life is to feel the repercussions of our actions. All other things are an “in order to” option.

For instance, we don’t have to breathe. If we don’t we’ll eventually die, but we don’t have to. We only have to in order to remain alive. Which, obviously is pretty important. The point though remains, you don’t have to do anything except endure the repercussion of your actions/ decisions.

Somewhere in the mist of all this he also highlights the well-known story of a name of Viktor Frankl. Perhaps you’ve heard the story?

Essentially, Frankl realized that though he had been he still had the choice of how he would respond. They didn’t own that part of him.

“Everything can be taken from a man but one thing: the last of the human freedoms – to choose one’s attitude in any given set of circumstances, to choose one’s own way.”

It’s in this vein that we then began to review the concepts of the circle of concern and the circle of influence.

The idea is that proactive people (us when we’re being such) tend to focus on things they can directly impact or control.

Proactive focus on things they can do something about. The nature of their energy is positive, enlarging and magnifying, causing their Circle of Influence to increase.
Reactive focus on the weakness of other people, the problems in the environment, and circumstances over which they have no control.

As Covey explains

The problems we face fall in one of three areas: direct control (problems involving our own behavior); indirect control (problems involving other peoples’ behavior); or no control (problems we can do nothing about, such as our past or situational realities). The proactive approach puts the first step in the solution of all three kinds of problems within our present Circle of Influence.

Direct control problems are solved by working on our habits.
Indirect control problems are solved by changing our methods of influence.
No control problems involve taking the responsibility to … accept the things which cannot be changed.

…

There are things that will befall each of us in life. Sometimes all we have to offer is our response to an unplanned situation. However, often times we have the ability of not the imperative to try to look out forward, to try to anticipate and make the first move.

For those things that we do have control over – are we diligent and cultivating them?

We want to be proactive people, and to maintain a view that reminds us that we have the ability to act. We have the ability to choose and to be proactive.

Here are a few additional points of admonishment Covey offers us as we travel down and review this road.

💡 For a full day, listen to your language and to the language of the people around you. How often do you use and hear reactive phrases such as “If only,” “I can’t,” or “I have to”?

💡 Identify an experience you might encounter in the near future where, based on past experience, you would probably behave reactively. Review the situation in the context of your Circle of Influence. How could you respond proactively?

💡 Select a problem from your work or personal life that is frustrating to you. Determine whether it is a direct, indirect or no control problem. Identify the first step you can take in your Circle of (control/)Influence to solve it and then take that step.

Google Marketing Resources – A brief set of digital marketing and advertising options

Here are a few links that I find are often somewhat elusive, though I know they are free and open to the general surfing public.

In no particular order:

Animate Site Sections on Scroll Behavior

Want some motion in your ocean? In a sea of content, simple animations can make for a pleasant break from the humdrum. Use this setup to create sections of a webpage that will slide up and fade into view. Let’s get started.

See a demo of what we’ll create.

We’ll need to setup some CSS, add an associated selector to our page element. We’ll use jQuery and a custom snippet of javascript that allows for the animation to happen when the user scrolls to that area of the webpage.

First, the CSS…

/*animation element*/
.animation-element {
  opacity: 0;
}

.animation-element.slide-up {
  opacity: 0;
  transition: all 500ms linear;
  transform: translate3d(0, 100px, 0);
}

.animation-element.slide-up.in-view {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}

Then comes the javascript, be sure to add this after you’ve included jQuery. Copying and pasting the below will do it.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>

<script>
var $animation_elements = $('.animation-element');
var $window = $(window);

function check_if_in_view() {
  var window_height = $window.height();
  var window_top_position = $window.scrollTop();
  var window_bottom_position = (window_top_position + window_height);
 
  $.each($animation_elements, function() {
    var $element = $(this);
    var element_height = $element.outerHeight();
    var element_top_position = $element.offset().top;
    var element_bottom_position = (element_top_position + element_height);
 
    //check to see if this current container is within viewport
    if ((element_bottom_position >= window_top_position) &&
        (element_top_position <= window_bottom_position)) {
      $element.addClass('in-view');
    } else {
      $element.removeClass('in-view');
    }
  });
}

$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
</script>

Ok, now ensure your css classes are added to the desired elements. You should be good to go! Animate.

/* things we want to animate - can be added to more than one items */ 

<section class="animation-element slide-up">
/* things go here */
</section>

<aside class="animation-element slide-up">
/* also slides into view */ 
</aside>

Following the above, your items should now animate – sliding up and from transparent into full opacity. Should you want to slide items from the left or right, this pen on animations should compliment all of what you’ve already found here. Happy animating!

Let’s Do: CSS Gradients! FTW

Occasionally, you just need to g r a d i a t e (let’s consider that a word). For me, now is one of those times. Perhaps you too could stand to as well. Let’s.

Most often we’ll likely want to add a gradient to a container (div, section, button). For that, we can use something as simple as the below to initiate things.

General Setup

div {  
  background-image: linear-gradient(color1, color2);
}

top to bottom, directionally, by default

div {  
  background-image: linear-gradient(color1 80%, color2);
}

set the stop point

We can do a similar thing with a bit of additional instruction if we want to go left to right.

div {
  background-image: linear-gradient(to right, skyblue, navajowhite);
}

east to west

Angles & Multiple Hues

But, maybe we need something a little more unique. Well, we can do that too. Here’s a trio of colors with a bit of instruction.

div {
  background: linear-gradient(0.95turn, #3f87a6, #ebf8e1, #f69d3c);
}

angle bangle

div {
  background: linear-gradient(-17deg, #3f87a6, #ebf8e1, #f69d3c);
}

angle bangle

But, maybe we still want something to wow ’em… there is this number here.

div {
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

triple set

Text Gradients

Why should box-level elements be the only ones to have fun? Text – with some trickery – can too.

h1 {
  background: -webkit-linear-gradient(45deg, #09009f, #00ff95 80%);    
 -webkit-background-clip: text;     
-webkit-text-fill-color: transparent;
}

Google Tag Manager Useful Tips: Pause & Copy Tags

How To Pause or Copy Tags

Creating a Child Theme: WordPress Site Templating Fundamentals

STEP 1: Login to Host

STEP 2: Create Child Theme Directory

STEP 3: Create Style File

STEP 4: Enqueue Scripts & Styles

The Re-Read List; Articles to Revisit and Review

Workplace Communication

Pew Research, Gen-Z & Life’s Meaningfulness

Super Borders Tutorial on Angular and Non-Standard Borders — Part 2

Create a swooshing section border with background image property.

How to do it:

Super Borders Tutorial on Angular and Non-Standard Borders — Part 1

Create an angled section border using clip-path

How to do it

Be Proactive: Habit 1 for Highly Effective People

Google Marketing Resources – A brief set of digital marketing and advertising options

Animate Site Sections on Scroll Behavior

Let’s Do: CSS Gradients! FTW

General Setup

top to bottom, directionally, by default

set the stop point

east to west

Angles & Multiple Hues

angle bangle

angle bangle

triple set

Text Gradients

Why Hello Goregeous

Fancy Meeting You Here

Additional Resources for Learning