How to show Media.Net ads to Angular or React Application
There is a way to monetize our hard work to display ads to our web application. Most of us already aware of the Google Adsense monetization program, likewise Media.Net is another AdSense program is used to monetize web applications as well.
Best way to monetize Angular or React based application using Media.Net Advertizing program.
The most efficient and robust Adsense program is Google Adsense, I have already written a couple of blogs on that, feel free to check those out.
But here, I am going to discuss another AdSense program Media.Net which is also a very good option that comes after the google AdSense program for monetizing web applications. But the problem will be if you are having a Single Page Application (SPA) built by Angular, React, or Vue then you might face the same problem which I faced earlier. Let's discuss in detail what problem I have faced and how I can overcome those problems.
Step 1: Apply your web application URL to Media.Net for Approval
Once you get approval, you can create different types of Ad Units.
Step 2: Open each Ad unit and ask to add code snippets to your web application
Here you might face challenges to add units to your application as those code snippets are applicable for simple WordPress or HTML5 based applications. For Angular or react you need to customize it accordingly as Media.Net does not provide any library for Angular, React, or Vue yet.
Let's see How it can be customize for Angular application -
First add the code snippets to your index.html file, like below
<!-- Media.net Ads -->
<script type="text/javascript">
window._mNHandle = window._mNHandle || {};
window._mNHandle.queue = window._mNHandle.queue || [];
medianet_versionId = "VERSION_ID";
</script>
<script src="https://contextual.media.net/dmedianet.js?cid=CID_VALUE" async="async"></script>
Next, you need to create a componnet and add code accordingly -
ng g c media-ad
import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
declare const window;
@Component({
selector: 'app-media-ad',
templateUrl: './media-ad.component.html',
styleUrls: ['./media-ad.component.scss']
})
export class MediaAdComponent implements OnInit, AfterViewInit {
@ViewChild('mediaScript') mediaScript: ElementRef;
@Input() id: string;
@Input() size: string;
constructor() { }
ngOnInit(): void {
}
ngAfterViewInit(): void {
this.loadMediaAd();
}
loadMediaAd(): void {
if (window) {
try {
window._mNHandle.queue.push(() => {
window._mNDetails.loadTag(this.id, this.size, this.id);
});
} catch (error) { }
}
}
}
<div #mediaScript>
<div id='{{id}}'></div>
</div>
Call this component where ever you want to add Media.Net code to your content.
<app-media-ad id="AD_ID" size="728x90"></app-media-ad>
Check the if the ad is working properly or not.
Now, let's do the same for React Application (Applicable for Gatsby, Next.js)
For React application, please add the following code to your Helmet tag like below -
import React from "react";
import { Helmet } from "react-helmet";
const Head = () => {
return (
<div className="application">
<Helmet>
<script type="text/javascript">
window._mNHandle = window._mNHandle || { }; window._mNHandle.queue =
window._mNHandle.queue || []; medianet_versionId = "VERSION_ID";
</script>
<script
src="https://contextual.media.net/dmedianet.js?cid=CUSTOMER_ID"
async="async"
></script>
</Helmet>
{/* Rest of page */}
</div>
);
};
export default Head;
import React, { useEffect } from "react";
const MediaNetAds = ({ id, size }) => {
useEffect(() => {
if (typeof window !== "undefined") {
try {
window._mNHandle.queue.push(() => {
window._mNDetails.loadTag(id, size, id);
});
} catch (error) { }
}
}, [id, size]);
return (
<div className="mediaAdContainer">
<div id={id} />
</div>
);
};
export default MediaNetAds;
Now, you can call the MediaNetAds tag whereever you want to show Media.Net ads to your web application.
<div className="content">
<MediaNetAds id="AD_ID" size="728x90" />
</div>
Now you are ready to monetize your web application with Media.Net. If you want to share your ideas please comment below.
Happy Coding!
Loading comments...