angularjs - Google AdSense ads in Angular 2 components? -


i'm trying load responsive ads in adcomponent in app. component dead simple:

import { component } '@angular/core'; import { form_directives, core_directives } '@angular/common';  @component({   selector: 'ad',   templateurl: 'app/views/ad.html',   directives: [ form_directives, core_directives ] }) export class adcomponent {}

ad.html:

<div class="demo-card-wide mdl-card mdl-shadow--2dp ad-card">   <div class="mdl-card__supporting-text">     <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>     <ins class="adsbygoogle"         style="display:block"         data-ad-client="ca-pub-0123456789"         data-ad-slot="0123456789"         data-ad-format="rectangle, horizontal"></ins>     <script>     (adsbygoogle = window.adsbygoogle || []).push({});     </script>   </div> </div>

i'm finding these script tags don't make ui , this seems purposeful decision.

i might able move around of code such js reference head of index.html , window.adsbygoogle part component constructor i'm not sure if these kinds of modifications allowed or if there's better alternative these ads work in angular 2.

does have experience google's adsense ads working in angular 2? there different, proper way this?

here's i've come , have working. admit may stretching "don't modify our code" rule of adsense, doing best keep heart of code doing same thing it's supposed doing:

// ad component import { component, afterviewinit } '@angular/core'; import { form_directives, core_directives } '@angular/common';  @component({   selector: 'ad',   templateurl: 'app/views/ad.html',   directives: [ form_directives, core_directives ] }) export class adcomponent implements afterviewinit {    ngafterviewinit() {     try {       (adsbygoogle = window.adsbygoogle || []).push({});     } catch (e) {}   } }  // ad.html <div class="demo-card-wide mdl-card mdl-shadow--2dp ad-card">   <div class="mdl-card__supporting-text">     <ins class="adsbygoogle" style="display:inline-block;width:330px;height:120px" data-ad-client="my_client_number" data-ad-slot="my_ad_slot_number"></ins>   </div> </div>

the design of website has ads in material design lite cards that's 2 outer divs in view. <ins> tag cut , paste same tag adsense gave me.

i used afterviewinit because seems adsense watches array adsbygoogle know when scan new ad in dom. don't want modify array until dom has <ins> tag.

i wrapped line in try/catch because testing ad blocker showed component throw error when blocker turned on. in traditional pages error happen without side effects. in angular 2 page stops change detection.

i have done best keep spirit of adsense provided code supposed , how intended behave. goal bring out-of-date requirements functional angular 2 application. works fine in angular 2's rc4 across browsers.

here's hoping don't see tos break...

to typescript agree you'll need add few lines .d.ts file:

declare interface window {   adsbygoogle: any[]; }  declare var adsbygoogle: any[];

these make typescript accept (adsbygoogle = window.adsbygoogle || []).push({}); line in ad component.


-

Popular posts from this blog

php - How should I create my API for mobile applications (Needs Authentication) -

background so i've been researching quite bit past week api's , have been reading concepts , programming one. currently have website programmed in php using popular framework called laravel. website has user database , users able log dashboard on website, works want website side. now next project of business i'm focusing on creating mobile applications (ios & andriod).what need these mobile applications being able login through application ui (not being redirected site callback url) able view , manage dashboard. the method of authentication , authorization want use application go like client asks user login through ui user enters credentials client sends request login api the api checks if credentials correct api creates token stored in token database linked user id api returns 200 ok json response or this { "token" : "ols25usjiay81hdy81", "expiry" : 3/06/2016 14:00} client remembers token , expiry whenever user/c...
Read more

python 3.x - PyQt5 - Signal : pyqtSignal no method connect -

following example in doc found on sourceforge faced error. from pyqt5.qtcore import pyqtsignal, pyqtslot def setsignal(): signal = pyqtsignal() signal.connect(self.myaction) @qtcore.pyqtslot() def myaction(): print("signal triggered") results in attributeerror: 'pyqt5.qtcore.pyqtsignal' object has no attribute 'connect' as mentioned in docs linked, signal needs defined on class level: class foo(qobject): signal = pyqtsignal() def connectsignal(): self.signal.connect(self.myaction) @qtcore.pyqtslot() def myaction(): print("signal triggered")
Read more

5 Reasons to Blog Anonymously (and 5 Reasons Not To)

Image
This guest post is by Phil (not his real name) of somehighschoolblog . It used to be impossible to run a business anonymously. Sure, some authors could pull it off, but if you worked at an office, what were you supposed to do? Go to work with a bag over your head? But today anyone can accomplish this, because anyone can author a blog (and you thought I was going to tell you to work with a mask on, or something). Copyright Ovidiu Iordachi - Fotolia.com Depending on your motives, you may or may not have considered blogging anonymously. You probably didn’t contemplate blogging anonymously if: • your only motivation is to become “famous” • your blog connects to another part of your life • you are blogging to build more connections with your friends or boss. You should consider blogging anonymously if: • you’re planning on touching on a sensitive or taboo subject • you don’t want to be identified with your blog • you are worried about negative real-world consequences that could arise from y...
Read more