Advanced GTM Sandbox

JavaScript, Storage & Custom Events

Сторінка для практики Custom Event Trigger, Data Layer Variables, JavaScript Variables, First-Party Cookie Variables, LocalStorage, SessionStorage, Element Visibility та scroll tracking.

Custom Events

custom_user_action

Простий кастомний event із додатковими параметрами для Data Layer Variables.

user_status_changed

Імітація зміни стану користувача.

Global JavaScript Variables

У глобальному об'єкті window створено змінну sandboxUser.

window.sandboxUser: 

          


          


            

            

          


        


      

    




    

    

      


        
First-Party Cookie


        


          


            
Створення Cookie


            

              Cookie називається
              sandbox_user_id.
            


            

            


              

              

            


            


              

              

            


          



          


            
Поточне значення


            

            

          


        


      

    




    

    

      


        
LocalStorage


        


          


            

              LocalStorage зберігається між перезавантаженнями
              та новими сесіями браузера.
            


            


              

              

            


            


              

              

            


          



          


            
              localStorage.training_source
            

            

            


          


        


      

    




    

    

      


        
SessionStorage


        


          


            

              SessionStorage живе в межах поточної вкладки.
            


            


              

              

            


            


              

              

            


          



          


            
              sessionStorage.sandbox_session_id
            

            

            


          


        


      

    




    

    

      


        
Copy event


        


          

            Скопіюйте текст нижче через Ctrl/Cmd+C.
          


          

          


            dataLayer.push({
              event: 'example_tracking_event',
              source: 'advanced_js'
            });

          



          

          


        


      

    




    

    

      


        
Text selection


        


          

            Виділіть частину тексту мишкою.
          


          


            Google Tag Manager дозволяє керувати
            маркетинговими та аналітичними тегами без
            необхідності змінювати код сайту при кожній
            зміні конфігурації. На цій сторінці можна
            експериментувати з DOM events, dataLayer
            та різними типами GTM Variables.

          


        


      

    




    

    

      


        
Scroll Depth


        


          

            Тут можна тестувати стандартний GTM
            Scroll Depth Trigger.
          


          

            Додатково JavaScript нижче сам генерує події:
          


          
            custom_scroll_depth
          

          

            для 25%, 50%, 75% і 90%.
          



          

            Продовжуйте скролити вниз
          




          

          


            

              Element Visibility Target
            


            

              Якщо ви бачите цей блок —
              він став видимим у viewport.
            


            

          


        


      

    




    

    

      


        


          
            Остання dataLayer подія:
          

          
Очікуємо event...