✨ Added UI for AMP GA Tracking ID (#1638)

refs https://github.com/TryGhost/Ghost/pull/12039

Adds the initial UI for setting the `amp_gtag_id` setting

app/controllers/settings/integrations/amp.js

@@ -1,6 +1,5 @@
 /* eslint-disable ghost/ember/alias-model-in-controller */
 import Controller from '@ember/controller';
-import {alias} from '@ember/object/computed';
 import {inject as service} from '@ember/service';
 import {task} from 'ember-concurrency';
 
@@ -10,11 +9,9 @@ export default Controller.extend({
 
     leaveSettingsTransition: null,
 
-    ampSettings: alias('settings.amp'),
-
     actions: {
         update(value) {
-            this.set('ampSettings', value);
+            this.settings.set('amp', value);
         },
 
         save() {
@@ -62,13 +59,9 @@ export default Controller.extend({
     },
 
     save: task(function* () {
-        let amp = this.ampSettings;
-        let settings = this.settings;
-
-        settings.set('amp', amp);
-
         try {
-            return yield settings.save();
+            yield this.settings.validate();
+            return yield this.settings.save();
         } catch (error) {
             this.notifications.showAPIError(error);
             throw error;

app/models/setting.js

@@ -25,6 +25,7 @@ export default Model.extend(ValidationEngine, {
     password: attr('string'),
     slack: attr('slack-settings'),
     amp: attr('boolean'),
+    ampGtagId: attr('string'),
     unsplash: attr('unsplash-settings', {
         defaultValue() {
             return {isActive: true};

app/templates/settings/integrations/amp.hbs

@@ -32,7 +32,7 @@
 
         <div class="gh-setting-header gh-first-header">AMP configuration</div>
         <div class="flex flex-column br4 shadow-1 bg-grouped-table pa8 mt2">
-            <div class="gh-setting-first gh-setting-last">
+            <div class="gh-setting-first">
                 <div class="gh-setting-content">
                     <div class="gh-setting-title">Enable AMP</div>
                     <div class="gh-setting-desc">Enable <a href="https://ampproject.org" target="_blank">Google Accelerated Mobile Pages</a> for your posts</div>
@@ -42,7 +42,7 @@
                         <label for="amp" class="checkbox">
                             <input
                                 type="checkbox"
-                                checked={{this.ampSettings}}
+                                checked={{this.settings.amp}}
                                 id="amp"
                                 name="amp"
                                 onclick={{action "update" value="target.checked"}}
@@ -53,6 +53,27 @@
                     </div>
                 </div>
             </div>
+            {{#liquid-if this.settings.amp}}
+            <div class="gh-setting-last">
+                <div class="gh-setting-content gh-setting-content--no-action">
+                    <div class="gh-setting-title">Google Analytics Tracking ID</div>
+                    <div class="gh-setting-desc">Tracks AMP traffic in Google Analytics, find your ID <a href="https://ghost.org/faq/how-to-find-your-google-analytics-tracking-id/">here</a></div>
+                    <div class="gh-setting-content-extended">
+                        <GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="ampGtagId">
+                            <GhTextInput
+                                @placeholder="UA-XXXXXXX-X"
+                                @name="amp_gtag_id"
+                                @value={{this.settings.ampGtagId}}
+                                @keyEvents={{hash
+                                    Enter=(action "save")
+                                }}
+                            />
+                            <GhErrorMessage @errors={{this.settings.errors}} @property="ampGtagId"/>
+                        </GhFormGroup>
+                    </div>
+                </div>
+            </div>
+            {{/liquid-if}}
         </div>
     </section>
 </section>