Storing Data Locally: A GTM Guide to Using Local Storage

Note: Empower yourself and others by sharing this insightful article on LinkedIn or social media. Let’s build a well-informed community together. Need help? Reach out anytime. 

Understanding local Storage


Local storage is a web storage option that allows websites to store data as key-value pairs in a user’s browser. Data stored in local storage persists even after the browser window is closed, allowing for data access across different sessions. This method provides a way for websites to save substantial amounts of data without affecting website performance negatively.

 

Differences between Local storage and Session storage

Advantages of using Local Storage

  1. Persistence of Data : Local storage provides a way to store data persistently in the user’s browser. Unlike session storage or cookies, data stored in local storage does not expire when the browser is closed. This persistence allows for retaining user settings, preferences, and other important data across browser sessions, which can significantly enhance the user experience on a website.

 

  1. Greater Storage Capacity : Local storage offers a much larger capacity compared to traditional cookies. While cookies are limited to about 4KB per domain, local storage provides up to 5MB per domain in most modern browsers. This increased capacity allows developers to store more complex data or larger quantities of data, such as user preferences, application state, or cached content, directly in the browser without impacting server communication.

 

  1. Improved Website Performance : By storing data locally in the browser, websites can reduce the need to retrieve data from the server frequently. This can decrease page load times and reduce server load, leading to a faster and smoother user experience. Local storage is particularly useful for applications that require large amounts of data to be readily accessible, such as offline-capable applications or complex web applications like games and interactive tools.

 

  1. Accessibility Across Sessions and Tabs : Data stored in local storage is accessible from any window or tab under the same origin (same protocol, host, and port), making it highly versatile for sharing data across different parts of a web application. This is particularly useful for maintaining consistent application states or user settings across multiple tabs or windows.

 

  1. Simplified Data Management : Local storage provides a simple key-value store, which can be easier to manage compared to cookies. Cookies often require additional handling for parsing and secure transmission (e.g., setting HTTP-only flags). Local storage data can be accessed using straightforward JavaScript methods (localStorage.setItem, localStorage.getItem, and localStorage.removeItem), which simplifies data management in client-side scripts.




Creating Custom JavaScript Variables in GTM

Introduction to Custom JavaScript (CJS) variables

A custom JavaScript variable is a type of user-defined variable in GTM that executes a JavaScript function to determine its value. The function must return a value, which can then be used by tags, triggers, or other variables within GTM.

Steps to create CJS variables for extracting data

 

Step 1 : Open the required GTM container & click on the “Variables” menu option in the left navigation bar.



 

Step 2 : Now scroll down to “User Defined Variable Section” and click on “New”


Step 3 : Now click on “choose a variable type to begin set up “ and select “Custom Javascript Variable”

Step 4 : Now we need to enter a JavaScript function in the “Custom JavaScript” section.Here we are going to fetch email address and contact number from one of our forms, so we’ll create 2 different variables.You can create a Javascript Function according to your needs and then put it in this variable and save this after naming the variable.

 

Now we have successfully created our custom JavaScript Variables and now we need to save these fetched values in the local storage.

Storing Data : Using Custom HTML Tags to store data in Local Storage

 

Now since we have fetched the data that we need to store, we’ll be creating a custom HTML tag to store it in the Local Storage.


Step 1 : Click on the “Tags” menu option in the left navigation bar and create a New Tag.

Step 2 : Click on Tag Configuration and select “Custom HTML”.

Step 3 : Now we’ll write html code so that the values in the variables get stored in the local storage. 

 

Step 4 : Now we need to add a trigger depending upon at what condition we want this tag to fire and the values to get stored in the local storage. Here since we are fetching values from a form we’ll apply a form submit trigger.
After that you can save the tag once you have named it.



Testing and Debugging

Now after filling the form and submitting it, since our trigger is based on form submit we’ll check if the variables populate in the GTM Debugger and then verify if the local storage gets populated.

Step 1 : Open GTM Debugger and preview the URL from where you want to fetch the values.

 

 

Step 2 : Once you have submitted the form go back to the debugger and select the required event based on which you added the trigger. Now we will move to the Variables section first to see if our variables got populated.



Cross-Domain and Self-Referral Tracking

Cross domain tracking technology lets you track user interactions across multiple domains or subdomains, giving you a better picture of user behaviour. During your google analytics audit, focus on the following aspects of cross-domain tracking:

Setting up and verifying Cross-Domain tracking
Make sure that Cross-Domain tracking is correctly set up, in order to correctly track user sessions and interactions across domains or subdomains. Check that the tracking code is implemented on all domains appropriately, and that the exclusion settings are set not to track referrals from the same domain.

Step 3 : Now that the custom javascript variables are getting populated correctly, we’ll check if our custom HTML tag has fired or not. If the tag fires successfully then these values will be stored in the local storage.



 

Step 4 : Now as the CHTML tag has also fired we’ll check the local storage. To check the local storage, open the developer tools and navigate to “Application”. Within the Application you can find a “Storage” section, where we will select Local Storage and select the domain on which you want to test. 

 

This will display all the key-value pairs currently stored in local storage for that domain.

So this is how we can store any value into the local storage.

Understanding user and event data for strategic decisions

Use Google Analytics 4 for user and event data analysis to gain insights into user behaviour, engagement, conversion paths. Discover trends, patterns and areas for optimization, and leverage data-driven insights in making strategic decisions that drive business growth.

Conclusion

 

Storing data in local storage using Google Tag Manager provides a powerful way to enhance user experiences on websites by leveraging browser capabilities for persistent data storage. By following the outlined steps, developers can efficiently create Custom JavaScript Variables and Custom HTML Tags in GTM to store and manage data across browser sessions. This approach not only improves website performance by reducing server load but also allows for more complex web applications that can maintain state or user preferences locally. Ultimately, integrating local storage with GTM can significantly contribute to a more responsive, personalised, and user-friendly website environment.

FAQs

  1. What is local storage ?
    Local storage is a web storage option that allows websites to store data as key-value pairs in a user’s browser, persisting even after the browser window is closed.

 

  1. What are the benefits of using local storage?
    Benefits include persistence of data across sessions, increased storage capacity compared to cookies, improved website performance due to reduced server load, and ease of data management using straightforward JavaScript methods.

 

  1. Can local storage be used on all browsers?
    Yes, local storage is supported by all major modern browsers, including Chrome, Firefox, Safari, and Edge.

About Author

Aditya is a Web analytics professional with experience in the Overall journey of a digital business from frontend development to creating digital marketing campaigns and implementing complex tracking on the website through GTM including server side mechanisms. He has a vast expertise with the analytics tools such as GTM and GA4 and thus is able to give insights about what all is happening in the user journey. He has conducted many CRO and Analytics Audits, extracting actionable insights from large data sets and thus providing strategic recommendations for improving conversions and user experience.

Share This Article:
Facebook
Twitter
LinkedIn
Email
Table of content

Related Stories

Frustrated by 'Not Set' appearing in your Google Analytics reports? Discover the common causes behind this...
Unlock the full potential of your Calendly integration with enhanced conversion tracking using Google Tag Manager....
Unlock the full potential of your website with our step-by-step guide on adding Facebook Pixel using...
Unlock the full potential of GA4 with our step-by-step guide to using Debug View. Learn how...