Manage multiple GTM environments in WordPress

Idea and concept

The idea come from these articles which cover the good way to handle GTM when you are developing a new website (usually in mid/big companies where they are some process in place).

https://samuelschmitt.com/fr/google-tag-manager-environnements/

So let’s say the digital marketing team wants you to implement that in the brand new website of the company and they care about the data they are receiving. Splitting the GTM in environments give you the need to add a different code for each environment created (honestly, it’s just the ID that change). The method I cover is not the best or efficient but just work.

Setup your wordpress

Since WordPress 5.5, you have a really nice function that came:

wp_get_environment_type()

This simple function let you define some code whether you are in local, staging or production environment by defining a constant in your wp-config.php file. this kind of feature already exists in framework like Laravel where you define a .env file. (Actually you could already use dotenv files in WordPress with a composer package).

So now, you add in your local wp-config.php:

define( 'WP_ENVIRONMENT_TYPE', 'local' );

And you define the others environments variables in your staging/UAT/watheverthename wp-config.php files your company use to test the new website. You can either use ‘local’, ‘development’, ‘staging’ or ‘production’ as accepted values (it would be nice to extend if necessary if you have more than four environments).

Once setup, you can make use of the switch operator in your functions.php file to conditionally load the desired code:

function gtm_management(){
    switch ( wp_get_environment_type() ) {
        case 'local':
            add_action( 'wp_head', 'add_gtm_head_local', 10 );
            add_action( 'wp_body_open', 'add_gtm_body_local' );
            break;
        case 'staging':
            add_action( 'wp_head', 'add_gtm_head_staging', 10 );
            add_action( 'wp_body_open', 'add_gtm_body_staging' );
            break;
        case 'production':
            add_action( 'wp_head', 'add_gtm_head_production', 10 );
            add_action( 'wp_body_open', 'add_gtm_body_production' );
            break;
    }
}
add_action( 'wp_enqueue_scripts', 'gtm_management' );

After, I define multiple functions to load the corrects GTM depending of their environment:

function add_gtm_head_local(){ ?>
    <!-- Google Tag Manager -->
    <script>
       // your head snippet corresponding to the env you are targeting
    </script>
    <!-- End Google Tag Manager -->
<?php }

function add_gtm_body_local(){ ?>
    <!-- Google Tag Manager (noscript) -->
    <noscript>
        // the iframe script
    </noscript>
<!-- End Google Tag Manager (noscript) -->
<?php }

And you continue to create others functions this way for the others environments.

Save, refresh and test your function and it should normally work. If you have a different tag environment ID in your different testing domains, it works!

Further notes and ideas

This function is not optimal at all and prone to errors. Principally mistypes or copy/pasting the wrong snippet to the wrong environment. A better and DRY approach would be to have a single GTM snippet (main script and iframe), and dynamically check the IDs with wp_get_environment_type().