diff --git a/wordpress/block.js b/wordpress/block.js new file mode 100644 index 0000000..6e52287 --- /dev/null +++ b/wordpress/block.js @@ -0,0 +1,133 @@ +/** + * Tracking Block for Gutenberg with Popup Editor + */ +(function(blocks, element, blockEditor) { + var el = element.createElement; + var InnerBlocks = blockEditor.InnerBlocks; + var useBlockProps = blockEditor.useBlockProps; + var __ = wp.i18n.__; + var Button = wp.components.Button; + var Popover = wp.components.Popover; + var TextControl = wp.components.TextControl; + var useState = wp.element.useState; + + blocks.registerBlockType('simplified-tracking/track-element', { + title: 'Tracking Wrapper', + icon: 'chart-bar', + category: 'design', + attributes: { + eventName: { + type: 'string', + default: 'tracked_element' + } + }, + + edit: function(props) { + var blockProps = useBlockProps(); + var eventName = props.attributes.eventName; + var [isPopoverVisible, setPopoverVisible] = useState(false); + + function onChangeEventName(newEventName) { + props.setAttributes({ eventName: newEventName }); + } + + return el( + 'div', + blockProps, + el( + 'div', + { className: 'tracking-block-wrapper' }, + el( + 'div', + { className: 'tracking-block-notice' }, + 'Event: ' + eventName, + el( + Button, + { + isSmall: true, + onClick: function() { + setPopoverVisible(!isPopoverVisible); + }, + style: { + marginLeft: '8px', + background: 'white', + color: '#007cba' + } + }, + 'Edit' + ), + isPopoverVisible && el( + Popover, + { + onClose: function() { + setPopoverVisible(false); + }, + position: 'bottom', + focusOnMount: 'firstElement' + }, + el( + 'div', + { + style: { + padding: '16px', + width: '300px' + } + }, + el( + 'h3', + { + style: { + margin: '0 0 8px 0' + } + }, + 'Tracking Event Settings' + ), + el( + TextControl, + { + label: 'Event Name', + value: eventName, + onChange: onChangeEventName, + help: 'Enter the event name to track when this element is clicked' + } + ), + el( + Button, + { + isPrimary: true, + onClick: function() { + setPopoverVisible(false); + } + }, + 'Done' + ) + ) + ) + ), + el( + 'div', + { style: { marginTop: '5px' } }, + el(InnerBlocks) + ) + ) + ); + }, + + save: function(props) { + var blockProps = useBlockProps.save({ + className: 'tracking-block-wrapper', + onClick: "tE('" + props.attributes.eventName + "')" + }); + + return el( + 'div', + blockProps, + el(InnerBlocks.Content) + ); + } + }); +}( + window.wp.blocks, + window.wp.element, + window.wp.blockEditor +)); \ No newline at end of file diff --git a/wordpress/simple-tracking.php b/wordpress/simple-tracking.php index 4329c1e..5ad9aeb 100644 --- a/wordpress/simple-tracking.php +++ b/wordpress/simple-tracking.php @@ -1,8 +1,8 @@ @@ -123,13 +127,175 @@ document.addEventListener("DOMContentLoaded", function() { try { tE("pageload"); } catch (error) { - console.error("Error in DOMContentLoaded:", error); + console.error("Error in page load tracking:", error); } }); + + + 'tracked_element', + 'class' => '', + 'style' => '', + ), $atts, 'track_element'); + + // Sanitize attributes + $event = esc_attr($atts['event']); + $class = esc_attr($atts['class']); + $style = esc_attr($atts['style']); + + // Return the div with content and onclick attribute + return sprintf( + '
%s
', + $class, + $style, + $event, + do_shortcode($content) + ); + } + + /** + * Register Gutenberg tracking block + */ + public function register_tracking_block() { + // Only register block if Gutenberg is available + if (!function_exists('register_block_type')) { + return; + } + + // Register block script + wp_register_script( + 'tracking-block-editor', + plugins_url('block.js', __FILE__), + array( + 'wp-blocks', + 'wp-element', + 'wp-block-editor', + 'wp-components', + 'wp-i18n' + ), + filemtime(plugin_dir_path(__FILE__) . 'block.js') + ); + + // Register block styles + wp_register_style( + 'tracking-block-editor-style', + plugins_url('block.css', __FILE__), + array(), + filemtime(plugin_dir_path(__FILE__) . 'tracking-block.css') + ); + + // Register the block + register_block_type('simplified-tracking/track-element', array( + 'editor_script' => 'tracking-block-editor', + 'editor_style' => 'tracking-block-editor-style', + 'attributes' => array( + 'eventName' => array( + 'type' => 'string', + 'default' => 'tracked_element', + ), + ), + )); + + // Add inline script to ensure tE function is available in editor + wp_add_inline_script('tracking-block-editor', " + // Mock tE function for the editor if it doesn't exist + if (typeof window.tE === 'undefined') { + window.tE = function(eventName) { + console.log('Tracking event: ' + eventName); + }; + } + "); + } + /** * Register tracking endpoint */ @@ -150,11 +316,6 @@ document.addEventListener("DOMContentLoaded", function() { */ public function handle_tracking_request($wp) { if (isset($wp->query_vars['tracking_endpoint'])) { - // Log that we received a tracking request - error_log('Simple Tracking Plugin: Tracking request received'); - // Log the query parameters - error_log('Simple Tracking Plugin: Query params: ' . print_r($_GET, true)); - $this->forward_to_tracker(); exit; } @@ -168,14 +329,6 @@ document.addEventListener("DOMContentLoaded", function() { $tracking_server_url = get_option('simple_tracking_server_url', $this->tracking_server_url); $forward_url = 'https://' . $tracking_server_url . '/spur'; - - - // Log the request (for debugging) - error_log('Forwarding tracking request to: ' . $forward_url); - - - error_log('Simple Tracking Plugin: Request method: ' . $_SERVER['REQUEST_METHOD']); - // Create a new cURL resource $ch = curl_init(); @@ -203,7 +356,6 @@ document.addEventListener("DOMContentLoaded", function() { // If a custom destination is provided in the header, use it $forward_url = 'https://' . $value . '/spur'; curl_setopt($ch, CURLOPT_URL, $forward_url . '?' . $query_string); - error_log('Overriding destination with: ' . $value); } $headers[] = "$name: $value"; } @@ -214,7 +366,6 @@ document.addEventListener("DOMContentLoaded", function() { $http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE); if (curl_errno($ch)) { - error_log('cURL error: ' . curl_error($ch)); $http_code = 500; } @@ -273,6 +424,7 @@ document.addEventListener("DOMContentLoaded", function() { */ public function register_settings() { register_setting('simple_tracking_settings', 'simple_tracking_server_url'); + register_setting('simple_tracking_settings', 'simple_tracking_track_classes'); add_settings_section( 'simple_tracking_section', @@ -288,6 +440,21 @@ document.addEventListener("DOMContentLoaded", function() { 'simple-tracking-settings', 'simple_tracking_section' ); + + add_settings_section( + 'simple_tracking_auto_section', + 'Element Tracking Settings', + array($this, 'auto_settings_section_callback'), + 'simple-tracking-settings' + ); + + add_settings_field( + 'simple_tracking_track_classes', + 'Track Elements with Classes', + array($this, 'track_classes_callback'), + 'simple-tracking-settings', + 'simple_tracking_auto_section' + ); } /** @@ -297,6 +464,13 @@ document.addEventListener("DOMContentLoaded", function() { echo '

