🢂Google Tag Manager Data Layer ‑ Plugin

Co robi ta wtyczka

Wtyczka "Google Tag Manager Data Layer" pozwala na zaawansowaną integrację z Google Tag Managerem poprzez pobieranie i wysyłanie różnorodnych danych z WordPressa. Umożliwia to dokładniejsze śledzenie i analizę danych użytkowników oraz zawartości strony, co jest przydatne w zaawansowanych konfiguracjach analitycznych i marketingowych.

Opis funkcjonalności:

1. Dodanie Ustawień w Panelu Administracyjnym:
   • Wtyczka dodaje stronę ustawień w panelu administracyjnym WordPressa, gdzie można skonfigurować różne opcje wtyczki.
   • Użytkownik może wprowadzić identyfikator Google Tag Managera (GTM ID).
   • Użytkownik może wybrać, jakie dane mają być wysyłane do Google Tag Managera.
   • Użytkownik może wybrać miejsce umieszczenia kodu GTM (w nagłówku lub stopce strony).
2. Rejestracja Ustawień:
   • Wtyczka rejestruje ustawienia takie jak GTM ID, punkty danych do wysłania i miejsce umieszczenia kodu.
3. Generowanie i Umieszczanie Kodu GTM:
   • Na podstawie ustawień użytkownika, wtyczka generuje kod Google Tag Managera i umieszcza go w wybranym miejscu (nagłówek lub stopka strony).
4. Załączenie Biblioteki UAParser.js:
   • Wtyczka ładuje bibliotekę UAParser.js, która jest używana do pobierania danych o przeglądarce, systemie operacyjnym i urządzeniu użytkownika.
5. Ustawienie Pliku Cookie Typu Odwiedzającego:
   • Wtyczka ustawia plik cookie gtm_visitor_type w celu rozróżnienia nowych i powracających użytkowników.
6. Pobieranie i Wysyłanie Danych do GTM:
   • Wtyczka pobiera różne dane z WordPressa i umieszcza je w warstwie danych Google Tag Managera (dataLayer).
   • Dane obejmują: tytuł strony/postu, datę publikacji, kategorie, tagi, autora, ID postu/strony, typ postu, format postu, liczbę postów, niestandardowe terminy, status zalogowania, rolę zalogowanego użytkownika, ID użytkownika, email użytkownika (oraz jego skrót SHA256), datę utworzenia użytkownika, dane wyszukiwania na stronie, nazwę i ID witryny, adres IP (jeśli uzyskano zgodę użytkownika), dane przeglądarki, systemu operacyjnego, urządzenia, typ odwiedzającego (nowy/powracający), liczbę komentarzy, szablon strony, ID rodzica, tytuł rodzica, elementy menu, wersję WordPressa, aktywne wtyczki i dane motywu.

Jak działa ta wtyczka, krok po kroku

• Strona Ustawień:
  • Dodaje stronę ustawień w menu administracyjnym WordPressa.
  • Użytkownik może skonfigurować GTM ID, wybrać jakie dane mają być wysyłane i wybrać miejsce umieszczenia kodu GTM.
• Pobieranie Danych:
  • Pobiera dane dotyczące użytkownika, postów, stron, kategorii, tagów, przeglądarki, systemu operacyjnego, urządzenia i wiele innych.
  • Dane te są przygotowywane do wysłania do Google Tag Managera.
• Warstwa Danych (dataLayer):
  • Wtyczka dodaje dane do warstwy danych Google Tag Managera, która jest następnie wykorzystywana przez skrypty GTM do analizy i śledzenia.
• Integracja z UAParser.js:
  • Po załadowaniu strony, wtyczka wykorzystuje UAParser.js do pobrania danych o przeglądarce, systemie operacyjnym i urządzeniu użytkownika i dodaje te dane do warstwy danych.

Kod wtyczki

Skopiuj kod i zapisz do pliku o nazwie gtm-wh.php w folderze plugins.

<?php
/**
 * Plugin Name: Google Tag Manager Data Layer
 * Description: Integrates Google Tag Manager and sends various post/page and user data.
 * Version: 1.0
 * Author: WirtualnyHandlowiec.pl
 */

// Add Settings Page
function gtm_add_settings_page()
{
    add_options_page(
        'GTM Data Layer Settings',
        'GTM Data Layer',
        'manage_options',
        'gtm-data-layer-settings',
        'gtm_render_settings_page'
    );
}
add_action('admin_menu', 'gtm_add_settings_page');

// Render Settings Page
function gtm_render_settings_page()
{
?>
    <div class="wrap">
        <h1>Google Tag Manager Data Layer Settings</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('gtm_data_layer_settings_group');
            do_settings_sections('gtm-data-layer-settings');
            submit_button();
            ?>
        </form>
    </div>
<?php
}

