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_KEYString MAILCHIMP_API_SERVERString MAILCHIMP_AUDIENCE_IDString

Authors

• Mattias Bylin @pandalabco

Documentation

For GTM Tracking:

Initizalize:

1. Import package with import { GTMFunctions } from "next-melos-deps";

2. 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();
    }
  }, []);

3. 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:

1. You need to add the envs:

MAILCHIMP_API_KEY
MAILCHIMP_API_SERVER
MAILCHIMP_AUDIENCE_ID

2. 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