🚀Magic Boost - Integration and Tracking

With Magic Boost, we can track offers via either 'Pixel Integration', 'Post-Back URL' or making an API call.

We have successfully integrated with Impact.com and AppsFlyer. Therefore, if you are using AppsFlyer or Impact.com, this guide is not necessary.

Using a Post-Back URL to Track Conversions

When a user clicks on an affiliate link generated through the Magic Boost Platform, they are redirected to your landing page.

This URL carries a 'visit id' that associates the current user with an affiliate account.

The URL will appear like this: https://URL.com?vid=<Your visit id>.

The subsequent step involves saving the visit ID to the browser's cookies so that it can be utilized across the entire website.

Save VisitID
// Check for 'vid' in URL parameter
const paramsVid = new URLSearchParams(window.location.search).get('vid');

// If the 'vid' is not saved in the cookies, we save it
if (paramsVid && document.cookie.indexOf('vid=') === -1) {
  document.cookie = "vid=" + paramsVid + "; path=/;";
}

  • This code must execute as soon as the user arrives at your landing page or website, without any conditions.

  • Following this, you will need to create a 'getCookie' method to extract the relevant cookie:

GetCookie
function getCookie(cookieName) {
  var cookieString = RegExp(cookieName + "=[^;]+").exec(document.cookie);
  return decodeURIComponent(!!cookieString ? cookieString.toString().replace(/^[^=]+./, "") : "");
}

  • Now when we have the VisitID, we will define 2 actions/events/goals for the campaign and set the tracking.

    • Actions/Events/Goals can include:

      1. User Registration:

        • Registration with email or connection of a wallet

      2. User App Installation:

        • Can be an Android or iOS app

      3. User KYC Verification

      4. User Deposit

      5. User Trading:

        • Can involve any token or a specific token

      6. User Purchasing:

        • Can involve any token, a specific token, or NFT

      7. User Swapping:

        • Can involve any token or a specific token

      8. User Staking:

        • Can involve any token or a specific token

      And any other measurable performance actions.

Define and Set Tracking for “First Action”

We will illustrate this with the following example: 'User Registers and Connects a Wallet'."

function registerLead() {
  const baseUrl = 'https://magic.lol/4bbad3f1';
  const vid = getCookie('vid');

  if (vid) {
    fetch(`${baseUrl}/brokers/pixel?action=3&vid=${vid}`)
      .then((result) => {
        // Successful request
        alert("Request was sent, Thank you.");
      })
      .catch((err) => {
        // Failed request
        console.error("Failed to register");
      })
  } else {
    // Cookie doesn't exist
  }
}

“?action=3” - this denotes the action for Registration.

Define and Set Tracking for “Second Action”

We will illustrate this with the following example: 'User needs to Purchase X amount of Tokens'.

const depositBtn = document.getElementById('deposit');
const baseUrl = 'https://magic.lol/4bbad3f1';

depositBtn.addEventListener("click", () => {
  // Retrieve the visit id from the cookies
  const vid = getCookie('vid');

  if(vid) {
    fetch(`${baseUrl}/brokers/pixel?action=7&vid=${vid}`)
      .then((result) => {
        // Call was created successfully
        console.log("Call was created successfully");
      })
      .catch((err) => {
        // Call failed
        console.error("Call failed");
      })
  } else {
    // Cookie doesn't exist
    console.warn("vid cookie doesn't exist");
  }
});

“?action=7” - this represents the second action, such as buy/swap, etc.

So, the offer here would be:

  1. Upon clicking the link, visits to the landing page or offer are counted.

  2. The second action is triggered when the user registers successfully.

  3. The third action is completed when the user successfully purchases X amount of tokens.

Prerequisites: Before you begin, make sure you have:

  • A basic understanding of JavaScript.

  • Access to your website's frontend and backend codebase.

Frontend Implementation

Obtain the vid Parameter: When a user is redirected to your website, a vid parameter will be included in the URL. You need to extract this parameter.

const urlParams = new URLSearchParams(window.location.search);
const vid = urlParams.get('vid');

You can integrate our script, https://api38.magicsquare-web.com/vid.js, on your page. This script retrieves the 'VID' from the LP URL and saves it into a browser cookie.

Pixels

The pixel script retrieves the visit id from the cookies and sends it to us. This enables our platform to recognize that a Registration or a Deposit event has occurred.

Important:

You can incorporate our script, https://api38.magicsquare-web.com/pixel.js, on your 'success registration' page. This script takes the 'VID' from the cookies and sends it to our CRM.

Alternatively, you can devise your own method to send a registration pixel with visit_id to the CRM endpoint: 

GET https://magic.lol/4bbad3f1/brokers/pixel?action=3&vid={visit_id}

Fire the Pixel: Once you have the vid, you can proceed to fire the pixel by making an HTTP GET request to your backend.

if (vid) {
    fetch('https://yourbackend-api.com/?vid=' + vid, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(res => res.json())
    .then(result => {
        // Handle your response
        if (result.success) {
            console.log("Pixel registered successfully");
        } else {
            console.log("Failed to register the pixel");
        }
    })
    .catch(error => {
        console.log('Pixel failed:\n' + error);
    });
}

Backend Implementation

Extract the vid Parameter: In your backend, you'll need to extract the vid parameter from the incoming request.

const url = require('url');
const { parse } = require('querystring');

// Parse the request URL
const parsedUrl = url.parse(request.url);

// Extract the query parameters
const query = parse(parsedUrl.query);
const vid = query.vid;

The pixels to implement based on the different events you want to track:

  1. Click Pixel - Place on the Initial Landing Page:

<script src="https://api38.magicaffiliates.io/vid.js"></script>

  1. Lead/Registration Pixel - Place on the Success/Thank you Page to track registrations:

<script src="https://api38.magicaffiliates.io/vid.js"></script> <script src="https://api38.magicaffiliates.io/pixel.js"></script>

  1. SALE/Purchase Pixel - Place on the Success/Thank you Page to track sales/conversions:

<script src="https://api38.magicaffiliates.io/vid.js"></script>

<script src="https://api38.magicaffiliates.io/pixel_deposit.js"></script>

Important Notes

  1. For the Lead or Sale pixels (Registration or Deposit), we need to receive the identical visit_id. This way, we can confirm that the action was undertaken during the current visit.

  2. Browser cookies are tied to a specific domain. If your Landing Page (LP) is on domain X but the registration/deposit script is on domain Y, it's impossible to transfer the visit_id through cookies.

  3. In such a scenario, you can transfer the VID from domain X to domain Y as a URL parameter (like Y?vid={visit_id}). Subsequently, on your registration (or deposit) page, add vid.js before pixel.js (or pixel_deposit.js). This script takes the vid URL and saves it into a browser cookie.

Make an API Call to MagicBoost

Once you have the vid, you can also make an API call to MagicBoost to register the pixel.

if (vid) {
    fetch('https://magic.lol/4bbad3f1/pixel?action=3&vid=' + vid, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(res => {
        if (res.status === 200) {
            return {success: true, result: 'Pixel registered successfully'};
        } else {
            return {success: false, result: 'Failed to register the pixel'};
        }
    });
}

Pixel Types:

  • CPPA Pixels: Use action=7 in the API URL.

  • CPPL Pixels: Use action=3 in the API URL.

That's it! You've successfully implemented the MagicBoost Pixel in both the frontend and the backend. If you have any further questions or run into issues, feel free to reach out for support.

PreviousEnhancing Onboarding Experience with Magic SquareNextDeveloper Support

Last updated