angulargoogle-analyticsgoogle-optimize

How to use Google Optimize visual editor for SPA with single URL?


I am really new to Google Optimize and I am facing a challenging situation to start with the tool !

I want to make run Google Optimize on a single web page developed with Angular.

Actually, my web is 1 unique URL (x) for 5 different screens (1, 2, 3, 4, 5). So in Google Optimize, I put my unique web URL and then I use the Visual editor to pimp my webpage.

The problem is that the tool only allows me to change elements of the first screen of my URL... It means that I can't create a variant for screen x2, x3, x4, x5 ; how I'm supposed to do it ?

Obviously, when I want to add a variant, I am only able to target the one URL I have. And for Page targeting section, I don't find URL, path, host or fragment usefull for my situation.

To complete the overview : I have already implemented virtual pageviews using a datalayer to collect data with GTM and track traffic in GA.

Thank you for your help :-)


Solution

  • You can data.Layer push an event on the additional screens and use this event to activate a change.

    See resource here https://support.google.com/optimize/answer/7008840?hl=en

    To edit the app click interactive mode (to the left of done) and interact with your app, once your at the screen switch back to editing mode.

    Update:

    What adding the custom event in GTM does is tell GTM to listen for an event and adding it to activate variant change does is tell optimize your listen for that event but you still need to push the event into the datalayer or it won’t fire. Add the below code to your app when the element appears:

    dataLayer.push({'event': 'validarPreguntas'});
    

    Or alternatively create a custom HTML tag with the below code and add a trigger of when that form part is visible:

    <script>
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
     'event': 'validarPreguntas'
     });
    </script