Pular para conteúdo

WordPress

Visão Geral

Este guia demonstra como integrar o Complyr em um site WordPress, incluindo instalação via plugin, código customizado, e integração com WooCommerce.

Características

  • ✅ Múltiplos métodos de instalação
  • ✅ Integração com WooCommerce
  • ✅ Suporte a Custom Post Types
  • ✅ Compatibilidade com cache plugins
  • ✅ Identificação automática de usuários logados
  • ✅ Hooks e filtros WordPress
  • ✅ Rastreamento de e-commerce (WooCommerce)
  • ✅ Gerenciamento de cookies de plugins

Tecnologias Utilizadas

  • WordPress: 6.0+
  • PHP: 7.4+ (8.0+ recomendado)
  • WooCommerce: 6.0+ (opcional)
  • JavaScript: ES6+

Pré-requisitos

Antes de começar, certifique-se de ter:

  • WordPress instalado e configurado
  • Workspace ID do Complyr
  • Acesso ao painel de administração do WordPress
  • Plugin Code Snippets (opcional, mas recomendado)
  • WooCommerce instalado (se for usar e-commerce)
  • HTTPS configurado no site

Método 1: Plugin Code Snippets (Recomendado)

Passo 1: Instalar Code Snippets Plugin

# Via painel do WordPress:
# Plugins > Adicionar Novo > Buscar "Code Snippets" > Instalar > Ativar

Passo 2: Criar Snippet de Instalação

No painel do WordPress, vá em Snippets > Add New:

Nome do Snippet: Complyr LGPD Integration

Código:

<?php
/**
 * Integração Complyr - Sistema de Gestão de Consentimento LGPD
 *
 * @package ComplyrIntegration
 * @version 1.0.0
 */

// Adicionar script do Complyr no head
function complyr_add_script() {
    $workspace_id = 'SEU_WORKSPACE_ID'; // Substitua pelo seu Workspace ID

    ?>
    <script
        src="https://app.complyr.com.br/tag/js"
        data-workspace-id="<?php echo esc_attr($workspace_id); ?>"
        data-complyr-script
        async
        defer>
    </script>
    <?php
}
add_action('wp_head', 'complyr_add_script', 1);

// Identificar usuário logado automaticamente
function complyr_identify_user() {
    if (is_user_logged_in()) {
        $current_user = wp_get_current_user();
        $user_email = $current_user->user_email;
        $user_name = $current_user->display_name;
        ?>
        <script>
        document.addEventListener('complyr:loaded', function() {
            if (window.complyr) {
                window.complyr.identify('email', '<?php echo esc_js($user_email); ?>');
                console.log('Complyr: Usuário identificado -', '<?php echo esc_js($user_name); ?>');
            }
        });
        </script>
        <?php
    }
}
add_action('wp_footer', 'complyr_identify_user');

// Adicionar classe CSS quando banner estiver ativo
function complyr_body_class($classes) {
    $classes[] = 'complyr-enabled';
    return $classes;
}
add_filter('body_class', 'complyr_body_class');
?>

Passo 3: Configurar o Snippet

  1. Substitua SEU_WORKSPACE_ID pelo seu Workspace ID do Complyr
  2. Run Snippet Everywhere: Selecione "Run snippet everywhere"
  3. Salvar e ativar

Método 2: functions.php do Tema

Adicionar ao functions.php

Abra o arquivo functions.php do seu tema (Aparência > Editor de Temas > functions.php):

<?php
/**
 * Integração Complyr LGPD
 */

// Adicionar script do Complyr
function mytheme_complyr_integration() {
    $workspace_id = 'SEU_WORKSPACE_ID';

    wp_enqueue_script(
        'complyr-sdk',
        'https://app.complyr.com.br/tag/js',
        array(),
        null,
        false
    );

    // Adicionar atributos data-* ao script
    add_filter('script_loader_tag', function($tag, $handle, $src) use ($workspace_id) {
        if ('complyr-sdk' === $handle) {
            $tag = str_replace(
                '<script',
                '<script data-workspace-id="' . esc_attr($workspace_id) . '" data-complyr-script async defer',
                $tag
            );
        }
        return $tag;
    }, 10, 3);
}
add_action('wp_enqueue_scripts', 'mytheme_complyr_integration');

// Identificar usuário logado
function mytheme_complyr_identify_user() {
    if (!is_user_logged_in()) {
        return;
    }

    $user = wp_get_current_user();
    ?>
    <script>
    (function() {
        function identifyUser() {
            if (window.complyr && typeof window.complyr.identify === 'function') {
                window.complyr.identify('email', '<?php echo esc_js($user->user_email); ?>');
            }
        }

        if (document.readyState === 'loading') {
            document.addEventListener('complyr:loaded', identifyUser);
        } else {
            identifyUser();
        }
    })();
    </script>
    <?php
}
add_action('wp_footer', 'mytheme_complyr_identify_user', 20);
?>

