Sep 5, 2022 976 reads

How to Integrate Virtual Page with GTM Element Visibility

In this blog post, you'll find answers to the question above and gain detailed insights into what a Virtual Page is, its advantages and disadvantages, and how to manage this process without developer support by integrating it with GTM Element Visibility.In cases where the page URL does not change but the content does, you may sometimes need additional page tracking and more detailed analysis. To conduct in-depth funnel analysis in such scenarios, let's explore what these definitions mean and how you can implement them via GTM without developer assistance using Element Visibility.What is a Virtual Page (Single Page Application)?A Virtual Page, or SPA (Single Page Application), which helps your site perform faster, is a type of web application that interacts with the user by dynamically rewriting the current page instead of loading entire new pages from the server.In a SPA, all the source code loads at once when the site opens, and new pages are displayed by running frontend scripts, using the preloaded code. The advantage here is that when users navigate to a different page, they don’t have to wait for the code to reload. In short, Virtual Pages improve site speed and enhance the user experience.For example, imagine browsing an e-commerce website and opening various products. In a traditional structure, each product click sends a new request to the server, which reloads the entire page. While this may seem fine, during high traffic periods, it can significantly slow down your site.In a SPA scenario, since all source code is preloaded, user actions are managed through existing code, and page speed isn’t affected. When a page is clicked, it changes—but isn’t reloaded.However, alongside the speed advantages, SPAs can also negatively impact your site. One issue is broken source tracking, known as rogue referrer. The referrer data, which tells you where your users came from and how long they stayed, may be disrupted in SPAs.Additionally, SPA applications can pose disadvantages for SEO. Since SPAs are seen as a single page, it can hinder proper indexing by search engines and lower your page rankings.Advantages of SPA (Single Page Application): Speed / Performance: As mentioned, SPAs dynamically update the content without reloading the whole page, allowing users to take action quickly within the site. UX (User Experience): SPAs provide an experience similar to mobile apps by preventing interruptions during navigation, offering a smooth and practical experience. Caching: SPAs enable faster caching, allowing the use of local data and connection flow effectively—even during internet issues—ensuring continued usability. Disadvantages of SPA (Single Page Application): Rogue Referrer: Tracking sources may be disrupted, making it difficult to detect where users came from, which hinders detailed funnel analysis. SEO: Since SPAs appear as a single page, they may prevent your site from being indexed properly, affecting search engine rankings. The “All Pages” trigger in GTM is fired on full page loads, so it doesn't work on Virtual Pages. This becomes a limitation when detailed funnel analysis is required.To solve this, first, identify where Virtual Pages are used on your site, then see how integration is done using GTM Element Visibility.Areas Where Virtual Pages Are Used Virtual Cart Pages: These are side panels showing cart/summary without navigating to a new page. Lead Generation Pages: Often used in SMS or consent pop-ups. Common Examples of Virtual Page Use: Gmail Facebook Twitter Google Drive Google Maps Netflix How to Integrate a Virtual Page?The first method is pushing events via developer support—either natively or through GTM. While this may seem easy, relying on developers can slow things down or prevent fast intervention in case of issues.The second method—covered here—is using GTM Element Visibility. This allows fast implementation without developer involvement and supports detailed funnel tracking.Virtual Page Integration with GTM Element VisibilityWe'll use GTM for virtual cart and lead generation examples. Your website must have GTM installed. Then, you can configure the Element Visibility trigger. First, let’s understand how this trigger works.When you select “New Trigger” in GTM, you'll see the screen below.Clicking on “Trigger Configuration” asks you to select a trigger type.When you choose “Element Visibility,” the following screen appears:The Element Visibility trigger can be fired in 3 ways: Once per page: Trigger fires only once per page load—ideal for limiting duplicate hits. Once per element: Trigger fires for each instance—useful if a user reopens a pop-up multiple times. Every time an element appears on screen: Trigger fires each time the element appears according to the specified visibility threshold. Percent visible defines how much of the element is visible, while minimum percent visible is the threshold to trigger. Default is 50%.With minimum on screen duration, you can also set a minimum time (e.g., 1000 ms) before triggering.If the element loads after page load, use observe DOM changes to detect it properly.GTM Element Visibility for Virtual Cart PagesSelect your target element using browser inspector tools (Inspect > Elements).Use the most minimal and stable selector—for example:document.querySelector("box-flex. cart-summary")... Validate that the element exists only once on the page by running:document.querySelector("box-flex. cart-summary")Once the trigger is set, proceed to tag configuration. To push data as a pageview, configure it in GA and override the default page URL via More Settings > Field to Set, customizing the page name and title fields.GTM Element Visibility for Lead Generation PagesIn some cases, SMS confirmation is shown via pop-ups, not new pages. Without tracking these, it's hard to know when users exit the SMS funnel.By tracking SMS modals with Element Visibility, you can push virtual pageviews to GA and gain detailed insights.With these examples, brands using virtual cart pages or lead generation pop-ups can perform Virtual Page Integration using GTM Element Visibility—without developer support—allowing more accurate performance measurement and analysis.See you in the next post…

