)}
);
}
export default withBlockContext(objAttributes)(AdvancedHeading);
.dnext-team-creative-sn a span::before{width:40px;height:40px;line-height:40px;font-size:16px;padding:15px}.dnext-team-creative-social-items span::before{content:attr(data-icon);padding:15px;border-radius:50%}@media (max-width:980px){.dnext-team-creative-social-items span::before{content:attr(data-icon-tablet)!important}}@media (max-width:767px){.dnext-team-creative-social-items span::before{content:attr(data-icon-phone)!important}}.dnext-team-creative-facebook span::before{content:"\e093";font-family:ETmodules!important;background-color:#3b5998;padding:15px;border-radius:50%}.dnext-team-creative-pinterest span::before,.dnext-team-creative-twitter span::before{content:"\e094";font-family:ETmodules!important;background-color:#00aced;padding:15px;border-radius:50%}.dnext-team-creative-pinterest span::before{content:"\e095";background-color:#cb2027}.dnext-team-creative-linkedin span::before,.dnext-team-creative-tumblr span::before{content:"\e09d";font-family:ETmodules!important;background-color:#007bb6;padding:15px;border-radius:50%}.dnext-team-creative-tumblr span::before{content:"\e097";background-color:#32506d}.dnext-team-creative-instagram span::before,.dnext-team-creative-skype span::before{content:"\e09a";font-family:ETmodules!important;background-color:#ea2c59;padding:15px;border-radius:50%}.dnext-team-creative-skype span::before{content:"\e0a2";background-color:#12a5f4}.dnext-team-creative-dribbble span::before,.dnext-team-creative-flikr span::before{content:"\e0a6";font-family:ETmodules!important;background-color:#ff0084;padding:15px;border-radius:50%}.dnext-team-creative-dribbble span::before{content:"\e09b";background-color:#ea4c8d}.dnext-team-creative-vimeo span::before,.dnext-team-creative-youtube span::before{content:"\e0a3";font-family:ETmodules!important;background-color:#a82400;padding:15px;border-radius:50%}.dnext-team-creative-vimeo span::before{content:"\e09c";background-color:#45bbff}li.dnext-team-creative-sn a span:before{border:0 solid #333}/*! elementor - v3.28.0 - 22-04-2025 */
:root{--color-box-shadow-color:rgba(0,0,0,.05)}.eps-theme-dark{--color-box-shadow-color:rgba(0,0,0,.1)}.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}@media screen and (min-width:480px){.text-start-sm{text-align:start}.text-center-sm{text-align:center}.text-end-sm{text-align:end}}@media screen and (min-width:768px){.text-start-md{text-align:start}.text-center-md{text-align:center}.text-end-md{text-align:end}}@media screen and (min-width:1025px){.text-start-lg{text-align:start}.text-center-lg{text-align:center}.text-end-lg{text-align:end}}@media screen and (min-width:1440px){.text-start-xl{text-align:start}.text-center-xl{text-align:center}.text-end-xl{text-align:end}}@media screen and (min-width:1600px){.text-start-xxl{text-align:start}.text-center-xxl{text-align:center}.text-end-xxl{text-align:end}}@keyframes eps-animation-pop{0%{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}import './preview-iframe.scss';
export default function PreviewIFrame( props ) {
const ref = React.useRef( null ),
previewBreakpoint = 1200,
[ scale, setScale ] = React.useState( 1 ),
[ height, setHeight ] = React.useState( 0 );
// In order to make sure that the iframe itself show the content in specific viewport,
// and it should fit to the size of the card, there is a use of css props `scale` and `height`,
// and another element that wraps the iframe to be the guidelines of the iframe sizes.
React.useEffect( () => {
const currentScale = ref.current.clientWidth / previewBreakpoint;
setScale( currentScale );
setHeight( ref.current.clientHeight / currentScale );
}, [] );
return (
);
}
PreviewIFrame.propTypes = {
src: PropTypes.string.isRequired,
templateType: PropTypes.string.isRequired,
};
# Jetpack Tracking package
A package containing functionality to track events to the a8c Tracks system
## Usage
There are several ways to track events using this package.
* Ajax: Probably the easiest one. You can simply add a class to a link and it will be tracked or you can make your own ajax call
* PHP: Track an event on the backend
* Tracking pixel: An alternative way to track events by dynamically adding a pixel to the DOM
### Tracking via Ajax
This is useful to track simple click events without the need of any additional js. Just add the appropriate class to your links and it will be tracked.
#### 1. enqueue script
Note: Not needed if you are using the Jetpack plugin in the admin context as the script is already loaded by Jetpack.
See `Automattic\Jetpack\Tracking::enqueue_tracks_scripts()`
```PHP
add_action( 'admin_enqueue_scripts', array( new Tracking( 'plugin-slug' ), 'enqueue_tracks_scripts' ) );
```
#### 2. Add the class and the event attributes.
Add the `jptracks` class to any `a` element or to its parent element.
The event needs a name. This can be informed with the `data-jptracks-name` attritbute.
```HTML
Click me
```
And that's it. Your event will be tracked. Every time this element is clicked an ajax call will be triggered to the Tracking package and it will send it to wpcom.
**Note:** Event name will be automatically prefixed with `jetpack_`.
#### 3. Additional parameters
You can also inform additional parameters to your event using the `data-jptracks-prop` attribute. Anything in this attr will be stored in the `clicked` attribute in the event.
#### 4. Making your own ajax calls
In your JS you can set up your own ajax calls. Example:
```JS
window.jpTracksAJAX.record_ajax_event( 'my_event_name', 'click', { prop1: value1, prop2: value2 } );
```
**Note:** Event name will be automatically prefixed with `jetpack_`.
##### Waiting for the ajax call to complete before doing anything else
If you need to do a subsequent action but wants to wait for this event to be tracked, you can do the following:
```JS
window.jpTracksAJAX
.record_ajax_event( 'my_event_name', 'click', { prop1: value1, prop2: value2 } )
.always( function() {
// do something
} );
```
### Tracking in PHP
Use `Automattic\Jetpack\Tracking::record_user_event()` to track events on the backend.
```PHP
$connection_manager = new Automattic\Jetpack\Connection\Manager( 'plugin-slug' );
$tracking = new Tracking( 'plugin-slug', $connection_manager );
$tracking->record_user_event(
$event_name,
array(
'property_key' => 'value',
)
);
```
### Tracking pixel
This approach to track events uses `//stats.wp.com/w.js` and dynamically adds a tracking pixel to the DOM to do the tracking.
#### 1. Enqueue the scripts
```PHP
Tracking::register_tracks_functions_scripts( true );
```
#### 2. Inform the user data
```PHP
wp_localize_script(
'my_script',
'varname',
array(
'tracksUserData' => Jetpack_Tracks_Client::get_connected_user_tracks_identity(),
)
);
```
#### 3. Track!
In your JS:
```JS
var tracksUser = varname.tracksUserData;
analytics.initialize( tracksUser.userid, tracksUser.username );
analytics.tracks.recordEvent( 'jetpack_my_event_name', { prop1: value1, prop2: value2 } );
```
## Debugging
You can watch your events being tracked in the browser console. In order to activate that, run the following command in the console:
```JS
localStorage.setItem( 'debug', 'dops:analytics*' );
```