In the article titled “GA4 Property Content Grouping”, I explained how to send content grouping information to Google Analytics 4 properties using the Global Site Tag and Google Tag Manager. Accordingly, I prepared a snippet tailored to the Shopify store template structure, enabling Shopify page URLs to properly pass the GA4 content_group dimension.
The Shopify template object provides us with information about which template type the displayed page is associated with within the templates directory of its theme. This allows us to monitor and control page-level and page-specific behaviors, as well as reconfigure them accordingly.
| Page | Page Path | Directory | Content Group |
|---|---|---|---|
| Home | / | Home | |
| Contact | /pages/contact | /pages | Pages/Contact |
| Search | /search | Pages/Search | |
| Blog | /blogs | Blogs | |
| Blog Category | /blogs/category | /blogs | Blogs/Category |
| Collections | /collections | /collections | Collections |
| Singular Collection | /collections/collection | /collections | Collections/Collection |
| Products | /products | /collections | Collections |
| Singular Product | /product | /products | Collections/Collection/Product |
| Singular Product with Variant | /product | /products | Collections/Collection/Product/Variant |
We can generate reports and analyses by grouping the pages displayed in GA4 reports under specific categories, providing insights and context based on page and content types. The Shopify Content Grouping snippet uses these details to pass content to GA4 according to a specific directory structure. The content group information passed is as specified in the Content Group column.
<script>
dataLayer.push({
'content_group': '{{- contentGroupInfo -}}'
});
</script>The page group information is passed as the contentGroupInfo value to the content_group field and becomes accessible via the dataLayer.
The following code snippet can be added into the theme.liquid file, or alternatively included as a snippet for better code organization and invocation.