Adding Google Analytics to Jetpack Carousel

It’s totally possible to track it with some custom javascript. However, I don’t believe it’s something we’d be interested in supporting internally, I’m afraid.

not even as an option that could be enabled?

Would be extremely handy and helps make those that use AJAX functions like Carousel not sacrifice traffic stats.

Here’s how you can add extra tracking:

https://gist.github.com/georgestephanis/6907038

There’s a custom event triggered here that the above code hooks into. From that, you’ve got the data of the carousel, the event, and the slide, and can pull out whatever data you’d like and pass it to Google Analytics however you please.

As I said, this isn’t functionality that we are likely to add to Jetpack itself, but you can certainly publish a custom addon that offers that functionality if you’d like. ?? We try to add hooks and actions and events where we can to enable third-party developers to create just that sort of modularity.

Hey George,

I think I understand that stuff, I’ll try implement what you are saying there and see if it works for me. The github code should go in around line 700 or can the function go anywhere in the jetpack-carousel.js and that line 700 will trigger on that and use that functions contents (and I add GA related code there)

I really appreciate you taking the time to show that.

The GitHub code shouldn’t go anywhere in Jetpack. It should go in your own plugin or theme’s enqueued JS file. It’s made to let you trigger off the action happening, without modifying core plugin files that would get overwritten with an update.

Gotcha, I’ve used my functions.php to enqueue the script and I’m seeing readings in the console now, so just have to put in some analytics code and see if it works.

Thanks for the help on this.

Hey Dionsis, could you share how you did this? I’m having the same issue you originally had. Thanks!

I haven’t the first clue how this:

jQuery(document).on( 'jp_carousel.selectSlide', '.jp-carousel-wrap', function( event, slides ) {
	// This is just to show you what values get passed in.  Delete it before going to production.
	if ( window.console ) {
		console.log( this );
		console.log( event );
		console.log( slides );
		console.log( slides[0] );
	}
	// Do whatever extra stuff you want here.
} );

would be implemented.

Can someone provide code that wrapper for implementing this into child functions.php?

I’ve been working on this for days. I didn’t understand what I am supposed to do with this code.

It took me a while to get the script to show up. I had trouble with the child theme.

I added this to the functions.php file in the child theme.

function my_analytics() {
	wp_register_script('carousel-analytics', get_stylesheet_directory_uri() . '/carousel-analytics.js', true);
	wp_enqueue_script('carousel-analytics');
}

add_action( 'wp_enqueue_scripts', 'my_analytics' );

And I copied the code from the link verbatim. It seems to load but doesn’t record the individual hits in the carousel slideshow.

Is there something I’m supposed to add to that Javascript file.

I have scoured the web to understand what I am supposed to do. The information is thin, at best. So if anyone has made this work, please tell me.

I′not sure if it works but you can alway try:
1.- Copy/paste this code:

jQuery(document).on( 'jp_carousel.selectSlide', '.jp-carousel-wrap', function( event, slides ) {
 ga('send', 'pageview');
} );

on a blank document a name it carousel-analytics.js
ga stands for google universal analytics
2.- Create the carousel-analytics.js file and save it to your-Theme>js folder (perhaps on your child theme, I haven′t try.)
3.- On your functions.php file locate where other wp js files are already enqueued ssomething like this:
wp_enqueue_script( 'xx-other-script-name', $template_dir . '/js/custom.js', array( 'jquery' ), $theme_version, true );
and paste
wp_enqueue_script( 'xx-your-script-name', $template_dir . '<strong>/js/carousel-analytics.js</strong>', array( 'jquery' ), $theme_version, true );