// Register Settings
function gtm_register_settings()
{
    register_setting('gtm_data_layer_settings_group', 'gtm_id');
    register_setting('gtm_data_layer_settings_group', 'gtm_data_points', 'gtm_sanitize_data_points');
    register_setting('gtm_data_layer_settings_group', 'gtm_code_placement');

    add_settings_section(
        'gtm_data_layer_main_section',
        'Main Settings',
        null,
        'gtm-data-layer-settings'
    );

    add_settings_field(
        'gtm_id',
        'Google Tag Manager ID',
        'gtm_render_gtm_id_field',
        'gtm-data-layer-settings',
        'gtm_data_layer_main_section'
    );

    add_settings_field(
        'gtm_data_points',
        'Data Points to Send',
        'gtm_render_gtm_data_points_field',
        'gtm-data-layer-settings',
        'gtm_data_layer_main_section'
    );

    add_settings_field(
        'gtm_code_placement',
        'Code Placement',
        'gtm_render_gtm_code_placement_field',
        'gtm-data-layer-settings',
        'gtm_data_layer_main_section'
    );
}
add_action('admin_init', 'gtm_register_settings');

// Render GTM ID Field
function gtm_render_gtm_id_field()
{
    $gtm_id = get_option('gtm_id', '');
    echo '<input type="text" name="gtm_id" value="' . esc_attr($gtm_id) . '" />';
}

// Render Data Points Field
function gtm_render_gtm_data_points_field()
{
    $data_points = get_option('gtm_data_points', []);
    $available_data_points = [
        'postTitle' => 'Post/Page Title',
        'postUrl' => 'Post/Page URL',
        'menuItems' => 'Menu Items',
        'parentID' => 'Parent ID',
        'parentTitle' => 'Parent Title',
        'postDate' => 'Post/Page Date',
        'postCategories' => 'Post/Page Categories',
        'postTags' => 'Post/Page Tags',
        'postAuthor' => 'Post/Page Author',
        'postID' => 'Post/Page ID',
        'postType' => 'Post Type',
        'customTerms' => 'Custom Terms',
        'loggedInStatus' => 'Logged In Status',
        'loggedInUserRole' => 'Logged In User Role',
        'loggedInUserID' => 'Logged In User ID',
        'siteSearchData' => 'Site Search Data',
        'siteDomain' => 'Site Domain',
        'siteDescription' => 'Site Description',
        'siteID' => 'Site ID',
        'siteLanguage' => 'Site Language',
        'ipAddress' => 'IP Address',
        'browserData' => 'Browser Data',
        'osData' => 'OS Data',
        'deviceData' => 'Device Data',
        'visitorType' => 'Visitor Type',
        'commentsCount' => 'Comments Count',
        'pageTemplate' => 'Page Template',

        'wordpressVersion' => 'WordPress Version',
        'themeData' => 'Theme Data'
    ];

    foreach ($available_data_points as $key => $label) {
        $checked = in_array($key, $data_points) ? 'checked' : '';
        echo '<label><input type="checkbox" name="gtm_data_points[]" value="' . esc_attr($key) . '" ' . $checked . ' /> ' . esc_html($label) . '</label><br>';
    }
}

// Render Code Placement Field
function gtm_render_gtm_code_placement_field()
{
    $placement = get_option('gtm_code_placement', 'header');
?>
    <select name="gtm_code_placement">
        <option value="header" <?php selected($placement, 'header'); ?>>Header</option>
        <option value="footer" <?php selected($placement, 'footer'); ?>>Footer</option>
    </select>
<?php
}

// Sanitize Data Points
function gtm_sanitize_data_points($input)
{
    return is_array($input) ? array_map('sanitize_text_field', $input) : [];
}