Sep 5, 2022 6029 reads

Exit, Entrance and Landing Page Reportings in GA4

It may seem that the GA4 panel, which you will be using entirely in the near future, does not make it as easy as the GA3 panel to access information about your pages. You can create your own dashboard or a customized report with a few editing and reporting techniques. But first, let's look at what these pages mean and how you can access them in the GA3 panel.Exit PageExit pages are the pages that your site visitors last viewed and left the site. For example, if a user is reading your blog content and then visits a product page on your site but leaves your site, your checkout page is the product page.Here's how you can see Exit pages in the GA3 panel: Select Site Content under the Behavior report. You can access the report when you click on Exit Pages in the drop-down menu.The Exit page report can give you some insights. If you run a blog or news site, it's perfectly normal to read a single article and then leave. However, if many people are leaving your e-commerce site during checkout, it's a red flag. For example, it can be used to understand poorly performing pages on the site. Or it can give you ideas about whether you have a page that is loading very slowly.Well, let's see where you can see this data on the GA4 panel. In the GA4 panel, you can follow the exit pages with the Exits metric. In the future, a default dashboard can be added to the panel only for exit pages, but for now, you have to create it manually. First, open an empty Report Template in Explore.Click the + sign in the Dimensions field.Select "page path + query string" as Dimension and click Import.Then add Exits and Views to the Metrics field.After all the data has been added you will get this table:Entrance PageEntrances pages are where the user begins their journey through your site. But this can be confused with other terms like pageview and session. To clarify, Google Analytics records a page view every time a page is loaded on your website and the tracking code is executed. The number of views a page receives on your site constitutes the pageview metric. This is different from an entrance because it doesn't have to be the first page your user visits. Your Analytics account records as a pageview any page a user visits during a session.Also, Google Analytics counts one session each time a user visits your website. It logs all the pages they visit and the events they trigger as a single session unless they are active for more than 30 minutes. If they reach the 30-minute inactivity limit, Analytics will save it as a new session the next time they interact with your site.An entrance resource directs a user to your site. Entrance sources can be paid campaigns, social media posts, or other external sources linked to your site. You can see this data in the GA3 panel as follows:Select Site Content under the Behavior report. You can access the report when you click on All Pages in the drop-down menu.To see this data in the GA4 panel, you can do the following: First, open an empty Report Template in Explore.Click the + sign in the Dimension field.Select "page path + query string" as Dimension and click Import.Then add Entrances and Views to the Metrics field.After all the data has been added you will get this table:Landing PageThe landing page is the web page people come to after clicking your ad. The URL for this page is usually the same as your ad's final URL. For each ad, you specify a final URL to determine the landing page people are directed to when they click on your ad.Your landing page experience is one of several factors that helps determine a keyword's Quality Score. The experience of a landing page is represented by such things as the usefulness and relevance of the information provided on the page, ease of navigation for the user, the number of links on the page, and users' expectations based on the ad clicked.You can see this in the GA3 panel as follows: Select Site Content under the Behavior report. You can access the report when you click on Landing Pages in the drop-down menu.You can see this issue in two different ways in the GA4 panel. First, you can create a customized report: First, open an empty Report Template in Explore.Click the + sign in the Dimension field.Select "Landing Page" as Dimension and click Import.Then add any data you want to see in the Metrics field. You can use metrics such as views, sessions, engaged sessions, total users, new users, returning users, engagement rate, average engagement, time per session, conversions, and total revenue, or you can create your own customized metric as we mentioned in the GA4 Custom Definition and Usage Areas section.After all the data has been added you will get this table:Another method is to create a dashboard by customizing the Pages and Screens Report. For this, you must follow these methods: Open the Report field in the GA4 panel and select the Engagement category. Open the Pages and Screen dashboard located here.Click on the Customize Report field in the upper right.Click the Save field and select Save as a new report.You can update the name of the report to Landing Pages.Click Dimensions in the Customize report area.Select Add Dimension on the screen that opens.Add Landing Page as Dimension.Select the three dots next to the Landing Page and click Set as default.Finally, save all your changes by clicking Apply.Then click on the Metrics field to select the metrics you want to add or remove.Again, save the changes by clicking Apply. Select Save changes to the current report to save the changes made to the entire report.To see this dashboard more easily, select Library in the Report section.Click on the Edit Collection field in Life Cycle.Drag the Landing Page report under Engagement from among the report collections on the right.Then save it by clicking Save. Now when you open the Engagement menu under the Report area, you will find a special area where you can see the Landing Page data.Thus, you will be able to better measure and analyze the performance of your pages in the GA4 panel.