Configure your tracking server settings.

'; } + /** + * Auto tracking settings section callback + */ + public function auto_settings_section_callback() { + echo '

Configure which elements to track based on CSS classes.

'; + } + /** * Server URL field callback */ @@ -305,7 +479,15 @@ document.addEventListener("DOMContentLoaded", function() { echo ''; echo '

Enter the tracking server URL without https:// (e.g., tracking1.karlbreuer.com)

'; echo '

You will find this in your domain screen in the Palantics app

'; - + } + + /** + * Track classes callback + */ + public function track_classes_callback() { + $value = get_option('simple_tracking_track_classes', ''); + echo ''; + echo '

Enter comma-separated class names to automatically track clicks on elements with these classes (e.g., cta-button, featured-product)

'; } /** @@ -322,6 +504,29 @@ document.addEventListener("DOMContentLoaded", function() { submit_button(); ?> + +
+

Manual Tracking Methods

+ +
+

Method 1: Using Data Attributes

+

Add the data-track attribute to any HTML element to track clicks:

+
<button data-track="signup_button_click">Sign Up</button>
+
+ +
+

Method 2: Using Shortcode

+

Wrap any content with the shortcode to track clicks:

+
[track_element event="download_click" class="your-class" style="your-style"]
+    Your content here (can include other shortcodes)
+[/track_element]
+
+ +
+

Method 3: Using Direct JavaScript

+

You can also manually add onclick="tE('your_event_name')" to any HTML element.

+
+