// Enqueue Google Tag Manager Script
function gtm_enqueue_script()
{
    $gtm_id = get_option('gtm_id', '');
    if (empty($gtm_id)) {
        return;
    }

    $script = "<!-- Google Tag Manager -->
    <script data-pagespeed-no-defer data-no-optimize>
        (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','" . esc_js($gtm_id) . "');
    </script>
    <!-- End Google Tag Manager -->";

    echo $script;
}

// Determine Placement of GTM Script
function gtm_insert_script()
{
    $placement = get_option('gtm_code_placement', 'header');
    if ($placement === 'header') {
        add_action('wp_head', 'gtm_enqueue_script',-9999);
    } else {
        add_action('wp_footer','gtm_enqueue_script', 9999);
    }
}
add_action('init', 'gtm_insert_script');

// Enqueue UAParser.js
function gtm_enqueue_uaparser()
{
    wp_enqueue_script('uaparser', 'https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/0.7.31/ua-parser.min.js', [], null, true);
}
add_action('wp_enqueue_scripts', 'gtm_enqueue_uaparser');

// Set Visitor Type Cookie
function gtm_set_visitor_type_cookie()
{
    if (!isset($_COOKIE['gtm_visitor_type'])) {
        setcookie('gtm_visitor_type', 'new', time() + 31536000, COOKIEPATH, COOKIE_DOMAIN);
    } else {
        setcookie('gtm_visitor_type', 'returning', time() + 31536000, COOKIEPATH, COOKIE_DOMAIN);
    }
}
add_action('init', 'gtm_set_visitor_type_cookie');

// Get Visitor Type
function gtm_get_visitor_type()
{
    return isset($_COOKIE['gtm_visitor_type']) ? sanitize_text_field($_COOKIE['gtm_visitor_type']) : 'new';
}

// Send Data to Google Tag Manager
function gtm_data_layer()
{
    $data_points = get_option('gtm_data_points', []);
    if (empty($data_points)) {
        return;
    }

    $data = [];

    if (in_array('loggedInStatus', $data_points) && is_user_logged_in()) {
        $current_user = wp_get_current_user();
        $data['loggedInStatus'] = 'true';
        if (in_array('loggedInUserID', $data_points)) {
            $data['loggedInUserID'] = $current_user->ID;
        }
        if (in_array('loggedInUserRole', $data_points)) {
            $data['loggedInUserRole'] = implode(', ', $current_user->roles);
        }
    } else {
        $data['loggedInStatus'] = 'false';
    }

    if (is_singular()) {
        global $post;
        if (in_array('postID', $data_points)) {
            $data['postID'] = $post->ID;
        }
        if (in_array('postTitle', $data_points)) {
            $data['postTitle'] = get_the_title($post->ID);
        }
        if (in_array('postUrl', $data_points)) {
            $data['postUrl'] = get_permalink($post->ID);
        }
        if (in_array('postDate', $data_points)) {
            $data['postDate'] = get_the_date('Y-m-d', $post->ID);
        }
        if (in_array('postType', $data_points)) {
            $data['postType'] = get_post_type($post->ID);
        }
        if (in_array('postAuthor', $data_points)) {
            $data['postAuthorID'] = $post->post_author;
            $data['postAuthorName'] = get_the_author_meta('display_name', $post->post_author);
        }
        if (in_array('postCategories', $data_points)) {
            $data['postCategories'] = wp_get_post_categories($post->ID, ['fields' => 'names']);
        }
        if (in_array('postTags', $data_points)) {
            $data['postTags'] = wp_get_post_tags($post->ID, ['fields' => 'names']);
        }
        if (in_array('customTerms', $data_points)) {
            $data['customTerms'] = wp_get_post_terms($post->ID);
        }
        if (in_array('commentsCount', $data_points)) {
            $data['commentsCount'] = get_comments_number($post->ID);
        }
        if (in_array('pageTemplate', $data_points)) {
            $data['pageTemplate'] = get_page_template_slug($post->ID);
        }
        if (in_array('parentID', $data_points)) {
            $data['parentID'] = wp_get_post_parent_id($post->ID);
        }
        if (in_array('parentID', $data_points)) {
            $parent_id = wp_get_post_parent_id($post->ID);
            $data['parentID'] = $parent_id;
            if ($parent_id) {
                $data['parentTitle'] = get_the_title($parent_id);
            }
        }
    }

    if (in_array('siteSearchData', $data_points) && is_search()) {
        $data['siteSearchData'] = get_search_query();
    }

    if (in_array('siteDescription', $data_points)) {
        $data['siteDescription'] = get_bloginfo('description' );
    }
    if (in_array('siteDomain', $data_points)) {
        $data['siteDomain'] = get_bloginfo('wpurl');
    }

    if (in_array('siteID', $data_points)) {
        $data['siteID'] = get_current_blog_id();
    }
    if (in_array('siteLanguage', $data_points) ) {
        $data['siteLanguage'] = get_bloginfo('language');
    }
    if (in_array('ipAddress', $data_points)) {
        $data['ipAddress'] = $_SERVER['REMOTE_ADDR'];
    }

    if (in_array('categoryPostCount', $data_points) && is_category()) {
        $data['categoryPostCount'] = get_queried_object()->count;
    }

    if (in_array('tagPostCount', $data_points) && is_tag()) {
        $data['tagPostCount'] = get_queried_object()->count;
    }

    if (in_array('visitorType', $data_points)) {
        $data['visitorType'] = gtm_get_visitor_type();
    }

    if (in_array('wordpressVersion', $data_points)) {
        $data['wordpressVersion'] = get_bloginfo('version');
    }

    if (in_array('themeData', $data_points)) {
        $theme = wp_get_theme();
        $data['themeName'] = $theme->get('Name');
        $data['themeVersion'] = $theme->get('Version');
    }

?>
    <script data-pagespeed-no-defer data-no-optimize>
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push(<?php echo json_encode($data); ?>);

        document.addEventListener("DOMContentLoaded", function() {
            // UAParser.js to get browser, OS, and device data
            var parser = new UAParser();
            var result = parser.getResult();
            var uaData = {
                'browserName': result.browser.name,
                'browserVersion': result.browser.version,
                'browserEngine': result.engine.name,
                'osName': result.os.name,
                'osVersion': result.os.version,
                'deviceType': result.device.type,
                'deviceManufacturer': result.device.vendor,
                'deviceModel': result.device.model
            };

            window.dataLayer.push(uaData);
        });
    </script>
<?php
}
add_action('wp_footer', 'gtm_data_layer');