Sep 4, 2022 1221 reads

GA4 Custom Definitions and Usage Areas

The latest version of Analytics, GA4, allows you to understand the full customer lifecycle across both your website and mobile apps. While GA4 still shares many features with Universal Analytics, it also introduces some intriguing changes. The most notable of these is custom definitions. Of course, we’re not seeing the concept of dimensions and metrics for the first time in GA4. If you’ve been using Analytics for a while, you’re probably already familiar with custom dimensions.When you send a hit to Google Analytics, certain data is collected automatically. This includes user identifiers (such as user IDs), device information, and also tracks which content the user interacted with and how they behaved on your website or mobile apps.Benefits of Using Dimensions in GA4However, there may be other data you want to collect that is specific to your website or mobile app. That’s where dimensions come into play. Simply put, a dimension is a parameter or feature of your data. It can describe a property of a product, event, user, page, etc. Dimensions help us better define and understand the what, where, and when of our data.For example:When a transaction occurs on a website, some possible dimensions are: Transaction ID Coupon Code Last Traffic Source When a user logs in to a website and we send a login event to Google Analytics, the dimensions of that event could include: Login Method User ID When a product is purchased, possible dimensions are: Product Name Product Category Product Variant Product Size When a logged-in user views their account page, dimensions might include: User ID Registered Country Scopes in GA4Within a GA4 property, you’ll notice you can also configure metrics. Dimensions and metrics are very similar, but one key difference is that dimensions can have an event scope or a user scope, whereas metrics are always event-scoped. The variety of scopes we were familiar with in Universal Analytics has been simplified, with a primary focus on the event scope. Let’s review the available scopes:EventApplies only to the specific event/hit where the dimension is sent. For example, you might send an event “trial_started” to Universal Analytics along with an extra parameter “pricing_plan”. That dimension will only apply to the “trial_started” event.UserApplies to all events for a user from the moment the user property is set (as long as the GA cookie remains valid). In GA4, this is called a User Property, similar to user-scoped dimensions in Universal Analytics, but it only affects events going forward—it does not retroactively apply to past events within the same session.ProductOnly valid for a specific product (tracked via Enhanced Ecommerce). Even if you send multiple products in the same transaction, each product can have its own product-scoped dimensions (e.g., “product_color”, “product_size”).Note: Session and hit scopes are not directly supported in GA4 yet, but Google has indicated they plan to add session scope in the future. If you need to apply a dimension to all events in a session, you must include that dimension with every event (via gtag.js or GTM).Using Custom DefinitionsIf you want to use a parameter in GA4’s reports, you must register it as a Custom Definition. Otherwise, it won’t appear in the interface. You should do this at the same time you start sending the parameter, because custom definitions are not retroactive. Any data sent before you register the custom dimension or metric will not show up in your reports, though raw data (e.g., in BigQuery) will include it.How to Add a Custom Dimension in GA4 In your existing GA4 property, go to Configure → Custom definitions. Click on Create custom dimension. Enter the name you want to see in reports into the Dimension name field. Select Event as the scope (since we’re defining an event parameter). Optionally add a description in the Description field. Choose the parameter you’re sending from the Event parameter dropdown. Click Save. You can now use this dimension in your reports. How to Add a Custom Metric in GA4 In the Custom definitions area, switch to the Custom metrics tab and click Create custom metric. Enter the name for the metric in the Metric name field. Provide a description in the Description field. Select the parameter from the Event parameter dropdown. Choose the appropriate Unit of measurement (e.g., Integer, Currency, Time). Save—your new custom metric is now available for reporting. Note: Free GA4 properties have limits on the number of custom definitions (e.g., up to 25 user properties, 50 custom dimensions). GA360 accounts have higher limits.Summary and Tips Register custom dimensions/metrics at the same time you begin sending the parameters—definitions are not retroactive. Use tag manager or gtag.js to include parameters with every relevant event. Choose the correct scope: Event for event parameters, User for user properties, and Product for ecommerce product data. Leverage GA4’s custom definitions to enrich your data and unlock deeper analysis.

