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( + '
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(); ?> + +Add the data-track attribute to any HTML element to track clicks:
<button data-track="signup_button_click">Sign Up</button>+
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]+
You can also manually add onclick="tE('your_event_name')" to any HTML element.