Método 3: Google Tag Manager (WordPress)

Passo 1: Instalar GTM Plugin

Instale o plugin Google Tag Manager for WordPress ou GTM4WP.

Passo 2: Configurar Container ID

No painel do WordPress:

  1. Vá em Configurações > Google Tag Manager
  2. Insira seu GTM Container ID (GTM-XXXXXX)
  3. Salve as configurações

Passo 3: Adicionar Tag do Complyr no GTM

No painel do Google Tag Manager:

Tag Configuration:

  • Tipo: Custom HTML
  • Nome: Complyr - LGPD Consent Banner

HTML:

<script>
(function() {
  var script = document.createElement('script');
  script.src = 'https://app.complyr.com.br/tag/js';
  script.setAttribute('data-workspace-id', 'SEU_WORKSPACE_ID');
  script.setAttribute('data-complyr-script', '');
  script.async = true;
  script.defer = true;
  document.head.appendChild(script);
})();
</script>

Trigger: All Pages

Salvar e publicar o container.

Método 4: Plugin Customizado

Criar Plugin Complyr

Crie um diretório wp-content/plugins/complyr-integration/:

complyr-integration.php:

<?php
/**
 * Plugin Name: Complyr LGPD Integration
 * Plugin URI: https://complyr.com.br
 * Description: Integração oficial do Complyr para gestão de consentimento LGPD
 * Version: 1.0.0
 * Author: Complyr
 * Author URI: https://complyr.com.br
 * License: GPL-2.0+
 * Text Domain: complyr-integration
 */

// Evitar acesso direto
if (!defined('ABSPATH')) {
    exit;
}

// Constantes do plugin
define('COMPLYR_VERSION', '1.0.0');
define('COMPLYR_PLUGIN_DIR', plugin_dir_path(__FILE__));
define('COMPLYR_PLUGIN_URL', plugin_dir_url(__FILE__));

/**
 * Classe principal do plugin
 */
class Complyr_Integration {

    /**
     * Instância única (Singleton)
     */
    private static $instance = null;

    /**
     * Workspace ID
     */
    private $workspace_id;

    /**
     * Construtor privado (Singleton)
     */
    private function __construct() {
        $this->workspace_id = get_option('complyr_workspace_id', '');
        $this->init_hooks();
    }

    /**
     * Obter instância única
     */
    public static function get_instance() {
        if (null === self::$instance) {
            self::$instance = new self();
        }
        return self::$instance;
    }

    /**
     * Inicializar hooks
     */
    private function init_hooks() {
        // Admin
        add_action('admin_menu', array($this, 'add_admin_menu'));
        add_action('admin_init', array($this, 'register_settings'));

        // Frontend
        add_action('wp_head', array($this, 'add_complyr_script'), 1);
        add_action('wp_footer', array($this, 'identify_user'), 20);

        // WooCommerce
        if (class_exists('WooCommerce')) {
            add_action('woocommerce_thankyou', array($this, 'track_purchase'), 10, 1);
        }
    }

    /**
     * Adicionar menu no admin
     */
    public function add_admin_menu() {
        add_options_page(
            'Complyr Settings',
            'Complyr LGPD',
            'manage_options',
            'complyr-settings',
            array($this, 'render_settings_page')
        );
    }

    /**
     * Registrar configurações
     */
    public function register_settings() {
        register_setting('complyr_settings', 'complyr_workspace_id');
        register_setting('complyr_settings', 'complyr_auto_identify');
    }

    /**
     * Renderizar página de configurações
     */
    public function render_settings_page() {
        ?>
        <div class="wrap">
            <h1>Complyr LGPD - Configurações</h1>
            <form method="post" action="options.php">
                <?php settings_fields('complyr_settings'); ?>
                <?php do_settings_sections('complyr_settings'); ?>

                <table class="form-table">
                    <tr>
                        <th scope="row">
                            <label for="complyr_workspace_id">Workspace ID</label>
                        </th>
                        <td>
                            <input
                                type="text"
                                id="complyr_workspace_id"
                                name="complyr_workspace_id"
                                value="<?php echo esc_attr($this->workspace_id); ?>"
                                class="regular-text"
                                required
                            />
                            <p class="description">
                                Obtenha seu Workspace ID no painel do Complyr
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">
                            <label for="complyr_auto_identify">Identificação Automática</label>
                        </th>
                        <td>
                            <input
                                type="checkbox"
                                id="complyr_auto_identify"
                                name="complyr_auto_identify"
                                value="1"
                                <?php checked(get_option('complyr_auto_identify', '1'), '1'); ?>
                            />
                            <label for="complyr_auto_identify">
                                Identificar automaticamente usuários logados
                            </label>
                        </td>
                    </tr>
                </table>

                <?php submit_button(); ?>
            </form>
        </div>
        <?php
    }