Sep 4, 2022 7265 reads

What is RFM Analysis?

What is the most valuable asset for a company? Its tangible assets or inventory? Given developments in supply chains and the level of financial solutions, if you’re especially an e-commerce business, your most valuable asset is your customers.Beyond your sales, when planning your inventory levels, ad investments, and many operational activities, you must consider the future behavior of your customers.In today’s age of increasing digitalization and personalization, getting to know your customers is easier thanks to big data—but it also becomes more challenging as customer volume and diversity grow.In this article, we’ll discuss RFM analysis, one of the fundamental analyses you can use to segment your customers and build effective audiences.What Is RFM Analysis?RFM analysis segments customers based on purchase data. As an algorithm, it uses unsupervised clustering (K-means). The “RFM” acronym stands for three key metrics. First, let’s look at what each metric means.RecencyCalculated by the number of days between the analysis reference date and the customer’s most recent purchase date.FrequencyThe number of purchases the customer made in the analysis period. If many customers purchased only once—skewing the distribution—you may treat one-time buyers separately for a healthier analysis.MonetaryThe total monetary value of the customer’s purchases in the analysis period. Two considerations: 1) If purchases are in multiple currencies, convert them to a single currency. 2) If you have B2B wholesale orders, exclude them so they don’t skew the distribution.What Questions Can RFM Analysis Answer?Although RFM is purchase-behavior–based, it can answer many strategic questions about both new and existing customers, for example: Who are our most valuable customers? Which customers are at risk of churn? Which customers deserve retention efforts? Which customers share similar behavior for targeted campaigns? Why Is RFM Analysis Important?As every marketer knows, retaining existing customers is far cheaper than acquiring new ones. By using RFM to gauge how close customers are to conversion or churn, you can both retain at-risk customers and encourage more spending among active customers. You can also classify newly acquired customers into existing RFM segments to start personalized marketing before you’ve collected much new data.Required Data StructureRFM relies on transaction data—either CRM order logs or analytics platform transaction exports. For robust results, use at least one year (ideally two) of data. You need these columns: Unique customer identifier (user_id) Transaction date Order ID Transaction amount Then compute per-customer Recency, Frequency, and Monetary values in your database or analytics tool.Segmenting and Labeling AudiencesCluster customers into, say, four groups by each R, F, and M metric. Then combine their cluster labels. For example:Customers with high Frequency and high Recency are “Champions,” while high Frequency but low Recency might be “At Risk” or “Can’t Lose Them.” You can send “We miss you” coupons to at-risk groups, and premium product offers to Champions.Sum the R, F, and M cluster scores to get an overall customer score, then bucket into “Platinum,” “Gold,” “Silver,” etc. Use these segments to allocate ad budgets more effectively.At its core, RFM groups similar shoppers so you can optimize marketing spend, guide retention, and forecast sales.Additional Metrics to ConsiderYou can extend RFM with: Duration/Engagement: session time or pages per session Tenure: days since first purchase Churn Risk: predicted probability of churn Adding these refines your segments and deepens insights.Next StepsOnce segments are defined, analyze demographic, geographic, and behavioral patterns within each. Then: Map new customers to existing segments for immediate targeting. Run category- or product-level RFM to create niche micro-segments. Apply attribution models to understand each segment's purchase journey and optimize touchpoints. RFM analysis offers actionable insights from simple transaction data—use it to refine marketing strategies, reclaim at-risk customers, and boost customer lifetime value.If you found this post useful, please share it on social media so others can benefit!References https://en.wikipedia.org/wiki/RFM_(market_research) https://www.investopedia.com/terms/r/rfm-recency-frequency-monetary-value.asp https://iopscience.iop.org/article/10.1088/1742-6596/1869/1/012085/pdf

