Shopify - Content Grouping for GA4 / GTM
In the article titled Content Grouping in GA4 Properties, I explained how to send content grouping information to Google Analytics 4 properties using the Global Site Tag (GTAG) and Google Tag Manager (GTM). I've prepared a snippet based on the Shopify store template structure used in the relevant examples to enable Shopify pages to be transmitted in accordance with the GA4 content_group dimension usage.
Using the Shopify template object, we can identify which template type the page corresponds to in the theme's templates directory. Thus, we can redesign and modify page and behavior-related elements.
| 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 |
By categorizing the pages displayed in GA4 reports into separate groups, we can conduct reports and analyses based on page and content types. This information is passed on by the Shopify Content Grouping snippet to the GA4 property in a particular directory structure. The group information passed on is as shown in the Content Group column.
<script>
dataLayer.push({
'content_group': '{{- contentGroupInfo -}}'
});
</script>Through contentGroupInfo, page group information is passed on to the content_group value and made accessible as a dataLayer.
To use the relevant data, add the following code snippet to theme.liquid, or add it as a code snippet for better code organization and call it.