    /**
     * Adicionar script do Complyr
     */
    public function add_complyr_script() {
        if (empty($this->workspace_id)) {
            return;
        }

        ?>
        <script
            src="https://app.complyr.com.br/tag/js"
            data-workspace-id="<?php echo esc_attr($this->workspace_id); ?>"
            data-complyr-script
            async
            defer>
        </script>
        <?php
    }

    /**
     * Identificar usuário logado
     */
    public function identify_user() {
        if (empty($this->workspace_id) || !get_option('complyr_auto_identify', '1')) {
            return;
        }

        if (!is_user_logged_in()) {
            return;
        }

        $user = wp_get_current_user();
        ?>
        <script>
        document.addEventListener('complyr:loaded', function() {
            if (window.complyr) {
                window.complyr.identify('email', '<?php echo esc_js($user->user_email); ?>');
            }
        });
        </script>
        <?php
    }

    /**
     * Rastrear compra WooCommerce
     */
    public function track_purchase($order_id) {
        if (empty($this->workspace_id)) {
            return;
        }

        $order = wc_get_order($order_id);

        if (!$order) {
            return;
        }

        $items = array();
        foreach ($order->get_items() as $item) {
            $product = $item->get_product();
            $items[] = array(
                'item_id' => $product->get_sku() ?: $product->get_id(),
                'item_name' => $item->get_name(),
                'price' => $item->get_total(),
                'quantity' => $item->get_quantity(),
            );
        }

        ?>
        <script>
        // Identificar cliente
        if (window.complyr) {
            window.complyr.identify('email', '<?php echo esc_js($order->get_billing_email()); ?>');
        }

        // Push evento de compra para GTM
        if (window.dataLayer) {
            window.dataLayer.push({
                event: 'purchase',
                ecommerce: {
                    transaction_id: '<?php echo esc_js($order->get_order_number()); ?>',
                    value: <?php echo $order->get_total(); ?>,
                    currency: '<?php echo $order->get_currency(); ?>',
                    tax: <?php echo $order->get_total_tax(); ?>,
                    shipping: <?php echo $order->get_shipping_total(); ?>,
                    items: <?php echo json_encode($items); ?>
                }
            });
        }
        </script>
        <?php
    }
}

// Inicializar plugin
function complyr_integration_init() {
    return Complyr_Integration::get_instance();
}
add_action('plugins_loaded', 'complyr_integration_init');

Ativar Plugin

  1. Vá em Plugins no painel do WordPress
  2. Ative o plugin Complyr LGPD Integration
  3. Vá em Configurações > Complyr LGPD
  4. Insira seu Workspace ID
  5. Marque Identificação Automática (se desejar)
  6. Salve as configurações

Integração com WooCommerce

Rastreamento de Produtos Visualizados

Adicione ao functions.php ou ao snippet:

<?php
/**
 * Rastrear visualização de produto WooCommerce
 */
function complyr_woocommerce_track_product_view() {
    if (!is_product()) {
        return;
    }

    global $product;

    if (!$product) {
        return;
    }

    $product_data = array(
        'item_id' => $product->get_sku() ?: $product->get_id(),
        'item_name' => $product->get_name(),
        'price' => $product->get_price(),
        'currency' => get_woocommerce_currency(),
    );

    ?>
    <script>
    // Push evento de visualização de produto
    if (window.dataLayer) {
        window.dataLayer.push({
            event: 'view_item',
            ecommerce: {
                items: [<?php echo json_encode($product_data); ?>]
            }
        });
    }
    </script>
    <?php
}
add_action('wp_footer', 'complyr_woocommerce_track_product_view');
?>

Rastreamento de Adição ao Carrinho

<?php
/**
 * Rastrear adição ao carrinho
 */
function complyr_woocommerce_track_add_to_cart() {
    ?>
    <script>
    jQuery(document).ready(function($) {
        $(document.body).on('added_to_cart', function(event, fragments, cart_hash, button) {
            var productId = button.data('product_id');
            var productName = button.closest('.product').find('.woocommerce-loop-product__title').text();

            if (window.dataLayer) {
                window.dataLayer.push({
                    event: 'add_to_cart',
                    ecommerce: {
                        items: [{
                            item_id: productId,
                            item_name: productName,
                            quantity: 1
                        }]
                    }
                });
            }
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'complyr_woocommerce_track_add_to_cart');
?>

Rastreamento de Início de Checkout

<?php
/**
 * Rastrear início do checkout
 */
function complyr_woocommerce_track_begin_checkout() {
    if (!is_checkout() || is_order_received_page()) {
        return;
    }

    $cart_items = array();
    foreach (WC()->cart->get_cart() as $cart_item) {
        $product = $cart_item['data'];
        $cart_items[] = array(
            'item_id' => $product->get_sku() ?: $product->get_id(),
            'item_name' => $product->get_name(),
            'price' => $product->get_price(),
            'quantity' => $cart_item['quantity'],
        );
    }

    ?>
    <script>
    // Push evento de início de checkout
    if (window.dataLayer) {
        window.dataLayer.push({
            event: 'begin_checkout',
            ecommerce: {
                value: <?php echo WC()->cart->get_cart_contents_total(); ?>,
                currency: '<?php echo get_woocommerce_currency(); ?>',
                items: <?php echo json_encode($cart_items); ?>
            }
        });
    }
    </script>
    <?php
}
add_action('wp_footer', 'complyr_woocommerce_track_begin_checkout');
?>

Hooks e Filtros Personalizados

Hook: Modificar Workspace ID Dinamicamente

<?php
/**
 * Filtro para modificar workspace ID dinamicamente
 * Útil para multisites ou ambientes staging
 */
function custom_complyr_workspace_id($workspace_id) {
    // Ambiente de staging
    if (defined('WP_ENV') && WP_ENV === 'staging') {
        return 'WORKSPACE_ID_STAGING';
    }

    // Produção
    return $workspace_id;
}
add_filter('complyr_workspace_id', 'custom_complyr_workspace_id');
?>

Hook: Adicionar Dados Customizados à Identificação

<?php
/**
 * Action para adicionar dados customizados na identificação
 */
function custom_complyr_identify_data() {
    if (!is_user_logged_in()) {
        return;
    }

    $user = wp_get_current_user();
    $user_meta = get_user_meta($user->ID);

    // Adicionar CPF se disponível
    if (isset($user_meta['billing_cpf'][0])) {
        ?>
        <script>
        document.addEventListener('complyr:loaded', function() {
            if (window.complyr) {
                window.complyr.identify('cpf', '<?php echo esc_js($user_meta['billing_cpf'][0]); ?>');
            }
        });
        </script>
        <?php
    }
}
add_action('wp_footer', 'custom_complyr_identify_data', 25);
?>

Hook: Desabilitar Complyr em Páginas Específicas

<?php
/**
 * Filtro para desabilitar Complyr em páginas específicas
 */
function disable_complyr_on_specific_pages($load_complyr) {
    // Não carregar no painel admin
    if (is_admin()) {
        return false;
    }

    // Não carregar em páginas de login
    if (is_page('login') || is_page('register')) {
        return false;
    }

    return $load_complyr;
}
add_filter('complyr_should_load', 'disable_complyr_on_specific_pages');
?>

Compatibilidade com Plugins de Cache

WP Rocket

Adicione ao wp-config.php ou use o filtro do WP Rocket:

<?php
/**
 * Excluir script Complyr do cache
 */
function exclude_complyr_from_cache($excluded_inline_js) {
    $excluded_inline_js[] = 'complyr';
    $excluded_inline_js[] = 'data-complyr-script';
    return $excluded_inline_js;
}
add_filter('rocket_excluded_inline_js_content', 'exclude_complyr_from_cache');
?>

W3 Total Cache

No painel do W3 Total Cache:

  1. Performance > Minify
  2. JS Minify Settings
  3. Never minify the following JS files: Adicione app.complyr.com.br/tag/js

WP Super Cache

No painel do WP Super Cache:

  1. Settings > WP Super Cache > Advanced
  2. Rejected URIs: Adicione app.complyr.com.br/tag/js

LiteSpeed Cache

Adicione ao .htaccess:

<IfModule LiteSpeed>
  # Excluir Complyr do cache
  RewriteRule ^tag/js$ - [E=no-cache:1]
</IfModule>

Exemplos Avançados

Integração com Formulário de Contato (Contact Form 7)

<?php
/**
 * Adicionar checkbox de consentimento ao Contact Form 7
 */
function complyr_cf7_consent_field($form) {
    $consent_field = '
    [acceptance complyr_consent class:complyr-consent]
    Li e concordo com a [link_privacy Política de Privacidade] e autorizo o uso dos meus dados conforme a LGPD.
    [/acceptance]
    ';

    // Adicionar campo antes do botão submit
    $form = str_replace('[submit', $consent_field . '[submit', $form);

    return $form;
}
add_filter('wpcf7_form_elements', 'complyr_cf7_consent_field');

/**
 * Registrar consentimento no Complyr ao enviar formulário
 */
function complyr_cf7_register_consent($contact_form) {
    $submission = WPCF7_Submission::get_instance();

    if (!$submission) {
        return;
    }

    $posted_data = $submission->get_posted_data();

    // Verificar se aceitou consentimento
    if (isset($posted_data['complyr_consent']) && $posted_data['complyr_consent'] === '1') {
        $email = $posted_data['your-email'];

        ?>
        <script>
        if (window.complyr) {
            window.complyr.identify('email', '<?php echo esc_js($email); ?>');
            // Aceitar política de privacidade
            window.complyr.acceptPolicy('consent', null);
        }
        </script>
        <?php
    }
}
add_action('wpcf7_mail_sent', 'complyr_cf7_register_consent');
?>

Integração com Gravity Forms

<?php
/**
 * Adicionar campo de consentimento ao Gravity Forms
 */
function complyr_gravity_forms_consent($form) {
    // Adicionar campo de consentimento
    $consent_field = array(
        'type' => 'consent',
        'id' => 999,
        'label' => 'Consentimento LGPD',
        'isRequired' => true,
        'checkboxLabel' => 'Li e concordo com a Política de Privacidade e autorizo o uso dos meus dados conforme a LGPD.',
        'description' => 'Você pode revogar seu consentimento a qualquer momento.',
    );

    $form['fields'][] = $consent_field;

    return $form;
}
add_filter('gform_pre_render', 'complyr_gravity_forms_consent');

/**
 * Registrar consentimento ao enviar Gravity Form
 */
function complyr_gravity_forms_after_submission($entry, $form) {
    $email = rgar($entry, '1'); // Campo de email (ajuste o ID conforme seu formulário)
    $consent = rgar($entry, '999'); // Campo de consentimento

    if ($consent === '1') {
        ?>
        <script>
        if (window.complyr) {
            window.complyr.identify('email', '<?php echo esc_js($email); ?>');
            window.complyr.acceptPolicy('consent', null);
        }
        </script>
        <?php
    }
}
add_action('gform_after_submission', 'complyr_gravity_forms_after_submission', 10, 2);
?>

Widget de Preferências de Cookies

Crie um widget WordPress customizado:

<?php
/**
 * Widget de Preferências de Cookies
 */
class Complyr_Cookie_Preferences_Widget extends WP_Widget {

    public function __construct() {
        parent::__construct(
            'complyr_cookie_preferences',
            'Complyr - Preferências de Cookies',
            array('description' => 'Permite usuários gerenciar preferências de cookies LGPD')
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];

        if (!empty($instance['title'])) {
            echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
        }

        ?>
        <div class="complyr-widget-preferences">
            <p>Gerencie suas preferências de cookies e privacidade.</p>
            <button
                id="complyr-open-preferences-widget"
                class="button"
                onclick="if(window.complyr){window.complyr.openPreferences();}"
            >
                Gerenciar Preferências
            </button>
        </div>

        <style>
        .complyr-widget-preferences {
            padding: 15px;
            background: #f5f5f5;
            border-radius: 5px;
        }

        .complyr-widget-preferences p {
            margin-bottom: 10px;
            font-size: 14px;
        }

        #complyr-open-preferences-widget {
            background: #0073aa;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 3px;
            font-size: 14px;
        }

        #complyr-open-preferences-widget:hover {
            background: #005a87;
        }
        </style>
        <?php

        echo $args['after_widget'];
    }

    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : 'Preferências de Cookies';
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>">Título:</label>
            <input
                class="widefat"
                id="<?php echo $this->get_field_id('title'); ?>"
                name="<?php echo $this->get_field_name('title'); ?>"
                type="text"
                value="<?php echo esc_attr($title); ?>"
            />
        </p>
        <?php
    }

    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : '';
        return $instance;
    }
}

