Custom Event not getting captured after the initial one for SPA | Community
Skip to main content
J
Adobe Employee
jladobeAdobe Employee
Adobe Employee
February 16, 2023
Solved

Custom Event not getting captured after the initial one for SPA

  • February 16, 2023
  • 1 reply
  • 3254 views

I'm trying to capture route changes as page views for a react SPA.  I have the Adobe Analytics extension installed, and

 

1. Added custom code in my app that dispatches an event named `analytics` every time the route changes. It's set on the window object. I've verified this works.

2. Set up Rules with Event: Core - Custom Event, Actions: Set Variables, Send Beacon, Clear Variables. 

3. In Rules - Event - Custom Event, the Event Type input is `analytics` (the same as #1) for any element.

4. In Rules - Set Variables, I have Page URL set in the Additional Settings.

5. I also have a Data Element, with Core extension and Data Element Type as Page info - URL attribute.

 

When I check the network tab in Chrome, I see `s` getting sent only on the initial page load, but not when the route changes. Also, when I check what `s.pageURL` is set to be in the console, it's always the initial URL even when it has changed. I've attached screenshots.

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Jennifer_Dungan

Is the "analytics" event you mentioned, more like a custom JavaScript event that your developers are firing?

 

window.dispatchEvent(analytics)

 

If so, I am using similar code, and the built-in custom event trigger doesn't work for me... I had to use custom code to add my own EventListener:

 

document.addEventListener('analytics', function (e) { trigger(); }, false);

 

The trigger(); part of this is what makes the rule fire, so its wrapped inside an event listener looking for the specific event to be fired.

1 reply

Jennifer_Dungan
Community Advisor and Adobe Champion
Jennifer_DunganCommunity Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
February 16, 2023

Is the "analytics" event you mentioned, more like a custom JavaScript event that your developers are firing?

 

window.dispatchEvent(analytics)

 

If so, I am using similar code, and the built-in custom event trigger doesn't work for me... I had to use custom code to add my own EventListener:

 

document.addEventListener('analytics', function (e) { trigger(); }, false);

 

The trigger(); part of this is what makes the rule fire, so its wrapped inside an event listener looking for the specific event to be fired.

    J
    Adobe Employee
    jladobeAdobe EmployeeAuthor
    Adobe Employee
    February 16, 2023

    So `dispatchEvent` alone didn't work for you but adding `trigger` on top of it did?

     

    This is what I currently have:

     

    In index.html

    window.analyticsEvent = new Event('analytics');

     

    In a react tsx file

    React.useEffect(() => { window.dispatchEvent(window.analyticsEvent); }, [location.pathname]);
    J
    Adobe Employee
    jladobeAdobe EmployeeAuthor
    Adobe Employee
    February 16, 2023

    No worries 🙂

     

    trigger(); is a reserved function within Launch's custom code architecture.

     

     

    In a custom code event, once that is fired, this is a signal within the Rule that says "run".

     

    So let's use a simple example...

     

    Let's say I created a custom code trigger that was just:

    trigger();

     

    There are actually no controls on this... as soon as the JS for this rule is loaded, this will immediately activate (so not really a good idea).

     

    Now, let's say I wanted to create a condition looking for a specific variable (let's use "sample" as the variable name, and "value" as the value we are looking for)

     

    if (sample === "value"){ trigger(); }

     

    Again, as soon as the script for this is loaded, it will evaluate the variable sample, and if the value is "value" the rule will fire.

     

    In a traditional website, this can be used to run rules for specific pages... if the url is x, or the subdomain is y, etc, then run this rule. Conditions probably work better for this purpose, but you get the idea.

     

    When you are dealing with a Single Page Application, you can't use standard triggers like Window Loaded, or DOM Ready, as these only trigger when the site is first opened.. which is where custom events can become so important.

     

    But these can be used in so many different ways... when a form is successfully submitted (and the developers suppressed the standard "submit" event so you can't tell the form was actually submitted), or maybe when someone signs up for a newsletter (but you actually want to track after a success signal is sent back on from the server, rather than just tracking the click to subscribe), etc.. Or maybe you want to check for multiple conditions... custom code gives you a lot of flexibility!

     

    Here is a blog post I found about using Custom Code triggers:

    https://blog.developer.adobe.com/custom-code-event-type-6cde810ff09c

     

     

    I hope this helps!


    Thank you for explanation! And I'm happy to report that using trigger() as a custom code event worked! 🙂

     

    For anybody who might come across this with the same issue, I also needed to increase the timeout between Set Variables and Send Beacon for the tracker to be sent.

      Terms & ConditionsAccessibility statement

      Loading footer...