@segment/analytics-browser-actions-google-campaign-manager 1.1.0

package/src/counterActivity/index.ts

@@ -0,0 +1,76 @@
+import type { BrowserActionDefinition } from '@segment/browser-destination-runtime/types'
+import type { Settings } from '../generated-types'
+import type { Payload } from './generated-types'
+
+const action: BrowserActionDefinition<Settings, Function, Payload> = {
+  title: 'Counter Activity',
+  description: 'Record non-monetary conversion data such as unique users, conversions, and session length.',
+  defaultSubscription: 'type = "track"',
+  platform: 'web',
+  fields: {
+    activityGroupTagString: {
+      label: 'Activity Group Tag String',
+      description:
+        'An identifier for the Floodlight activity group associated with this activity, which appears as a parameter in your tags. This value is case sensitive.',
+      type: 'string',
+      required: true
+    },
+    activityTagString: {
+      label: 'Activity Tag String',
+      description:
+        'An identifier for your Floodlight activity, which appears as a parameter in your tags. This value is case sensitive.',
+      type: 'string',
+      required: true
+    },
+    enableDynamicTags: {
+      label: 'Enable Dynamic Tags',
+      type: 'boolean',
+      description:
+        'In Campaign Manager, go to Floodlight -> Configuration, under Tags, if **Dynamic** is selected, select **True**.'
+    },
+    countingMethod: {
+      label: 'Counting Method',
+      type: 'string',
+      description: 'Specifies how conversions will be counted for this Floodlight activity.',
+      choices: [
+        { value: 'standard', label: 'Standard' },
+        { value: 'unique', label: 'Unique' },
+        { value: 'per_session', label: 'Per Session' }
+      ],
+      required: true
+    },
+    sessionId: {
+      label: 'Session ID',
+      description:
+        'Use this field to insert a unique session ID if you’re using counter tags with a per session counting methodology. The session ID tells Campaign Manager 360 to count only one event per session on your site.',
+      type: 'string'
+    },
+    uVariables: {
+      label: 'U Variables',
+      description:
+        'Custom Floodlight variables enable you to capture information beyond the basics (visits and revenue) that you can collect with standard parameters in your tags.',
+      type: 'object',
+      defaultObjectUI: 'keyvalue:only'
+    },
+    dcCustomParams: {
+      label: 'Custom Parameters',
+      description:
+        'You can insert custom data into event snippets with the dc_custom_params field. This field accepts any values you want to pass to Google Marketing Platform.',
+      type: 'object',
+      defaultObjectUI: 'keyvalue:only'
+    }
+  },
+  perform: (gtag, { payload, settings }) => {
+    const requestBody = {
+      allow_custom_scripts: payload.enableDynamicTags,
+      send_to: `${settings.advertiserId}/${payload.activityGroupTagString}/${payload.activityTagString}+${payload.countingMethod}`,
+      ...(payload.sessionId !== undefined &&
+        payload.countingMethod == 'per_session' && { session_id: payload.sessionId }),
+      ...payload.uVariables,
+      ...(payload.dcCustomParams !== undefined && { dc_custom_params: { ...payload.dcCustomParams } })
+    }
+    gtag('event', 'conversion', requestBody)
+  }
+}
+
+export default action

package/src/generated-types.ts

@@ -0,0 +1,16 @@
+// Generated file. DO NOT MODIFY IT BY HAND.
+
+export interface Settings {
+  /**
+   * In Campaign Manager, go to Floodlight -> Configuration, and Advertiser ID is located under the Configuration heading.
+   */
+  advertiserId: string
+  /**
+   * This feature can be disabled if you do not want the global site tag to allow personalized remarketing data for site users.
+   */
+  allowAdPersonalizationSignals: boolean
+  /**
+   * This feature can be disabled if you do not want the global site tag to set first party cookies on your site domain.
+   */
+  conversionLinker: boolean
+}

package/src/index.ts

@@ -0,0 +1,69 @@
+import type { Settings } from './generated-types'
+import type { BrowserDestinationDefinition } from '@segment/browser-destination-runtime/types'
+import { browserDestination } from '@segment/browser-destination-runtime/shim'
+import counterActivity from './counterActivity'
+import salesActivity from './salesActivity'
+
+declare global {
+  interface Window {
+    gtag: Function
+    dataLayer: any
+  }
+}
+
+export const destination: BrowserDestinationDefinition<Settings, Function> = {
+  name: 'Google Tag for Campaign Manager',
+  slug: 'actions-google-campaign-manager',
+  mode: 'device',
+
+  settings: {
+    advertiserId: {
+      description:
+        'In Campaign Manager, go to Floodlight -> Configuration, and Advertiser ID is located under the Configuration heading.',
+      label: 'Advertiser ID',
+      type: 'string',
+      required: true,
+      default: 'DC-'
+    },
+    allowAdPersonalizationSignals: {
+      description:
+        'This feature can be disabled if you do not want the global site tag to allow personalized remarketing data for site users.',
+      label: 'Allow Ad Personalization Signals',
+      type: 'boolean',
+      required: true,
+      default: true
+    },
+    conversionLinker: {
+      description:
+        'This feature can be disabled if you do not want the global site tag to set first party cookies on your site domain.',
+      label: 'Conversion Linker',
+      type: 'boolean',
+      required: true,
+      default: true
+    }
+  },
+
+  initialize: async ({ settings }, deps) => {
+    window.dataLayer = window.dataLayer || []
+    window.gtag = function () {
+      // eslint-disable-next-line prefer-rest-params
+      window.dataLayer.push(arguments)
+    }
+
+    window.gtag('set', 'allow_ad_personalization_signals', settings.allowAdPersonalizationSignals)
+    window.gtag('js', new Date())
+    window.gtag('config', settings.advertiserId, {
+      conversion_linker: settings.conversionLinker
+    })
+    const script = `https://www.googletagmanager.com/gtag/js?id=${settings.advertiserId}`
+    await deps.loadScript(script)
+    return window.gtag
+  },
+
+  actions: {
+    counterActivity,
+    salesActivity
+  }
+}
+
+export default browserDestination(destination)

package/src/salesActivity/generated-types.ts

@@ -0,0 +1,49 @@
+// Generated file. DO NOT MODIFY IT BY HAND.
+
+export interface Payload {
+  /**
+   * An identifier for the Floodlight activity group associated with this activity, which appears as a parameter in your tags. This value is case sensitive.
+   */
+  activityGroupTagString: string
+  /**
+   * An identifier for your Floodlight activity, which appears as a parameter in your tags. This value is case sensitive.
+   */
+  activityTagString: string
+  /**
+   * In Campaign Manager, go to Floodlight -> Configuration, under Tags, if **Dynamic** is selected, select **True**
+   */
+  enableDynamicTags?: boolean
+  /**
+   * Specifies how conversions will be counted for this Floodlight activity.
+   */
+  countingMethod: string
+  /**
+   * Use this field to insert a unique numerical identifier for each transaction.  Can be alphanumeric.
+   */
+  transactionId: string
+  /**
+   * Use this field to pass the revenue generated by a transaction. Typically the purchase price and value does not include taxes or shipping.
+   */
+  value: string
+  /**
+   *
+   *       Use this field to pass the number of items sold during a transaction:
+   *       - If you're counting each transaction as a single conversion, the value is 1.
+   *       - If you're counting each item sold during a single transaction as a separate conversion, insert the number of items sold as part of each transaction as the value.
+   *       - The value must be an integer greater than zero.
+   *
+   */
+  quantity: number
+  /**
+   * Custom Floodlight variables enable you to capture information beyond the basics (visits and revenue) that you can collect with standard parameters in your tags.
+   */
+  uVariables?: {
+    [k: string]: unknown
+  }
+  /**
+   * You can insert custom data into event snippets with the dc_custom_params field. This field accepts any values you want to pass to Google Marketing Platform.
+   */
+  dcCustomParams?: {
+    [k: string]: unknown
+  }
+}

package/src/salesActivity/index.ts

@@ -0,0 +1,98 @@
+import type { BrowserActionDefinition } from '@segment/browser-destination-runtime/types'
+import type { Settings } from '../generated-types'
+import type { Payload } from './generated-types'
+
+const action: BrowserActionDefinition<Settings, Function, Payload> = {
+  title: 'Sales Activity',
+  description: 'Record monetary data for conversions, such as cost and the number of items sold.',
+  defaultSubscription: 'type = "track"',
+  platform: 'web',
+  fields: {
+    activityGroupTagString: {
+      label: 'Activity Group Tag String',
+      description:
+        'An identifier for the Floodlight activity group associated with this activity, which appears as a parameter in your tags. This value is case sensitive.',
+      type: 'string',
+      required: true
+    },
+    activityTagString: {
+      label: 'Activity Tag String',
+      description:
+        'An identifier for your Floodlight activity, which appears as a parameter in your tags. This value is case sensitive.',
+      type: 'string',
+      required: true
+    },
+    enableDynamicTags: {
+      label: 'Enable Dynamic Tags',
+      type: 'boolean',
+      description:
+        'In Campaign Manager, go to Floodlight -> Configuration, under Tags, if **Dynamic** is selected, select **True**.'
+    },
+    countingMethod: {
+      label: 'Counting Method',
+      type: 'string',
+      description: 'Specifies how conversions will be counted for this Floodlight activity.',
+      choices: [
+        { value: 'transactions', label: 'Transactions' },
+        { value: 'items_sold', label: 'Items Sold' }
+      ],
+      required: true
+    },
+    transactionId: {
+      label: 'Transaction ID',
+      description: 'Use this field to insert a unique numerical identifier for each transaction.  Can be alphanumeric.',
+      type: 'string',
+      required: true,
+      default: {
+        '@path': '$.properties.order_id'
+      }
+    },
+    value: {
+      label: 'Value',
+      description:
+        'Use this field to pass the revenue generated by a transaction. Typically the purchase price and value does not include taxes or shipping.',
+      type: 'string',
+      required: true,
+      default: { '@path': '$.properties.total' }
+    },
+    quantity: {
+      label: 'Quantity',
+      description: `
+      Use this field to pass the number of items sold during a transaction:
+      - If you're counting each transaction as a single conversion, the value is 1.
+      - If you're counting each item sold during a single transaction as a separate conversion, insert the number of items sold as part of each transaction as the value.
+      - The value must be an integer greater than zero.
+      `,
+      type: 'integer',
+      required: true
+    },
+    uVariables: {
+      label: 'U Variables',
+      description:
+        'Custom Floodlight variables enable you to capture information beyond the basics (visits and revenue) that you can collect with standard parameters in your tags.',
+      type: 'object',
+      defaultObjectUI: 'keyvalue:only'
+    },
+    dcCustomParams: {
+      label: 'Custom Parameters',
+      description:
+        'You can insert custom data into event snippets with the dc_custom_params field. This field accepts any values you want to pass to Google Marketing Platform.',
+      type: 'object',
+      defaultObjectUI: 'keyvalue:only'
+    }
+  },
+  perform: (gtag, { payload, settings }) => {
+    const requestBody = {
+      allow_custom_scripts: payload.enableDynamicTags,
+      send_to: `${settings.advertiserId}/${payload.activityGroupTagString}/${payload.activityTagString}+${payload.countingMethod}`,
+      value: payload.value,
+      transaction_id: payload.transactionId,
+      quantity: payload.quantity,
+      ...payload.uVariables,
+      ...(payload.dcCustomParams !== undefined && { dc_custom_params: { ...payload.dcCustomParams } })
+    }
+    gtag('event', 'purchase', requestBody)
+  }
+}
+
+export default action

package/src/types.ts

@@ -0,0 +1,3 @@
+export type GTAG = {
+  gtag: Function
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "baseUrl": "."
+  },
+  "include": ["src"],
+  "exclude": ["dist", "**/__tests__"]
+}