/**
 * Registrar widget
 */
function complyr_register_widget() {
    register_widget('Complyr_Cookie_Preferences_Widget');
}
add_action('widgets_init', 'complyr_register_widget');
?>

Shortcode para Preferências

Crie um shortcode para inserir botão de preferências em qualquer lugar:

<?php
/**
 * Shortcode: [complyr_preferences]
 */
function complyr_preferences_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Gerenciar Preferências de Cookies',
            'class' => 'complyr-preferences-button',
        ),
        $atts,
        'complyr_preferences'
    );

    ob_start();
    ?>
    <button
        class="<?php echo esc_attr($atts['class']); ?>"
        onclick="if(window.complyr){window.complyr.openPreferences();}"
    >
        <?php echo esc_html($atts['text']); ?>
    </button>

    <style>
    .<?php echo esc_attr($atts['class']); ?> {
        background: #0073aa;
        color: white;
        border: none;
        padding: 12px 24px;
        cursor: pointer;
        border-radius: 5px;
        font-size: 16px;
        font-weight: 500;
    }

    .<?php echo esc_attr($atts['class']); ?>:hover {
        background: #005a87;
    }
    </style>
    <?php
    return ob_get_clean();
}
add_shortcode('complyr_preferences', 'complyr_preferences_shortcode');
?>

