Project Description

[DevCEDTeam]

Email Tracking Events

Step-by-step guide on how to enable the Cloud Functions API, set up the local development environment, write the entire index.js file, deploy the Cloud Function to Google Cloud, set up Mautic Form event tracking, set up email open pixel tracking, set up a Google Analytics Dashboard, and test the tracking with sample codes.

Step 1: Enable the Cloud Functions API

1. Open the Cloud Console: https://console.cloud.google.com/
2. Select your project or create a new one.
3. In the sidebar, click on "APIs & Services" > "Library".
4. Search for "Cloud Functions API".
5. Click on "Cloud Functions API" from the results.
6. Click on the "Enable" button.

Step 2: Set up the local development environment

1. Install Node.js and npm (Node Package Manager) if you haven't already.
2. Create a new directory for your project.
3. Open a terminal or command prompt and navigate to the project directory.
4. Run the following command to initialize a new Node.js project:

   npm init -y

5. Install the required dependencies by running the following command:

   npm install axios

Step 3: Write the entire index.js file in the project directory Create a new file named index.js in your project directory and add the following code:

const axios = require('axios');

exports.MauticProxy = async (req, res) => {
  // Extract the query parameters
  const { action, hash, contactId, email, eventName, eventData, tag, field, fieldValue } = req.query;

  if (action === 'trackEvent' && email) {
    await sendEvent(email, eventName, eventData)
      .then(() => res.send('All OK'))
      .catch((err) => res.status(400).end(err));
  } else if (action === 'trackEvent' && contactId) {
    console.log('Getting contact info');
    await getEmail(contactId)
      .then((data) => sendEvent(data, eventName, eventData))
      .then(() => res.send('Sent event'))
      .catch((err) => res.status(400).end(err));
  } else if (action === 'trackEvent' && hash) {
    console.log('Getting contact info from hash');
    await getEmailHash(hash)
      .then((data) => sendEvent(data, eventName, eventData))
      .then(() => res.send('Sent event'))
      .catch((err) => res.status(400).end(err));
  } else {
    console.log(action);
    res.status(400).end();
  }
};

