From analytics-ads
Implement and manage Google Tag Manager — set up tags, triggers, variables, deploy tracking pixels, manage GA4 configuration, and audit GTM containers. Use when implementing tracking pixels, setting up conversion tracking, managing marketing tags without code deploys, auditing GTM containers, or configuring data layer events. Triggers: "Google Tag Manager", "GTM", "tag manager", "data layer", "tracking pixel", "tag implementation", "GTM container".
How this skill is triggered — by the user, by Claude, or both
Slash command
/analytics-ads:google-tagmanagerThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Manage all tracking and marketing tags through GTM without requiring code deployments.
Manage all tracking and marketing tags through GTM without requiring code deployments.
Add to theme.liquid:
{# In <head> — first line after opening tag #}
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
{# In <body> — immediately after opening tag #}
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
Push events from Liquid to the data layer:
{# In theme.liquid <head> — before GTM script #}
<script>
window.dataLayer = window.dataLayer || [];
{% if template.name == 'product' %}
dataLayer.push({
'event': 'view_item',
'ecommerce': {
'items': [{
'item_id': '{{ product.id }}',
'item_name': '{{ product.title | escape }}',
'item_category': '{{ product.type | escape }}',
'price': {{ product.price | divided_by: 100.0 }},
'currency': '{{ shop.currency }}'
}]
}
});
{% endif %}
{% if template.name == 'index' %}
dataLayer.push({
'pageType': 'homepage',
'storeLanguage': '{{ shop.locale }}'
});
{% endif %}
{% if customer %}
dataLayer.push({
'customerEmail': '{{ customer.email }}',
'customerId': '{{ customer.id }}',
'customerTags': '{{ customer.tags }}'
});
{% endif %}
</script>
G-XXXXXXXXXXsend_page_view → truepurchasetransaction_id → {{DLV - transaction_id}}value → {{DLV - order_total}}currency → {{DLV - currency}}items → {{DLV - items}}purchase<script>
!function(f,b,e,v,n,t,s){...}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '{{Meta Pixel ID}}');
fbq('track', 'PageView');
</script>
purchase<script>
fbq('track', 'Purchase', {
value: {{DLV - order_total}},
currency: '{{DLV - currency}}',
content_ids: [{{DLV - product_ids}}],
content_type: 'product'
});
</script>
Create these DLV (Data Layer Variable) variables:
DLV - transaction_id → transactionIdDLV - order_total → orderTotalDLV - currency → currencyDLV - items → itemsDLV - product_ids → productIds// Variable Type: Custom JavaScript
// Name: CJS - Current Page Type
function() {
return document.body.getAttribute('data-page-type') || 'unknown';
}
| Trigger | Use Case |
|---|---|
| All Pages | GA4 config, Meta Pixel PageView |
| DOM Ready | Page-specific events needing DOM |
| Custom Event | Purchase, add_to_cart, etc. |
| Click - All Elements | CTA clicks |
| Click - Just Links | External link tracking |
| Form Submission | Newsletter, contact forms |
| Timer | Engagement time tracking |
| Scroll Depth | Content engagement |
GA4 - Event - PurchaseTag firing multiple times
Purchase not tracking
purchase event reaches GA4 via DebugViewSlow page speed from GTM
npx claudepluginhub vincent-laroche/hairsolutionsco-ai-toolkit --plugin analytics-adsCreates bite-sized, testable implementation plans from specs or requirements, with file structure and task decomposition. Activates before coding multi-step tasks.