Uso:

<!-- No editor de página/post -->
[complyr_preferences]

<!-- Com customização -->
[complyr_preferences text="Configurar Cookies" class="btn-custom"]

Gutenberg Block (Editor de Blocos)

Crie um bloco Gutenberg customizado:

complyr-block.php:

<?php
/**
 * Registrar bloco Gutenberg Complyr
 */
function complyr_register_gutenberg_block() {
    // Registrar script do bloco
    wp_register_script(
        'complyr-block',
        plugins_url('block.js', __FILE__),
        array('wp-blocks', 'wp-element', 'wp-editor'),
        filemtime(plugin_dir_path(__FILE__) . 'block.js')
    );

    // Registrar bloco
    register_block_type('complyr/preferences-button', array(
        'editor_script' => 'complyr-block',
        'render_callback' => 'complyr_render_block',
    ));
}
add_action('init', 'complyr_register_gutenberg_block');

/**
 * Renderizar bloco
 */
function complyr_render_block($attributes) {
    $text = isset($attributes['text']) ? $attributes['text'] : 'Gerenciar Preferências de Cookies';

    ob_start();
    ?>
    <div class="wp-block-complyr-preferences">
        <button
            class="complyr-gutenberg-button"
            onclick="if(window.complyr){window.complyr.openPreferences();}"
        >
            <?php echo esc_html($text); ?>
        </button>
    </div>

    <style>
    .complyr-gutenberg-button {
        background: #0073aa;
        color: white;
        border: none;
        padding: 12px 24px;
        cursor: pointer;
        border-radius: 5px;
        font-size: 16px;
        font-weight: 500;
    }

    .complyr-gutenberg-button:hover {
        background: #005a87;
    }
    </style>
    <?php
    return ob_get_clean();
}
?>

block.js:

(function(blocks, element, editor) {
    var el = element.createElement;
    var RichText = editor.RichText;

    blocks.registerBlockType('complyr/preferences-button', {
        title: 'Complyr - Botão de Preferências',
        icon: 'shield',
        category: 'widgets',
        attributes: {
            text: {
                type: 'string',
                default: 'Gerenciar Preferências de Cookies'
            }
        },

        edit: function(props) {
            var attributes = props.attributes;

            function onChangeText(newText) {
                props.setAttributes({ text: newText });
            }

            return el(
                'div',
                { className: 'complyr-block-editor' },
                el(RichText, {
                    tagName: 'button',
                    className: 'complyr-preferences-button',
                    value: attributes.text,
                    onChange: onChangeText,
                    placeholder: 'Texto do botão...'
                })
            );
        },

        save: function(props) {
            return null; // Renderizado via PHP
        }
    });
})(
    window.wp.blocks,
    window.wp.element,
    window.wp.editor
);

Troubleshooting

Problema 1: Script não carrega

Sintomas: - Banner não aparece - Console mostra erro 404 para script

Solução:

<?php
// Verificar se Workspace ID está configurado
function complyr_check_configuration() {
    $workspace_id = get_option('complyr_workspace_id', '');

    if (empty($workspace_id) && current_user_can('manage_options')) {
        add_action('admin_notices', function() {
            ?>
            <div class="notice notice-warning is-dismissible">
                <p>
                    <strong>Complyr LGPD:</strong>
                    Configure seu Workspace ID em
                    <a href="<?php echo admin_url('options-general.php?page=complyr-settings'); ?>">
                        Configurações > Complyr LGPD
                    </a>
                </p>
            </div>
            <?php
        });
    }
}
add_action('admin_init', 'complyr_check_configuration');
?>

Problema 2: Conflito com Plugins de Cache

Sintomas: - Banner aparece/desaparece aleatoriamente - Configurações não persistem

Solução:

<?php
/**
 * Adicionar cabeçalhos para prevenir cache do script
 */
function complyr_prevent_cache_headers() {
    if (is_admin()) {
        return;
    }

    header('Cache-Control: no-cache, must-revalidate, max-age=0');
    header('X-Complyr-Loaded: true');
}
add_action('send_headers', 'complyr_prevent_cache_headers');
?>

Problema 3: Identificação não funciona

Sintomas: - complyr.identify() não identifica usuário - Consentimento não vinculado ao usuário

Solução:

<?php
/**
 * Debug de identificação
 */
function complyr_debug_identification() {
    if (!is_user_logged_in() || !current_user_can('manage_options')) {
        return;
    }

    $user = wp_get_current_user();
    ?>
    <script>
    console.log('Complyr Debug - User Info:', {
        email: '<?php echo esc_js($user->user_email); ?>',
        userId: '<?php echo esc_js($user->ID); ?>',
        complyrLoaded: !!window.complyr
    });

    document.addEventListener('complyr:loaded', function() {
        console.log('Complyr Debug - Script carregado com sucesso');
    });

    document.addEventListener('complyr:consent-updated', function(e) {
        console.log('Complyr Debug - Consentimento atualizado:', e.detail);
    });
    </script>
    <?php
}
add_action('wp_footer', 'complyr_debug_identification', 999);
?>

Problema 4: WooCommerce não rastreia compras

Sintomas: - Evento purchase não dispara - Dados de e-commerce não aparecem no GA4

Solução:

<?php
/**
 * Debug de rastreamento WooCommerce
 */
function complyr_debug_woocommerce_tracking($order_id) {
    if (!current_user_can('manage_options')) {
        return;
    }

    $order = wc_get_order($order_id);

    if (!$order) {
        error_log('Complyr Debug: Order not found - ' . $order_id);
        return;
    }

    error_log('Complyr Debug: Tracking order - ' . $order->get_order_number());
    error_log('Complyr Debug: Order total - ' . $order->get_total());
    error_log('Complyr Debug: Order items - ' . count($order->get_items()));
}
add_action('woocommerce_thankyou', 'complyr_debug_woocommerce_tracking', 5, 1);
?>

Validação

Checklist de Validação

  • Script do Complyr carrega corretamente
  • Banner aparece na primeira visita
  • Botão "Aceitar Todos" funciona
  • Botão "Rejeitar Todos" funciona
  • Modal de preferências abre corretamente
  • Toggles de propósitos funcionam
  • Consentimento é salvo no localStorage
  • Identificação de usuários logados funciona
  • Eventos GTM disparam corretamente (se aplicável)
  • Rastreamento WooCommerce funciona (se aplicável)
  • Plugin de cache não interfere no funcionamento
  • Formulários com consentimento funcionam (se aplicável)
  • Widget/Shortcode de preferências funciona (se aplicável)
  • Site funciona em HTTPS

Ferramentas de Validação

Google Tag Assistant:

  1. Instale a extensão Google Tag Assistant
  2. Visite seu site WordPress
  3. Verifique se tags GTM/GA4 estão disparando corretamente
  4. Confirme se Consent Mode está sendo respeitado

Console do Navegador:

// Verificar se Complyr está carregado
console.log('Complyr loaded:', !!window.complyr);

// Verificar consentimento atual
console.log('Current consent:', localStorage.getItem('complyr_consent'));

// Testar identificação
if (window.complyr) {
  window.complyr.identify('email', 'test@example.com');
}

// Testar abertura de preferências
if (window.complyr) {
  window.complyr.openPreferences();
}

WordPress Debug:

Adicione ao wp-config.php:

<?php
// Habilitar debug
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);
@ini_set('display_errors', 0);
?>

Logs estarão em wp-content/debug.log.

Segurança

Sanitização de Dados

<?php
/**
 * Sanitizar email antes de identificar
 */
function complyr_sanitize_email($email) {
    return sanitize_email($email);
}

/**
 * Sanitizar CPF antes de identificar
 */
function complyr_sanitize_cpf($cpf) {
    // Remover caracteres não numéricos
    $cpf = preg_replace('/[^0-9]/', '', $cpf);

    // Validar formato
    if (strlen($cpf) !== 11) {
        return '';
    }

    return $cpf;
}
?>

Nonces para Formulários

<?php
/**
 * Adicionar nonce ao formulário de consentimento
 */
function complyr_add_nonce_field() {
    wp_nonce_field('complyr_consent_action', 'complyr_consent_nonce');
}

/**
 * Verificar nonce ao processar formulário
 */
