Configure Google Ads, Facebook Ads, Google Analytics, and GTM for Prymium-Web. Use when: setting up ad tracking, adding conversion pixels, configuring Google Tag Manager, moving analytics credentials to environment variables, adding Facebook Pixel, creating remarketing tags.
GTM-NKSQN8Npages/_app.jsx via react-gtm-module<Script> in src/hooks/useSEO.jsx (DUPLICATE — remove one)GTM is the single container for ALL tracking tags. Google Ads, Facebook Pixel, and Google Analytics should be configured as tags inside GTM, not as separate scripts.
8323542pages/_document.jsx as //js.hs-scripts.com/8323542.jsCredentials are currently hardcoded. They should be moved to .env.local:
# .env.local (DO NOT commit)
NEXT_PUBLIC_GTM_ID=GTM-NKSQN8N
NEXT_PUBLIC_HUBSPOT_ID=8323542
NEXT_PUBLIC_FB_PIXEL_ID=<your-pixel-id>
NEXT_PUBLIC_GA_MEASUREMENT_ID=<your-ga4-id>
The NEXT_PUBLIC_ prefix makes them available in browser code (required for client-side analytics).
Google Ads conversion tracking is configured inside GTM, not in code. The coding steps are:
In components where conversions happen (contact form, product views):
// Push event to GTM dataLayer
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'form_submit',
form_name: 'contacto',
});
| Event Name | Trigger | Where |
|---|---|---|
page_view | Auto (GTM handles) | All pages |
view_item | Product detail loaded | pages/tienda/detalle/[modelo].jsx |
view_item_list | Category page loaded | pages/tienda/[group].jsx |
form_submit | Contact form sent | src/components/ContactForm.jsx |
click_phone | Phone number clicked | Contact page |
click_whatsapp | WhatsApp link clicked | Contact page |
| Tag Type | Trigger | Notes |
|---|---|---|
| Google Ads Conversion | form_submit event | Tracks contact form as conversion |
| Google Ads Remarketing | All Pages | Builds audience for remarketing |
| GA4 Configuration | All Pages | Sends pageviews to GA4 |
| GA4 Event — view_item | view_item event | Enhanced ecommerce |
| GA4 Event — view_item_list | view_item_list event | Enhanced ecommerce |
Facebook Pixel is also configured inside GTM:
// Standard Facebook events via dataLayer
window.dataLayer.push({
event: 'fb_view_content',
content_name: product.title,
content_category: product.category,
content_ids: [product.id],
content_type: 'product',
value: product.price,
currency: 'GTQ',
});
| Tag Type | Trigger | Facebook Event |
|---|---|---|
| FB Pixel — PageView | All Pages | PageView |
| FB Pixel — ViewContent | fb_view_content | ViewContent |
| FB Pixel — Lead | form_submit | Lead |
In GTM, create a Custom HTML tag:
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '{{FB Pixel ID}}');
fbq('track', 'PageView');
</script>
Trigger: All Pages. Replace {{FB Pixel ID}} with a GTM variable pointing to the Facebook Pixel ID.
| Platform | URL | Use for Ads |
|---|---|---|
| https://www.facebook.com/lavatrastosprymium | Facebook & Instagram Ads | |
| https://www.instagram.com/lavatrastosprymium/ | Instagram Ads (via Facebook) | |
| YouTube | https://www.youtube.com/@lavatrastosprymium6962 | YouTube Ads (via Google Ads) |
| Google Business | Search "Lavatrastos Prymium" on Google Maps | Local campaigns |
.env.localCopy .env.example and fill in real values. Never commit .env.local.
_app.jsxconst tagManagerArgs = {
id: process.env.NEXT_PUBLIC_GTM_ID
}
useSEO.jsxRemove the duplicate GTM <Script> tag entirely — GTM is loaded once in _app.jsx.
_document.jsx<script type="text/javascript" id="hs-script-loader" async defer
src={`//js.hs-scripts.com/${process.env.NEXT_PUBLIC_HUBSPOT_ID}.js`}>
</script>
| File | Change |
|---|---|
pages/_app.jsx | Use process.env.NEXT_PUBLIC_GTM_ID instead of hardcoded ID |
src/hooks/useSEO.jsx | Remove duplicate GTM script |
pages/_document.jsx | Use process.env.NEXT_PUBLIC_HUBSPOT_ID for HubSpot |
src/components/ContactForm.jsx | Add dataLayer push for form_submit event |
.env.example | Template with all required env vars |
.env.local | Actual values (never committed) |
.gitignore | Ensure .env.local is listed |