async function sendEvent(email, eventName, eventData) {
  return new Promise((resolve, reject) => {
    const url = 'https://trackcmp.net/event';
    const data = `actid=${ACTID}&key=${EVENTKEY}&event=${eventName}&eventdata=${eventData}&visit=%7B%22email%22%3A%22${encodeURIComponent(email)}%22%7D`;
    axios
      .post(url, data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
      .then((res) => {
        resolve(res);
      })
      .catch((error) => {
        reject(error);
      });
  });
}

async function getEmail(contactId) {
  return new Promise((resolve, reject) => {
    const url = `${APIURL}/api/3/contacts/${contactId}`;
    axios
      .get(url, { headers: { Authorization: `Bearer ${APIKEY}` } })
      .then((res

) => {
        resolve(res.data.email);
      })
      .catch((error) => {
        reject(error);
      });
  });
}

async function getEmailHash(hash) {
  return new Promise((resolve, reject) => {
    const url = `${APIURL}/api/3/contacts?search=${hash}`;
    axios
      .get(url, { headers: { Authorization: `Bearer ${APIKEY}` } })
      .then((res) => {
        if (res.data.total === 1) {
          resolve(res.data.contacts[0].email);
        } else {
          reject(`No contact found for hash: ${hash}`);
        }
      })
      .catch((error) => {
        reject(error);
      });
  });
}

Note: Replace the placeholders ACTID, EVENTKEY, APIURL, and APIKEY with your actual values.

Step 4: Deploy the Cloud Function to Google Cloud

1. Open a terminal or command prompt and navigate to your project directory.
2. Authenticate with Google Cloud by running the following command and following the instructions:

   gcloud auth login

3. Set your project by running the following command and replacing YOUR_PROJECT_ID with your actual project ID:

   gcloud config set project YOUR_PROJECT_ID

4. Deploy the Cloud Function by running the following command:

   gcloud functions deploy mauticProxy --runtime nodejs14 --trigger-http --allow-unauthenticated

5. Once the deployment is successful, note down the URL of the deployed Cloud Function.

Step 5: Set up Mautic Form event tracking

1. Open Mautic and navigate to the form you want to track.
2. Go to the "Actions" tab of the form editor.
3. Add a new action of type "Send HTTP Request".
4. Set the URL to the URL of your Cloud Function, appended with the following query parameters:

   ?action=trackEvent&email={contactfield=email}&eventName=FormSubmit&eventData=formId:{formid},formName:{formname}

5. Save the form.

Step 6: Set up email open pixel tracking

1. In your email template, add an image element with the following source URL:

   https://<your-cloud-function-url>?action=trackEvent&email={contactfield=email}&eventName=EmailOpen&eventData=emailId:{emailid},emailName:{emailname}

   Note: Replace <your-cloud-function-url> with the URL of your Cloud Function.

2. Set the image dimensions to 1x1 pixel or any desired size.
3. Save the email template.

Step 7: Set up Google Analytics Dashboard

1. Open Google Analytics and navigate to your property.
2. Go to "Customization" > "Dashboards".
3. Click on "Create" > "Blank Canvas".
4. Add widgets to your dashboard to visualize the data you want to track.
5. Save the dashboard.

Step 8: Test the tracking with sample codes You can test the tracking using the following sample codes and UTM query strings:

Sample code for Mautic form event:

<form action="https://<your-cloud-function-url>?action=trackEvent" method="GET">
  <input type="hidden" name="eventName" value="FormSubmit">
  <input type="hidden" name="eventData" value="formId:123,formName:ContactForm">
  <!-- Add form fields here -->
  <button type="submit">Submit</button>
</form>

Sample code for email open pixel:

<img src="https://<your-cloud-function

-url>?action=trackEvent&eventName=EmailOpen&eventData=emailId:123,emailName:WelcomeEmail" width="1" height="1" alt="Email Open Pixel">

Note: Replace <your-cloud-function-url> with the URL of your Cloud Function.

That's it! You have now set up Mautic Form event tracking, email open pixel tracking, and a Google Analytics Dashboard using Google Cloud Functions. You can further customize and expand the tracking functionality as needed.

[DevCEDTeam]

Tracking Mautic Form Events

To build and develop for Mautic Form events and email open pixel events through UTM query strings linked by a URL link trigger to Google Tag Manager and a data stream of a Google Analytics Dashboard using Google Cloud Functions, you can follow these step-by-step instructions:

Step 1: Set up a new Google Cloud project

1. Go to the Google Cloud Console (https://console.cloud.google.com/).
2. Create a new project or select an existing project.

Step 2: Enable required APIs

1. In the Google Cloud Console, go to the "APIs & Services" > "Library" page.
2. Search for and enable the following APIs:
   • Google Cloud Functions API
   • Google Identity and Access Management (IAM) API

Step 3: Set up authentication

1. In the Google Cloud Console, go to the "APIs & Services" > "Credentials" page.
2. Click "Create credentials" and select "Service account key".
3. Choose the appropriate service account and key type, then click "Create".
4. Download the JSON key file and note the location.

Step 4: Install and set up the Google Cloud SDK

1. Install the Google Cloud SDK by following the instructions for your operating system (https://cloud.google.com/sdk/docs/install).
2. Authenticate the SDK using the JSON key file downloaded in the previous step:

   gcloud auth activate-service-account --key-file=[PATH_TO_JSON_KEY_FILE]

Step 5: Create a new Cloud Function

1. Create a new directory for your Cloud Function code.
2. Inside the directory, create a file named package.json with the following content:

   {
    "name": "cloudfunction",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "author": "",
    "license": "ISC",
    "dependencies": {
      "axios": "^0.21.0"
    }
   }

3. Create a file named index.js and paste the provided code into it.

Step 6: Deploy the Cloud Function

1. Open a command prompt or terminal and navigate to the directory containing your Cloud Function code.
2. Deploy the Cloud Function using the following command:

   gcloud functions deploy mauticProxy --runtime nodejs14 --trigger-http --allow-unauthenticated

   This will deploy the function with the name "mauticProxy" and make it accessible via an HTTP trigger.

Step 7: Configure Google Tag Manager

1. Set up a new tag in Google Tag Manager to send events to the Cloud Function.
2. Use the URL of the deployed Cloud Function as the destination for the tag.
3. Add the necessary UTM query parameters to the URL to pass event data. Example: https://REGION-PROJECT_ID.cloudfunctions.net/mauticProxy?action=trackEvent&email={{Email}}&eventName={{EventName}}&eventData={{EventData}}

Step 8: Configure Mautic Event and Pixel

1. Create a new Mautic Event with the appropriate configuration.
2. Configure the event to trigger when the corresponding URL link trigger is clicked.
3. Include the UTM query parameters in the URL to pass data to the Cloud Function.

Step 9: Verify events in Google Analytics

1. Set up a data stream in Google Analytics to receive events from Google Tag Manager.
2. Create a new dashboard in Google Analytics to visualize the events.

That's it! You have now set up the infrastructure to track Mautic Form events and email open pixel events through UTM query strings linked by a URL link trigger to Google Tag Manager. The events

[DevCEDTeam]

//