function complyr_verify_nonce() {
    if (!isset($_POST['complyr_consent_nonce'])) {
        return false;
    }

    return wp_verify_nonce($_POST['complyr_consent_nonce'], 'complyr_consent_action');
}
?>

Permissões de Usuário

<?php
/**
 * Verificar se usuário tem permissão para gerenciar configurações
 */
function complyr_user_can_manage_settings() {
    return current_user_can('manage_options');
}

/**
 * Verificar se usuário pode visualizar dados de consentimento
 */
function complyr_user_can_view_consent_data() {
    return current_user_can('edit_users') || current_user_can('manage_woocommerce');
}
?>

Performance

Lazy Loading do Script

<?php
/**
 * Carregar script Complyr com lazy loading
 */
function complyr_lazy_load_script() {
    ?>
    <script>
    // Carregar script apenas quando usuário interagir com a página
    (function() {
        var loaded = false;

        function loadComplyr() {
            if (loaded) return;
            loaded = true;

            var script = document.createElement('script');
            script.src = 'https://app.complyr.com.br/tag/js';
            script.setAttribute('data-workspace-id', 'SEU_WORKSPACE_ID');
            script.setAttribute('data-complyr-script', '');
            script.async = true;
            script.defer = true;
            document.head.appendChild(script);
        }

        // Carregar após 3 segundos ou na primeira interação
        var events = ['scroll', 'mousemove', 'touchstart', 'click'];
        events.forEach(function(event) {
            window.addEventListener(event, loadComplyr, { once: true, passive: true });
        });

        setTimeout(loadComplyr, 3000);
    })();
    </script>
    <?php
}
add_action('wp_footer', 'complyr_lazy_load_script', 1);
?>

Otimização de Queries

<?php
/**
 * Cache de configurações do Complyr
 */
function complyr_get_settings() {
    $cache_key = 'complyr_settings_v1';
    $settings = wp_cache_get($cache_key);

    if (false === $settings) {
        $settings = array(
            'workspace_id' => get_option('complyr_workspace_id', ''),
            'auto_identify' => get_option('complyr_auto_identify', '1'),
        );

        wp_cache_set($cache_key, $settings, '', 3600); // Cache por 1 hora
    }

    return $settings;
}
?>

FAQ

1. Qual método de instalação devo usar?

Resposta: Para iniciantes, recomendamos o Plugin Code Snippets (Método 1) pela facilidade de uso e manutenção. Para desenvolvedores, o Plugin Customizado (Método 4) oferece mais controle e funcionalidades avançadas.

2. O Complyr funciona com tema customizado?

Resposta: Sim, o Complyr funciona com qualquer tema WordPress. Independente do tema, o script será carregado e o banner aparecerá corretamente.

3. Preciso do WooCommerce para usar o Complyr?

Resposta: Não, o WooCommerce é opcional. Use-o apenas se precisar de rastreamento de e-commerce. O Complyr funciona perfeitamente em sites WordPress sem e-commerce.

4. Como testar sem afetar o site em produção?

Resposta: Crie um ambiente de staging e use um Workspace ID diferente para testes. Assim você pode validar tudo antes de implementar em produção.

5. O plugin de cache afeta o Complyr?

Resposta: Pode afetar se não configurado corretamente. Siga as instruções da seção Compatibilidade com Plugins de Cache para garantir funcionamento correto.

6. Posso customizar o visual do banner?

Resposta: Sim, use CSS customizado no tema ou no Customizer do WordPress. Veja a documentação de Customização para detalhes.

7. Como identificar usuários automaticamente?

Resposta: Use o código de identificação automática fornecido nos métodos de instalação. Ele identifica usuários logados automaticamente via complyr.identify().

8. O Complyr é compatível com Multisite?

Resposta: Sim, você pode usar o filtro complyr_workspace_id para definir Workspace IDs diferentes por site no multisite.

9. Como adicionar consentimento em formulários?

Resposta: Veja os exemplos de Integração com Contact Form 7 e Integração com Gravity Forms.

10. Preciso de conhecimento técnico para instalar?

Resposta: Para os métodos 1-3, não é necessário conhecimento avançado. Basta seguir o passo a passo. O método 4 (plugin customizado) requer conhecimento básico de PHP.

Próximos Passos

Após completar a instalação do Complyr no WordPress:

  1. Teste a Instalação - Valide que tudo está funcionando
  2. Configure GTM - Integre com Google Tag Manager (opcional)
  3. Customize o Banner - Personalize visual e textos
  4. Configure WooCommerce - Configure rastreamento de e-commerce
  5. Explore a API - Aprenda sobre métodos avançados

Recursos Adicionais


Precisa de ajuda? Entre em contato com nosso suporte em suporte@complyr.com.br.