GA4 custom dimension duplicated results

Question

I have a wordpress website, and I've added some custom dimension in data layer and Google Tag Manager to track infos like category, author, post date. Basically, it partially works. What I see in GA4 page destination report is that same page shows 2 times with and without custom dimension value.

report

Here is my analytics and tag manager codes with data layer:

    // Data Layer GA4
function analytics_data_layer_GA4() {
    
    ?>
 
<!-- Google Tag Manager Data Layer -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-code"></script>
<script type="text/javascript">
// URL toolbox - to capture URL elements
var _d = document;
var _dl = _d.location;
var _dlp = _dl.pathname;
var _dls = _dl.search;
var _dr = _d.referrer;

// Initialize the data layer and begin pushing Wordpress PHP variables
dataLayer = [];
dataLayer.push({
    // GA ID - insert it if not defined as a macro constant in Google Tag Manager
    'GTM_WP_GA': 'G-code',
    <?php
    if (is_404()) { // 404 page
        ?>
'GTM_WP_404': '<?php print is_404(); ?>',
'GTM_WP_404_URL': '/404' + _dlp + '/'+ _dr,
<?php } ?>
<?php
if (is_front_page()) { // Home page manually tagged, but can also be done directly in Google Tag Manager
    $gtm_tags = 'No tags';
    $gtm_category = 'Category not present'; 
    
    ?>
'GTM_WP_post_type': 'Home',
'GTM_WP_Category': 'Category not present',
'GTM_WP_Tags': 'No tags',
'GTM_WP_Published_Date': 'Date not present',
<?php } ?>

<?php
if (!is_front_page() && is_single() || is_page() || is_archive()) {
        /*
         * Content pages: both posts and pages
         * Query WP API to obtain post/page type, author, number of comments, tags, or other custom variables
         */
        $gtm_cat = get_the_category();
        $posttags = get_the_tags();
        $gtm_tags = '';
        if ($gtm_cat) {
            $gtm_category = $gtm_cat[0]->cat_name;
        } else {
            // Check if the post type is 'portfolio' or 'product' and try to get the category
            if (is_singular('portfolio')) {
                $custom_categories = get_the_terms(get_the_ID(), 'portfolio_entries');
            } elseif (is_singular('product')) {
                $custom_categories = get_the_terms(get_the_ID(), 'product_entries');
            }
            
            if ($custom_categories && !is_wp_error($custom_categories)) {
                $custom_category_names = array_map(function ($term) {
                    return $term->name;
                }, $custom_categories);
                    $gtm_category = implode(', ', $custom_category_names);
            } else {
                $gtm_category = 'Category not present';
            }
        }
        
        
        if ($posttags) {
            foreach ($posttags as $tag) {
                // Tags passed as a single string separated by commas
                $gtm_tags .= $tag->name . ', ';
            }
        } else {
            $gtm_tags = 'No tags';
        }

        // Post publication date
        $post_published_date = get_the_date('d-m-Y');

        // Now populate the JS data layer with PHP variables
        ?>
'GTM_WP_authorname': '<?php the_author(); ?>',
'GTM_WP_post_type': '<?php print get_post_type(); ?>',
'GTM_WP_Number_Comments': '<?php print get_comments_number(); ?>',
'GTM_WP_Category': '<?php print $gtm_category; ?>',
'GTM_WP_Tags': '<?php print rtrim($gtm_tags,', '); ?>',
'GTM_WP_Published_Date': '<?php print $post_published_date; ?>'
<?php

}
    ?>
});

</script>

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-code');</script>
<!-- End Google Tag Manager -->

<?php 
    
}

add_action('wp_head', 'analytics_data_layer_GA4');


function gtag_body() {
    
    ?>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-code"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<?php 
}
add_action( 'wp_body_open', 'gtag_body' );

And this is my custom variable for tag manager (used in the main pageview configuration tag):

variable

pageview tag

Really don't know what I'm doing wrong. Any hint? Thank you.

Answer 1

Let's organise a little your code: DELETE the following piece of code:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-code"></script>
<script type="text/javascript">

This is not GTM Js related code as you have commented (Google Tag Manager Data Layer). This is a gtag.js. probably you are getting duplication because of this.

The following code must be the first code in your < head > Tag:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-code');</script>
<!-- End Google Tag Manager -->

and this one:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-code"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

should be placed in body tag. Do not do the calculations at the same place where you set datalayers' variables. Instead, define a function for that as below:

<script>
function  Ga4DL(custom_dimension1_value, custom_dimension2_value, custom_dimension3_value, custom_dimension4_value) {
    console.log("Ga4DL started");
    window.dataLayer = window.dataLayer || [];
    window.myEvent = {
        'custom_dimension1': custom_dimension1_value,
        'custom_dimension2': custom_dimension2_value,
        'custom_dimension13': custom_dimension3_value,
        'custom_dimension4': custom_dimension4_value_value,
        'event': 'your_custom-event_name'
    };
    dataLayer.push(myEvent);
}
 </script>

call Ga4DL(custom_dimension1_value, custom_dimension2_value, custom_dimension3_value, custom_dimension4_value) whenever you want to send the event.

This way in Developers Tool, whenever the event is triggered you can see the message: console.log("Ga4DL started");

I cannot track your code, if this code does not help you, then try to simplify your code, and put 2 custom dimensions. Does your Custom Event get duplicated as well?