next-melos-dep
Betabox, Panda Lab, and Red Balloon Media collaborate on a code dependency packed with essential features for app development: streamlined uploads, notifications, SEO, and more.
Features
- GTM Tracking
- Mailchimp Audience Signup
Environment Variables
To run this project, you will need to add the following environment variables to your .env file
SECRET
Next-auth secret for authentication.
NODE_ENV
production or development
NEXT_PUBLIC_GTM_ID
String
NEXT_PUBLIC_FACEBOOK_ANALYTICS_TOKEN
String
NEXT_PUBLIC_FACEBOOK_PIXEL_ID
String
NEXT_PUBLIC_FACEBOOK_ANALYTICS_TEST_ID
String
MAILCHIMP_API_KEY
String
MAILCHIMP_API_SERVER
String
MAILCHIMP_AUDIENCE_ID
String
Authors
- Mattias Bylin @pandalabco
Documentation
For GTM Tracking:
Initizalize:
-
Import package with
import { GTMFunctions } from "next-melos-deps";
-
Add the next snippert:
const data = {
frameworks: [
{ active: true, name: "google" },
{ active: false, name: "facebook" }
]
};
useEffect(() => {
if (process.env.NODE_ENV === "production") {
localStorage.setItem("melos-analytics", JSON.stringify(data));
GTMFunctions.initAnalytics();
}
}, []);
- If its set up correctly you should see this message:
🚀 ~ file: index.ts:74 ~ InitializeGTMGA4 ~ InitializeGTMGA4
Track Page Views: Import GTMFunctions and render this on _app.tsx or in a specific layout.tsx component.
<GTMFunctions.Pageinitializer />
CustomEvent Triggering: Import GTM and in a function trigger this with whatever info you want to include...
AnalyticsEvent({
eventName: "purchase",
userId: "123",
ecommerce: {
transaction_id: "T_17",
affiliation: "Google Merchandise Store",
value: 25.42,
tax: 4.9,
shipping: 5.99,
currency: "USD",
coupon: "SUMMER_SALE",
items: [
{
item_id: "SKU_12345",
item_name: "Stan and Friends Tee",
affiliation: "Google Merchandise Store",
coupon: "SUMMER_FUN",
currency: "USD",
discount: 2.22,
index: 0,
item_brand: "Google",
item_category: "Apparel",
item_category2: "Adult",
item_category3: "Shirts",
item_category4: "Crew",
item_category5: "Short sleeve",
item_list_id: "related_products",
item_list_name: "Related Products",
item_variant: "green",
location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
price: 9.99,
quantity: 1,
},
],
},
})
MailChimp:
- You need to add the envs:
MAILCHIMP_API_KEY
MAILCHIMP_API_SERVER
MAILCHIMP_AUDIENCE_ID
- Add a api request on the next js project and use the Mailchimp.mailchimp(email) function to subscribe users
Release Notes
1.2.2 (2023-10-02)
- Added MailChimp Signup with email
1.1.0 (2023-10-02)
- Added GTM Tracking Support
1.0.0 (2023-09-15)
- Created Dependancy