1 | import Vue from 'vue'
|
2 |
|
3 |
|
4 | const adsbygoogle = {
|
5 | render (h) {
|
6 | return h(
|
7 | 'ins',
|
8 | {
|
9 | 'class': ['adsbygoogle'],
|
10 | style: this.adStyle,
|
11 | attrs: {
|
12 | 'data-ad-client': this.adClient,
|
13 | 'data-ad-slot': this.adSlot || null,
|
14 | 'data-ad-format': this.adFormat,
|
15 | 'data-ad-region': this.show ? this.adRegion() : null,
|
16 | 'data-ad-layout': this.adLayout || null,
|
17 | 'data-ad-layout-key': this.adLayoutKey || null,
|
18 | 'data-page-url': this.pageUrl ? this.pageUrl : null,
|
19 | 'data-analytics-uacct': this.analyticsUacct ? this.analyticsUacct : null,
|
20 | 'data-analytics-domain-name': this.analyticsDomainName ? this.analyticsDomainName : null,
|
21 | 'data-adtest': <%= options.test ? '\'on\'' : 'null' %>,
|
22 | 'data-adsbygoogle-status': this.show ? null : '',
|
23 | 'data-full-width-responsive': this.adFullWidthResponsive || null,
|
24 | },
|
25 | domProps: {
|
26 | innerHTML: this.show ? '' : ' '
|
27 | },
|
28 | key: Math.random()
|
29 | }
|
30 | )
|
31 | },
|
32 | props: {
|
33 | adClient: {
|
34 | type: String,
|
35 | default: '<%= options.id %>'
|
36 | },
|
37 | adSlot: {
|
38 | type: String
|
39 | },
|
40 | adFormat: {
|
41 | type: String,
|
42 | default: 'auto'
|
43 | },
|
44 | adLayout: {
|
45 | type: String
|
46 | },
|
47 | adLayoutKey: {
|
48 | type: String
|
49 | },
|
50 | adStyle: {
|
51 | type: Object,
|
52 | default () {
|
53 | return {
|
54 | display: 'block'
|
55 | }
|
56 | }
|
57 | },
|
58 | adFullWidthResponsive: {
|
59 | type: Boolean,
|
60 | default: false
|
61 | },
|
62 | pageUrl: {
|
63 | type: String
|
64 | },
|
65 | analyticsUacct: {
|
66 | type: String,
|
67 | default: '<%= options.analyticsUacct %>'
|
68 | },
|
69 | analyticsDomainName: {
|
70 | type: String,
|
71 | default: '<%= options.analyticsDomainName %>'
|
72 | },
|
73 | includeQuery: {
|
74 | type: Boolean,
|
75 | default: <%= options.includeQuery %>
|
76 | }
|
77 | },
|
78 | data () {
|
79 | return {
|
80 | show: true
|
81 | }
|
82 | },
|
83 | mounted () {
|
84 | this.showAd()
|
85 | },
|
86 | watch: {
|
87 | '$route' (to, from) {
|
88 | if (to.fullPath === from.fullPath) {
|
89 | return;
|
90 | }
|
91 | const keys = Object.keys
|
92 | const toQuery = to.query
|
93 | const fromQuery = from.query
|
94 | let changed = false
|
95 | if (to.path !== from.path) {
|
96 | changed = true
|
97 | } else if (this.includeQuery) {
|
98 | // If we include query params, check to see if they are loosely unequal
|
99 | changed = (keys(toQuery).length !== keys(fromQuery).length) || !keys(toQuery).every(k => toQuery[k] === fromQuery[k])
|
100 | }
|
101 | if (changed) {
|
102 | // If the route has changed, update the ad
|
103 | this.updateAd()
|
104 | }
|
105 | }
|
106 | },
|
107 | methods: {
|
108 | adRegion () {
|
109 | return 'page-' + Math.random()
|
110 | },
|
111 | updateAd () {
|
112 | if (this.isServer) {
|
113 | return
|
114 | }
|
115 | // Reset the INS element
|
116 | this.show = false
|
117 | // Show new ad on nextTick
|
118 | this.$nextTick(this.showAd)
|
119 | },
|
120 | showAd () {
|
121 | this.show = true
|
122 | this.$nextTick(() => {
|
123 | try {
|
124 | // Once ad container (<ins>) DOM has (re-)rendered, requesst a new advert
|
125 | (window.adsbygoogle = window.adsbygoogle || []).push({})
|
126 | } catch (error) {
|
127 | console.error(error)
|
128 | }
|
129 | })
|
130 | }
|
131 | }
|
132 | }
|
133 |
|
134 | // Register our ad component under the desired tag name
|
135 | Vue.component('<%= options.tag %>', adsbygoogle)
|