Implement Google remarketing

2019-05-06 11:21:19 +02:00
parent d0f0557aeb
commit 6fea91ae26
6 changed files with 156 additions and 49 deletions
@@ -66,11 +66,13 @@
                type: Boolean,
                default: false
            },
-            fbPixelData: {
-                type: Object,
-                default () {
-                    return {}
-                }
+            busProId: {
+                type: Number,
+                default: 0
+            },
+            nameInternal: {
+                type: String,
+                default: ''
            },
            daytrip: {
                type: Number,
@@ -93,7 +95,7 @@
                this.detailShow = false;
                let query = {};
                query[this.argumentPrefix + '[filterSettings]'] = this.filterSettings;
-                $.post(this.uris['dates'], query, (json) => {
+                $.post(this.uris['dates'], query, json => {
                    if (json.dates.length === 1) {
                        this.singleDate = true;
                        let dateRow = json.dates[0];
@@ -116,7 +118,7 @@
                this.detailShow = false;
                let query = {};
                query[this.argumentPrefix + '[product]'] = this.filterSettings;
-                $.post(this.uris['dateslist'], query, (json) => {
+                $.post(this.uris['dateslist'], query, json => {
                    if (json.dates.length === 1) {
                        this.singleDate = true;
                        let dateRow = json.dates[0];
@@ -151,12 +153,13 @@
                let query = {};
                query[this.argumentPrefix + '[filterSettings]'] = this.filterSettings;
                query[this.argumentPrefix + '[date]'] = dateUid;
-                $.post(this.uris['pricetable'], query, (json) => {
+                $.post(this.uris['pricetable'], query, json => {
                    this.priceTableRows = json.priceTable;
                    this.dateStart = dayjs(json.dateStart).format('DD.MM.YYYY');
                    this.dateEnd = dayjs(json.dateEnd).format('DD.MM.YYYY');
                    this.servicesIncluded = json.servicesIncluded;
                    this.loading = false;
+                    this.trackConversion();
                    EventBus.$emit('tableLoaded');
                }, 'json');
            },
@@ -179,6 +182,31 @@
            },
            scrollToMain () {
                EventBus.$emit('scrollTo', '#main');
+            },
+            trackConversion () {
+                const dataLayer = window.dataLayer || [];
+                dataLayer.push({
+                    'google_tag_params': {
+                        'travel_destid': this.busProId,
+                        'travel_originid': this.busProId,
+                        'travel_pagetype': 'offerdetails',
+                        'travel_startdate': this.dateStart,
+                        'travel_enddate': this.dateEnd,
+                        'travel_totalvalue': this.calculateMinPriceFromPriceTable() + '.00 EUR'
+                    }
+                });
+            },
+            calculateMinPriceFromPriceTable () {
+                let minPrice = 0;
+                for (let index in this.priceTableRows) {
+                    if (!this.priceTableRows.hasOwnProperty(index)) {
+                        continue;
+                    }
+                    if (minPrice === 0 || this.priceTableRows[index].roomPrice < minPrice) {
+                        minPrice = this.priceTableRows[index].roomPrice;
+                    }
+                }
+                return minPrice;
            }
        },
        created () {
@@ -17,7 +17,8 @@
            }'
            argument-prefix='<ep:argumentPrefix pluginName="Ajax" />'
            :hotel-first="{f:if(condition: settings.hotelOnTop, then: 'true', else: 'false')}"
-            :fb-pixel-data="{ productUid: <f:format.raw>{product.busProId}</f:format.raw>, nameInternal: '<f:format.raw>{product.nameInternal}</f:format.raw>' }"
+            :bus-pro-id="{product.busProId -> f:format.raw()}"
+            name-internal="{product.nameInternal -> f:format.raw()}"
            :daytrip="{product.daytrip -> v:variable.convert(type: 'int')}"
            inline-template>
            <article>
@@ -235,7 +236,7 @@
                                </div>
                            </div>
                        </div>
-                        <facebook-pixel :values="{ content_ids: [ fbPixelData.productUid ], content_name: fbPixelData.nameInternal, content_type: 'product' }"></facebook-pixel>
+                        <facebook-pixel :values="{ content_ids: [ busProId ], content_name: nameInternal, content_type: 'product' }"></facebook-pixel>
                    </div>
                </div>
            </article>
@@ -14,6 +14,8 @@
                        <f:link.action action="xml" arguments="{reseller: reseller}" target="_blank">Export XML</f:link.action>
                        <h2>Gesamtexport CSV (Facebook)</h2>
                        <f:link.action action="csv" arguments="{reseller: reseller}" target="_blank">Export CSV</f:link.action>
+                        <h2>Gesamtexport CSV (Google)</h2>
+                        <f:link.action action="csv" arguments="{reseller: reseller, type: 'google'}" target="_blank">Export CSV</f:link.action>
                        <h2>Einzelexport für Copy&amp;Paste</h2>
                        <ul>
                            <f:for each="{products}" as="product">