Example of using the Site Kit Widgets API

custom-analytics-widget.js

const { useSelect } = window.googlesitekit.data;
const {
	registerWidget,
	WIDGET_WIDTHS,
} = window.googlesitekit.widgets;

function CustomAnalyticsWidget( props ) {
	const {
		Widget,
		WidgetNull,
		WidgetActivateModuleCTA,
		WidgetCompleteModuleActivationCTA,
	} = props;

	// If there is no Analytics module at all, do not render the widget at all.
	const analyticsModule = useSelect( ( select ) => select( 'core/modules' ).getModule( 'analytics' ) );
	if ( ! analyticsModule ) {
		return <WidgetNull />;
	}

	const { active, connected } = analyticsModule;
	
	// If the Analytics module is inactive, render the corresponding CTA for the widget.
	if ( ! active ) {
		return <WidgetActivateModuleCTA moduleSlug="analytics" />;
	}
	
	// If the Analytics module activation flow has not been completed yet, render the corresponding CTA for the widget.
	if ( ! connected ) {
		return <WidgetCompleteModuleActivationCTA moduleSlug="analytics" />;
	}

	// Include <Widget> wrapper because wrapWidget is false below.
	return (
		<Widget>
			Widget content goes here.
		</Widget>
	);
}

window.wp.domReady( () => {
	registerWidget( 'customAnalyticsWidget', {
		component: CustomAnalyticsWidget,
		width: WIDGET_WIDTHS.FULL,
		wrapWidget: false,
	}, [ 'dashboardAllTraffic' ] );
} );