Global Livewire Instance?

#1

Hi all, I’m wondering if the below is possible:

I am at a stage of adding user analytics (Segment) into my application. I have typically been forced to use controllers which log user actions on page submits, but now I am considering using Livewire.

I would create a Livewire component called SegmentTrack for example, and within the controller do the necessary Segment Library calls, however, they would be initiated through on-page user actions such as wire:click="trackClick('Clicked Upload')"

This would allow me to track user actions dynamically via ajax.

My question is - is this possible? I would need some kind of global Livewire instance which is not visible (no frontend) but is accessible across my entire application (and not limited solely to Livewire components).

Not sure but if this is possible it would be super powerful!

Any thoughts? Please let me know!

#2

This is what I do: I have a listening component on the page that monitors events. It doesn’t have any other purpose than to monitor events. This allows me to trigger dynamic modals, save layout settings, etc and helps smooth the app overall and allow it to feel more like an SPA.

If you don’t want the whole page to refresh, I’d recommend implementing some kind of event system where your wire:click emits an event that monitors click tracking.

#3

Thanks for your response.

Could you show a small code example so I can understand it better?

What I can’t get my head around is how I can achieve this without it being wrapped in a huge Livewire div? Otherwise wire:click would not be picked up.

A code example would be really appreciated!

#4 
UniversalComponent.php
// this is the component that listens for your trigger
// place it anywhere on the page, I stick it at the top

public $listeners = ['trackClick'];

// this is the listener
public function trackClick($clickDescription)
{
    // do whatever you need to do to track the click
    dd($clickDescription); // just dumping as proof of concept
}

universal-component.blade.php

<div>
    {{ -- this can be left blank -- }}
</div>

component.blade.php

<button wire:click="trackClick('Clicked Upload')">Upload</button>

Component.php

public function trackClick($clickDescription)
{
    // make sure you name this event exactly the same as the listener
    // you can pass data in subsequent parameters, just make sure your listener
    // has a definition to accept the parameters
    $this->emit('trackClick', $clickDescription);
}
#5

This is awesome! Using this with window.livewire.emit() globally is so powerful! :exploding_head: