How can you use Google Tag Manager to track page view durations? A Step by Step Guide
Tracking page view durations with Google Tag Manager (GTM) can help you understand user engagement on your website. To achieve this, you can create a custom HTML tag to fire at regular intervals while the user is on the page. Here’s a step-by-step guide:
- Log in to Google Tag Manager: Sign in to your GTM account at https://tagmanager.google.com/ and select the container associated with your website.
- Enable built-in variables: Click “Variables” in the left-hand menu, then scroll down to “Built-In Variables” and click “Configure.” Enable the necessary variables such as “Page Path” and “Page URL.”
- Create a new tag: Click “Tags” in the left-hand menu, then click the “New” button. Give your tag a descriptive name, such as “Page View Duration Tracking.”
- Choose a tag type: Click on “Tag Configuration” and select the “Custom HTML” tag type.
- Add your custom JavaScript code: In the “HTML” field, insert your custom JavaScript code to track page view durations. Here’s an example:
<script>
(function() {
var intervalDuration = 10000; // Set the interval duration in milliseconds (e.g., 10000 ms = 10 seconds)
var pageViewDuration = 0;
function sendPageViewDuration() {
pageViewDuration += intervalDuration;
window.dataLayer.push({
'event': 'page_view_duration',
'pageDuration': pageViewDuration,
'pagePath': '{{Page Path}}',
'pageUrl': '{{Page URL}}',
});
}
var intervalId = setInterval(sendPageViewDuration, intervalDuration);
window.addEventListener('beforeunload', function() {
clearInterval(intervalId);
});
})();
</script>
This code creates a timer that sends a ‘page_view_duration’ event to the dataLayer every 10 seconds (you can adjust the intervalDuration variable to change the frequency). It also clears the interval when the user leaves the page.
- Choose the trigger: Click on “Triggering” and select the “All Pages” trigger to ensure your custom JavaScript code runs on every page.
- Save your tag: Click “Save” to finish creating your custom JavaScript tag.
- Create a new tag for sending event data to Google Analytics: Follow the steps in previous answers to create a new Universal Analytics or GA4 event tag that listens for the “page_view_duration” event in the dataLayer. Configure the event category, action, and label using the appropriate dataLayer variables.
- Test your setup: Before publishing your changes, use the “Preview” mode in GTM to test your page view duration tracking on your website. Make sure the tag fires correctly and the events are sent to Google Analytics.
- Publish your changes: If your page view duration tracking works correctly in Preview mode, click “Submit” in the top right corner of the GTM interface to publish your changes and make your tracking live on your website.
By following these steps, you can use Google Tag Manager to track page view durations on your website, providing valuable insights into user engagement and how long visitors spend on each page.