87 lines
3.0 KiB
JavaScript
87 lines
3.0 KiB
JavaScript
/**
|
|
* Palantics Tracking Block
|
|
*/
|
|
|
|
const { registerBlockType } = wp.blocks;
|
|
const { InspectorControls } = wp.blockEditor;
|
|
const { PanelBody, TextControl } = wp.components;
|
|
const { Fragment } = wp.element;
|
|
const { __ } = wp.i18n;
|
|
|
|
// Register the block
|
|
registerBlockType('palantics-tracking/track-element', {
|
|
title: __('Tracking Element', 'palantics-tracking-plugin'),
|
|
icon: 'chart-line',
|
|
category: 'widgets',
|
|
keywords: [
|
|
__('track', 'palantics-tracking-plugin'),
|
|
__('analytics', 'palantics-tracking-plugin'),
|
|
__('palantics', 'palantics-tracking-plugin'),
|
|
],
|
|
|
|
attributes: {
|
|
eventName: {
|
|
type: 'string',
|
|
default: 'tracked_element',
|
|
},
|
|
content: {
|
|
type: 'string',
|
|
default: '',
|
|
},
|
|
},
|
|
|
|
edit: function(props) {
|
|
const { attributes, setAttributes } = props;
|
|
const { eventName, content } = attributes;
|
|
|
|
return (
|
|
<Fragment>
|
|
<InspectorControls>
|
|
<PanelBody title={__('Tracking Settings', 'palantics-tracking-plugin')}>
|
|
<TextControl
|
|
label={__('Event Name', 'palantics-tracking-plugin')}
|
|
value={eventName}
|
|
onChange={(value) => setAttributes({ eventName: value })}
|
|
help={__('Enter the event name that will be used for tracking this element', 'palantics-tracking-plugin')}
|
|
/>
|
|
</PanelBody>
|
|
</InspectorControls>
|
|
|
|
<div
|
|
className="palantics-tracking-block"
|
|
style={{
|
|
padding: '20px',
|
|
border: '1px dashed #ccc',
|
|
backgroundColor: '#f8f8f8'
|
|
}}
|
|
>
|
|
<div style={{ marginBottom: '10px', fontWeight: 'bold' }}>
|
|
{__('Palantics Tracking Element', 'palantics-tracking-plugin')}
|
|
</div>
|
|
<div style={{ fontSize: '0.9em', marginBottom: '10px' }}>
|
|
{__('Event:', 'palantics-tracking-plugin')} <code>{eventName}</code>
|
|
</div>
|
|
<div style={{ fontStyle: 'italic', fontSize: '0.8em' }}>
|
|
{__('This element will be tracked when clicked', 'palantics-tracking-plugin')}
|
|
</div>
|
|
</div>
|
|
</Fragment>
|
|
);
|
|
},
|
|
|
|
save: function(props) {
|
|
const { attributes } = props;
|
|
const { eventName } = attributes;
|
|
|
|
return (
|
|
<div
|
|
className="palantics-tracking-wrapper"
|
|
onClick={`tE('${eventName}')`}
|
|
>
|
|
<div className="palantics-tracking-content">
|
|
{props.children}
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
}); |