Sep 3, 2022 33622 reads

React & Google Analytics: How to Integrate GA4 in React?

It is an undeniable fact that React and Google Analytics are one of the most popular tools and libraries among the web-analyst community. Google Analytics is the most widely used web analysis tool, which helps you easily track and retarget your users.Google Analytics 4 (GA4) provides you with more comprehensive measurement methods such as personalized reports and intelligence analytics, by blending your web and mobile application together. Moreover, it provides you with better insights into your digital marketing strategies compared to Universal Analytics (UA).Known for being fast and simple, React is the most popular front-end JavaScript library in the field of web development. Using Google Analytics on your React-based website gives you the following benefits: You can find out from which country your users are driving traffic and what demographics they have. You can see how much time your users spend on which pages. You can measure the Enhanced Ecommerce and custom events. You can report bugs in your React application. You can measure user behavior for A/B tests in your application. Assuming you have a Google Analytics 4 account and a react-based website, let's see how you can set up a healthy react google analytics property step by step.First of all, you need to create a GA4 property within your current Universal Analytics account. You can use the GA4 Property Setup Assistant for this. Click on Get Started and it will be installed instantly without any pre-configuration.You can see that the GA4 installation was successful from the Connected Property section.Google Analytics 4 Measurement IDHalf of our work is done. Now that we have received the most important part, which is GA4 Measurement ID, which starts with G-, so that you can complete the GA4 installation on our React-based website.React Google Analytics IntegrationIn the React ecosystem in the digital marketing world, Static Site Generators (SSG) such as Gatsby and NextJS are generally used for page management, plugin support, CMS, site speed, and SEO compatibility concerns.Now let's start with possible integration methods.Adding Gtag ScriptFirst you need to install the react-ga package in your application.yarn add react-gaThen you have to add the react-ga package into index.js or app.js.import ReactGA from 'react-ga'; const TRACKING_ID = "UA-12341234-1"; // YOUR_OWN_TRACKING_ID ReactGA.initialize(TRACKING_ID);One of the most common problems in React applications occurs in the rendering methods, specifically, CSR (Client Side Rendering) and SSR (Server Side Rendering). You can access detailed information here for rendering methods.In your SPA (Single Page Application) applications, you should send your events with history.listen using react-router-dom in order to prevent these rendering problems.import React from 'react' import { withRouter } from 'react-router-dom'; import ReactGA from 'react-ga'; const RouteChangeTracker = ({ history }) => { history.listen((location, action) => { ReactGA.set({ page: location.pathname }); ReactGA.pageview(location.pathname); }); return ; }; export default withRouter(RouteChangeTracker);Gatsby GTAG PluginIf you use Gatsby engine on your website, adding gatsby-plugin-google-gtag /) is recommended.First of all, you need to install the gatsby-plugin-google-gtag plugin.yarn add gatsby-plugin-google-gtagThen you should update the gatsby-config.js file as follows:module.exports = { plugins: [ { resolve: `gatsby-plugin-google-gtag`, options: { trackingIds: [ "GA-TRACKING_ID", ], gtagConfig: { optimize_id: "OPT_CONTAINER_ID", anonymize_ip: true, cookie_expires: 0, }, pluginConfig: { head: false, respectDNT: true, exclude: ["/preview/**", "/do-not-track/me/too/"], }, }, }, ], }Because of the SSR, you may also have to send your custom events as shown below.typeof window !== "undefined" && window.gtag("event", "click", { ...data })Adding GTAG Script in Next.jsIn the folder where your Next.js application is located, you can open the .env.local file, so that you can add your Measurement ID.NEXT_PUBLIC_GOOGLE_ANALYTICS=You can easily add this variable in the .env.local file, for example if you are using Vercel.Then it will be enough to add the snippet into the _document.js file.import Document, { Html, Head, Main, NextScript } from 'next/document' export default class MyDocument extends Document { render() { return ( {/* Global Site Tag (gtag.js) - Google Analytics */} ) } }To pull custom events, you should use this following method;export const event = ({ action, params }) => { window.gtag('event', action, params) }As you can see, there are different Google Analytics 4 integration methods according to different frameworks.However, no matter what React framework you are using, you must first understand how Google Analytics pulls data from any web application. This will prevent possible measurement and integration errors on your website.You can access the source on how Google Analytics 4 works on the Gtag script here.