Adobe I/O and Launch Lab

Table of Contents

1. Setting Up the Environment
2. Lesson Overview
3. Develop a Data Layer
4. Create a Launch Property
5. Setup Launch Publishing Environments
6. Implement the embed code
7. Data Elements and Rules
8. Create Data Element
9. Extensions
10. Add a new extension
11. Add the Analytics Extension
12. Create a Rule
13. Publishing Workflow
14. Install Context Hub
15. Publish to Staging
16. Validate the Changes in the Staging Library
17. Setup Contact Us Rule
18. Create an Analytics Trigger
19. Create & Upload Our Serverless Function
20. Create the Integration Between the Event & the Action

Setting Up the Environment

At the end of this lesson, you will:

• Have a locally-running web server
• Install Chrome Developer Tools
• Install Adobe Experience Cloud Debugger
• Choose a development editor for this lab
• Install node.js and aio

In order to work with Adobe, Launch and learn the basics of Tag Management and creating a data layer we first need a site to work with. We will be using a couple of sample websites that can be cloned in this repository.

You will also need a webserver to run the websites on either remote or locally (such as through IIS or Apache). If you don't have a local webserver running on your machine I would recommend this Chrome extension. This will allow you to browse to these local websites using your browser. You can certainly use whatever webserver you would like as long as you can edit and change the HTML of the files.

Within this repository, you should find the directory, /adobe_io. This directory contain webpages that we will be tagging. If you are using Web Server for Chrome you will need to select this directory as we go through the labs.

Since we will be editing HTML, you will want to have an integrated development environment (IDE) installed on your computer. I use Visual Studio Code which you can find here. Other options include NotePad++ or Eclipse.

For debugging purposes, we will install two tools. First, ensure that you have Chrome developer tools installed. Additionally, install the Experience Cloud Debugger. We will be using this to debug the Experience Cloud products.

For the I/O Runtime exercise, you will need to ensure you have node.js installed and aio. To install aio, after you have installed node.js run the following command in the terminal.

npm install -g @adobe/aio-cli

AIO will install OpenWhisk CLI. Verify that OpenWhisk is in your path by typing in wsk -h from the terminal.

Alternatively, OpenWhisk can be installed outlined in this documentation - https://adobedocs.github.io/adobeio-runtime/tools/wsk_install.html.

Lesson Overview

Each lesson contains how-to exercises and foundational information to help you implement the Adobe Experience Cloud and understand its value. Callouts are provided to highlight information which might be useful to customers migrating from our older tag manager - Dynamic Tag Manager (DTM). Demo sites are provided for you to complete the tutorial, so you can learn the underlying techniques in a safe environment. After completing this tutorial, you should be ready to start implementing all of your marketing solutions through Launch on your own website.

Develop a Data Layer

Objective In this lesson, you will learn some best practice for developing a data layer.

At the end of this lesson, you will be able to:

• Understand what a data layer is and how it can be used
• Work with a data layer in JavaScript
• Clone this repository in Visual Studio Code
• Debug the data layer in the Chrome developer tools

Develop a Data Layer

Objective In this lesson, you will learn some best practice for developing a data layer.

At the end of this lesson, you will be able to:

• Understand what a data layer is and how it can be used
• Work with a data layer in JavaScript
• Clone this repository in Visual Studio Code
• Debug the data layer in the Chrome developer tools

A data layer can be anything. It could be surfaced within HTML or within a JavaScript object. The latter is the broadly accepted method for creating a data layer. The W3C has published a standard for building a data layer. We will be using that standard for our exercise. It is strongly advised to have a corporate standard.

1. Start the Web Server for Chrome and make sure you have selected the "adobe_io/" folder in the setup window. .

2. Browse to http://127.0.0.1:8887/victory/index.html in your Chrome browser or the address of your local machine or webserver. You should see the home page and select Victory from the menu.

3. Using your chosen editor, open the home page to edit. If you are using Visual Studio Code, you can clone all the content on GitHub from within the editor. Begin by opening the editor, and clicking on the command palette in the lower left-hand corner. And, from the drop down at the top of the screen choose or type in Git:Clone.

4. The will provide you with a prompt for the URL to the repository. You will be able to find this on by scrolling up on this page. Toward the top of the page you will see a green button that says "Clone or download". Click on this and you will see a modal with the repository URL copy that and put it into the prompt within Visual Studio Code.

5. You should now have a project on the left-hand side with all the assets for this exercise.

6. Once you have all the assets, open the adobe_io/victory/ folder and index.html. This will open the page in an HTML editor. Copy the code block below. We will be using this to begin to build our data layer.

<script type="text/javascript">
    var digitalData = {
        pageInstanceID: "[Unique ID Include Environment]",
        page:{
            pageInfo: {
                pageID: "[Friendly Page Name for Reporting]",
                destinationURL: "[URL]"
            },
            category:{
                primaryCategory: "[Category]",
                subCategory1: "[Sub-Category]",
                pageType: "[Type of Page]"
            },
            attributes:{
                country: "[Country Code]",
                language: "[Localization]"
            }
        }
    };
</script>

7. This data layer is an inline JavaScript object. In-line JavaScript can be included anywhere on this page. This code snippet not only sets elements, but it also instantiates the data layer object (digitalData), so it will be important to have this as high on the page as possible. Put this code just above the closing </head> tag.

8. Once you have pasted the data layer, you can begin by replacing the placeholder values with meaningful data. For instance, for pageID: "[Friendly Page Name for Reporting]" let's update to reflect the actual name of the page. Something like pageID: "Home Page" would work for this page. Feel free update the other values as well.

9. Once you have completed this, let's move back to Chrome and to our Victory site. Let's do a hard refresh of the page by hitting F5 or ctrl+refresh button and open the Chrome Developer Tools by hitting F12 or…. In the developer tools, navigate to the Console section and type in the name of our data layer object "digitalData". This will print out the JavaScript object that is part of the DOM on the page. You should see the same values that you created when tagging the page.

Resources:

• https://theblog.adobe.com/data-layers-buzzword-best-practice/
• https://www.w3.org/2013/12/ceddl-201312

Create a Launch Property

Objective In this lesson, you will create your first Launch property.

A property is basically a container that you fill with extensions, rules, data elements, and libraries as you deploy tags to your site.

At the end of this lesson, you will be able to:

• Log into the Launch user interface
• Create a new Launch property
• Configure a Launch property

1. Log into the Experience Cloud.
2. Select Launch from the menu.
3. Under Launch, by Adobe, click the Go to Launch button.
4. You should now see the Properties screen (if no properties have ever been created in the account this screen might be empty):

NOTE: A property is a container that you fill with extensions, rules, data elements, and libraries as you deploy tags to your site. A property can be any grouping of one or more domains and subdomains. You can manage and track these assets similarly.

For example, suppose that you have multiple websites based on one template, and you want to track the same assets on all of them. You can apply one property to multiple domains. For more information on creating properties, read Companies and Properties in the product documentation or watch the Creating your first property video.

5. Click New Property.
6. Name your property (for example, “Victory [Your Name]”). As the domain, enter localhost.
7. Click Save.

Your new property should display on the Properties page. If you check the box next to the property name, options to Configure or Delete the property appear above the property list. Click on the name of your property to open the Overview screen.

Setup Environments

Lesson Context This lesson introduces two of the main concepts of Launch:

• Environments
• Embed Codes

New properties are created with three environments:

• Development
• Staging
• Production

These environments correspond to the typical stages in the code development and release process. If desired, you can add additional Development environments, which is common on larger teams with multiple developers working on different projects at the same time.

The embed code is a <script> tag that you put on the pages of your site to load and execute the logic you build in Launch. If you load the library asynchronously, the browser continues to load the page, retrieves the Launch library, and executes it in parallel. In this case, there is only one embed code, which you put in the <head>. When Launch is deployed synchronously, there are two embed codes, one which you put in the and another which you put before the </body>.

This lesson shows how to implement the asynchronous embed code of your Launch property's Development environment.

Objectives At the end of this lesson, you will be able to:

Obtain the embed code for your Launch property

• Understand the difference between a Development, Staging, and Production environment
• Add a Launch embed code to an HTML document
• Explain the optimal location of the Launch embed code in relation to other code in the of an HTML document

Setup environments

From the property Overview screen, click on the Environments tab to go to the environments page. Note that Development, Staging, and Production environments have already been created for you.

Development, Staging, and Production environments correspond to the typical environments in the code development and release process. Code is first written by developers in a Development environment. When they have completed their work, they send it to a Staging environment for QA and other teams to review. After the QA and other teams are satisfied, the code is published to the Production environment, which is the public-facing environment which your visitors experience when they come to your website.

Launch permits additional Development environments, which is useful in large organizations where multiple developers work on different projects at the same time.

These are the only environments needed to complete the tutorial. Environments allow you to have different working versions of your Launch libraries hosted at different URLs, so you can safely add new features and make them available to the right users (such as developers, QA engineers, the public, and so on) at the right time

1. In the Development row, click the Install icon to open the modal. Note: Launch defaults to the asynchronous embed codes.
2. Click the copy icon to copy the installation code to your clipboard.
3. Click Close to close the modal.

Implement the embed code

The embed code should be implemented in the <head> element of all HTML pages that share the property. You might have one or several template files that control the <head> globally across the site, making it a straightforward process to add Launch.

<!--Launch Header Embed Code: PASTE JUST ABOVE CLOSING </HEAD> TAG ON HOME PAGE-->

<script src="https://assets.adobedtm.com/launch-ENa21cfed3f06f4ddf9690de8077b39e81-development.min.js" async></script>

<!--/Launch Header Embed Code-->

Note: Use the embed code from your property and not the example above.

Open your web browser’s developer tools and go to the Network tab. At this point, you should see a 404 error for the Launch environment URL:

The 404 error is expected because you haven't built a library in this Launch environment yet. You will do that in the next lesson. If you see a "failed" message instead of a 404 error, you probably forgot to add the https:// protocol in the embed code. Again, you only need to specify the https:// protocol if you are loading the sample page using the file:// protocol. Make that change and reload the page until the 404 error appears.

Launch implementation best practices

Review some of the Launch implementation best practices that are demonstrated in the sample page:

• JavaScript helper libraries: If you already have a library like JQuery implemented in the of your pages, load it before Launch in order to leverage its syntax in Launch and Target.
• HTML5 doctype: The HTML5 doctype is required for Target implementations.
• preconnect and dns-prefetch: Use preconnect and dns-prefetch to improve the page load time. See also: https://w3c.github.io/resource-hints/.
• Pre-hiding snippet for asynchronous Target implementations: To manage content flicker when Target is deployed via asynchronous Launch embed codes, you should hardcode a pre-hiding snippet on your pages before the Launch embed codes. This is discussed in the Target tutorial.

Data Elements and Rules

This lesson introduces some of the main concepts of Launch:

• Data elements: Store the attributes you want to send to your marketing and advertising solutions
• Rules: Fire the requests to those solutions under the right conditions
• Libraries: JavaScript files that load on the page to do all of the work

Data elements and rules are the basic building blocks of Launch.

Note: New data element types have been added to Launch, which did not exist in DTM. Some of the new data element types include Local Storage, Session Storage, Page Info, and Random Number

This lesson uses all three of these items to make the sample page perform an action.

Objective

At the end of this lesson, you will be able to:

• Create a data element
• Create a rule
• Create a library
• Add changes to a library
• Validate that your library is loading in your web browser
• Use the Working Library feature to work more efficiently

Create Data Element

Data elements are Launch’s version of a data layer. They can store values from your own data layer object, cookies, local storage objects, query string parameters, page elements, meta tags, and so on.

Note: Data element capabilities can be extended with Extensions. For example, the ContextHub extension allows you to add data elements using features of the extension.

This exercise shows how to create a data element for Page Name, which will be used later in the Target and Analytics implementations.

1. In the top navigation, click Data Elements. Because you haven’t created any data elements yet in this property, a brief video appears with additional information on this topic. Watch this video, if you like.

2. Click Create New Data Element.

3. Name the data element (for example, "Page Name").

4. Use the JavaScript Variable Data Element type to point to a value in your sample page's data layer: digitalData.page.pageInfo.pageName.

5. Use not available as the Default Value. The Default Value tells Launch what value to use for the data element if your JavaScript Variable specified above is not found.

6. Check the boxes for Force lowercase value and Clean text to standardize the case and remove extraneous spaces.

7. Leave None as the Storage Duration setting, because this value is typically different on every page.

8. Save the data element.

Extensions

An extension is a packaged set of code that extends the Launch interface and the library functionality. Launch is the platform, and extensions are like apps that run on the platform.

Adding an extension adds new data elements and new options for creating rules.

Extensions determine the elements that are available when building properties, rules, and data elements. They provide:

• Events, conditions, and exceptions
• Data elements
• JavaScript

Use the links at the top of the Extensions list to view installed extensions, the extensions catalog, or updates.

Select an extension, then click Configure to view and change the extension's settings.

Important: Changes do not take effect until they are published.

By default, Adobe provides extensions that support common integrations. Extensions can be modified with custom configurations. Configurations are provided through the extensions. To create a configuration, click the extension card, then click Add New Configuration.

Extension catalog

Use the extension catalog to browse, configure, and deploy marketing and advertising technology built and maintained by independent software vendors, as well as extensions for Adobe solutions.

The Extensions page provides three views:

• Installed: Shows all of your installed extensions.
• Catalog: Shows all available extensions
• Updates: Shows updates to installed extensions.

Click Extensions to see all your installed extensions. You can also use the catalog to see a list of all available extensions and which extensions have updates available.

Add a new extension

Launch is highly extendible. Extensions add core functionality to Launch.

A common use of extensions is to create integrations with other applications. In the previous version of Launch, known as Dynamic Tag Management, extensions were called tools.

1. From a property's overview page, open the Extensions tab.
2. Select an extension.

3. If the extension exists, select it from the extensions catalog.
4. Mouse over an extension in your list to configure or disable it.
5. Add other extensions from the catalog if they are not currently in your list.

The Core extension is the starting point for your new extension. The default extension provides:

1. Default event
2. Default conditions and exceptions
3. Default JavaScript These defaults are the basis for the custom rules you'll build to create your extension.

Add the Analytics Extension

The Analytics extension consists of two main parts:

• The extension configuration, which manages the core AppMeasurement.js library settings and can set global variables
• Rule actions to do the following:
  • Set Variables
  • Clear Variables
  • Send the Analytics Beacon

1. Go to Extensions > Catalog and locate the Adobe Analytics extension.
2. Click Install.
3. Under Library Management > Report Suites, enter the report suite IDs you want to use with each Launch environment. For this exercise we are using zgeo1xxpnw.adobe.io.lab.

Note: Use the Manage the library for me option as the Library Management setting. This makes it much easier to keep the core AppMeasurement.js code up-to-date.

4. Under General > Tracking Server, enter your tracking server (for example, tmd.sc.omtrdc.net). Enter your SSL Tracking Server if your site supports https://.

5. In the Global Variables section, set the Page Name variable using your Page Name data element, then click the Data Element icon to open the modal and choose the page Page Name data element.
6. Click Save to Library and Build.

Note: Global variables can be set in the extension configuration or in rule actions. Be aware that when setting variables with the extension configuration, the data layer must be defined before the Launch embed codes.

Create a Rule

Next, use the data element you created in a simple rule. Rules are one of the most powerful features in Launch. They tell specifically what happens when a visitor interacts with your website. When the criteria outlined in your rules are met, the rule triggers the specified action.

Use the following steps to create a rule that outputs the Page Name data element value to the browser console.

1. In the top navigation, click Rules. Because you haven’t created any rules yet in this property, a brief video appears with additional information on the topic. Watch this video, if you like.
2. Click Create New Rule.
3. Click the Create New Rule button​

3. Name the Rule (for example, "All Pages - Page Bottom"). This name uses a convention that indicates where and when the rule will fire, which makes it easier to identify and reuse as your Launch property matures.

4. Under Events, click Add.

The Event tells Launch when the rule should fire and can be many things, including a page load, a click, a custom JavaScript event, and so on.

5. As the Event Type, select Library Loaded (Page Bottom). When you select the Event Type, Launch pre-populates a name for the event using your selection. The default order for the event is 50. Ordering is a powerful feature in Launch that gives you precise control over the sequence of actions when multiple rules are triggered by the same event. This feature is used later in the tutorial.
6. Click Keep Changes.

7. To fire this rule on all pages, leave Conditions blank. If you open the Conditions modal, you will see that conditions can add both restrictions and exclusions based on a large variety of options, including URLs, data element values, date ranges, and more.
8. As the Action Type, select custom code. At this point, this is the only option. Later in the tutorial, as you add extensions, more options will become available.

Select Open Editor, then add the following to the code window:console.log('The page name is '+_satellite.getVar('Page Name'));

​ ​ ​

10. Save the code window.
11. On the Action configuration screen, click Keep Changes.
12. Save the rule.

Note for DTM Migrators

In Launch, rules are required in order to fire most marketing pixels. For example, in order to fire the Adobe Analytics Beacon, we must use a Rule to instruct Launch to do so.The Rule builder has been dramatically redesigned and rebuilt in Launch. Some of the main changes are:

• There is just one Rule builder. DTM rule-types like "Page Bottom", "Click", and "Direct Call" are all just event-types in the Rule builder. This makes it much easier to update a rule should you need to change the trigger from, say, a DOM Ready event to a custom event.
• There is a new "Custom Code" event-type
• Extensions can add new event types to the Rule builder. For example, the Target extension could eventually add built-in support for its at.js custom events, so custom code wouldn't be needed to use this feature.
• Extensions can add new actions to the Rule builder, reducing issues by deprecating reliance on custom code. You will be using many of these extension actions in this Tutorial.
• Rules are required to fire requests associated with most marketing tools. This will require a mindset adjustment, especially for things like setting Customer IDs, firing Analytics beacons, and firing the global mbox.

Publishing Workflow

After you have implemented some key solutions of the Adobe Experience Cloud in your Development environment, it's time to learn the publishing workflow.

Objectives At the end of this tutorial, you will be able to:

• Publish a Development library to the Staging environment
• Map a Staging library to your production website using the Debugger
• Publish a Staging library to the Production environment

Save the rule to a library

After configuring a collection of extensions, data elements, and rules in the Launch interface, you need to package these capabilities and logic into a set of JavaScript code that you can deploy on your website so marketing tags fire when visitors come to the site. A library is the set of JavaScript code that does this.

In an earlier lesson, you implemented the embed code of your development environment on the sample page. When you loaded the sample page a 404 error was returned for the embed code URL because a Launch library had not been built yet and assigned to the environment. In this tutorial, you will put your new data element and rule in a library so that your sample page can do something.

1. Go to the Publishing tab and click Add New Library.

​

2. Name the library "Initial Setup."
3. Select _Environment > Development.
4. Click _Add All Changed Resources. Launch summarizes the changes you just made.
5. Click Save & Build for Development

After a few moments, the status turns green, indicating the library built successfully.

Validate your rule

To validate that your rule is working as expected, reload your sample page. If you look at the Developer Tools > Network tab, you should see a 200 response for your Launch Library.

You have created your first data element and rule, and built your first Launch library.

Use the Working Library feature

When you are making a lot of changes in Launch, it is inconvenient to have to open the Publishing tab, add changes, and build the library each time you want to see the result. After you have created your Initial Setup library, you can use the Working Library feature to rapidly save your changes and rebuild the library in a single step.

1. Make a small change to the All Pages - Library Loaded rule.
2. In the top navigation, click Rules and then click on the All Pages - Library Loaded rule to open it.

​

3. On the Edit Rule page, click the Select an option dropdown to show the Working Library options. Select your Initial Setup library.

​

After you select the library, the Save button defaults to Save to Library and Build. When you make a change in Launch, you can use this option to automatically add the change directly to your working library and rebuild it.

4. To test this feature, open your Custom Code action and add a colon after the text "The page name is" so the entire code block reads:

console.log('The page name is: ' + _satellite.getVar('Page Name'));

5. Save the code, keep the changes in the action, and click Save to Library and Build.

​

6. Wait a moment until the green status reappears next to the Working Library dropdown, then reload your sample page. You should see your change reflected in the console message. (You might need to clear your browser cache and reload to see the change to the page.

This is a much faster way of working. The rest of the implementation tutorials use this approach.

Install Context Hub

When we originally setup our data element, we had to ensure that the same syntax created in code was repeated in the data element. If there was a typo in either the data layer or the creation the data element the the data element would cease to work and the rule using that data element would stop functioning. This tightly coupled setup is something that should be avoided.

The context hub was initially built to integrate Launch, Analytics and Experience Manager, however, the same functionality can be used outside of AEM.

Objective At the end of this tutorial, you will be able to:

• Create a schema from a data layer
• Use that schema in a data element

1. Go to Extensions > Catalog and locate the Context Hub extension.
2. Click Install.
3. Click Configure on the Context Hub Extension.
4. In the configuration section choose Customized ContextHub Data Layer and enter your the root of the data layer JavaScript object.

window.digitalData

Note: This will tell the ContextHub Launch extension where within the current instance of the webpage to find the data layer object instatiated.

5. Click </> Open Editor

In the editor we want to paste the schema of our data layer. To create a schema based on a JSON object let's use an online json-to-schema converter.

6. Copy the data layer object below and paste it into the converter and click Generate Schema.

{
    pageInstanceID: "[Unique ID Include Environment]",
    page:{
        pageInfo: {
            pageID: "[Friendly Page Name for Reporting]",
            destinationURL: "[URL]"
        },
        category:{
            primaryCategory: "[Category]",
            subCategory1: "[Sub-Category]",
            pageType: "[Type of Page]"
        },
        attributes:{
            country: "[Country Code]",
            language: "[Localization]"
        }
    }
}

Note: The object above is the same object from the earlier exercise without the details declaring the object equal to a variable. A schema is a description of the data and the data model. By providing the extention with the schema we are simply telling it what data is available and how it is structured.

7. Copy the newly generated schema into the extension. Navigate back to the extension and paste schema into the extension's editor.

8. Click Save and Save to Build the Library.

Edit Data Element

1. Navigate to Data Elements and into the Page Name data element.

2. Change the Extension Type to Adobe ContextHub.

3. Select Data Element Type to Context Hub.

4. Select page.pageInfo.pageID in Data item.

5. Click Save to Build Library.

Setup Analytics Tracking

1. Navigate back into the rule and into the Action Configuration.

2. Select the Adobe Analytics from the Extensions dropdown.

3. Select Set Variables from the Action Type dropdown.

4. Add the Page Name data element into the Page Name section of the variable configuration.

5. Click Keep Changes.

6. Add another action to action configuration.

7. Select the Adobe Analytics from the Extensions dropdown.

8. Select Send Beacon from the Action Type dropdown and s.t() within the configurations screen.

9. Click Keep Changes.

10. Build the Library.

Publish to Staging

After you have created and validated your library in the Development environment, it is time to publish it to Staging.

1. Go to the Publishing page.

2. Open the drop down next to your library and select Submit for Approval.

3. Click Submit. Your library appears in the Submitted column in an unbuilt state.

4. Open the drop down and select Build for Staging.

Once the green-dot icon appears, the library can be previewed in the Staging environment.

In a real-life scenario, the next step in the process would typically be to have your QA team validate the changes in the Staging library. They can do this using the Debugger.

Validate the Changes in the Staging Library

1. In your Launch property, open the Environments page.

2. In the Staging row, click the Install icon.

3. Click the Copy icon to copy the embed code to your clipboard, then click Close.

4. Open the our demo site in your Chrome browser.

5. Open the Experience Cloud Debugger extension.

6. Open the Tools tab and click Adobe Launch > Dynamically Insert Launch > Embed Code to open the text input field (it might currently have the URL of your Development embed code):

7. Paste the Staging embed code that is in your clipboard, then click the disk icon to save.

8. Reload and check the Summary tab of the Debugger. Under the Launch section, you should see that your Staging Property is implemented, showing your property name (for example, "Launch Tutorial" or whatever you named your property).

In real life, once your QA team has signed off by reviewing the changes in the Staging environment, it is time to publish to production.

Publish to Production

1. Go to the Publishing page, then from the dropdown, click Approve for Publishing:

Setup Contact Us Rule

Using the step above add a data layer and Launch embed code to the contact.html

1. Create a new rule within your property. Name this property Form Submit.

2. Within the configuration you want to select Core extension and an Event Type of Click. On the right configuration section type .btn within the Elements matching the CSS selector. This will tell Launch to fire this rule when the button is clicked. Click Keep Changes.

Note: There are several different ways to approach a form submit event. If the form had some JavaScript validation, you could tie the event to the form submit event.

3. After saving, click Actions and choose the Adobe Analytics extension and Action Type of Set Variables.

4. Choose a custom event from the Events section. Custom events begin with event1 and increment by 1. Let's make this a unique event by developer.

5. Set the Page Name variable and eVar1 variable to the page name data element and click Keep Changes.

Note: An Analytics event is fundamentally in integer inside of Adobe Analytics. It increments by 1 unless it is a numeric event that can increment by any preset amount. Revenue on and eCommerce site is a numberic event. For us, we will use this event within our setup of Analytics Triggers.

6. Create an New Action Configuration that sends the Analytics beacon.

Create an Analytics Trigger

An Analytics Trigger is an Adobe I/O specially designed to listen for predifined variables and to trigger based on a state. A trigger can be defined based on an action happening, and abandonment such as a cart, or a session beginning or ending. For this exercise we will choose Actions under New Triggers dialogue.

1. Navigate to Launch home page and choose Triggers.

2. Choose Adobe IO Lab report suite.

3. From the events menu select a unique event from the list and drag it to the the Visit Must include section. The definition should be event X exists.

4. In the Include Meta Data add Form Name.

Create & Upload Our Serverless Function

We will be using the OpenWhisk CLI to work with Adobe IO Runtime. You can verify if you have OpenWhisk install and in your path by typing in wsk -h in the terminal.

1. In the terminal, move to the /src directory. We will be using the main.js for this portion of our project. Open the file and you will see that its a very simple class that uses a module to send a web push message. This file current contains an endpoint that will generate a push message on my computer. The enable it to run on yours browse to the root of your locally hosted website. Accept the prompt to receive notifications. Click the button to Enable Push Messaging. You will see a subscription object that you can copy to your clickboard.

2. Paste the copied object to your main.js.

Now you can run this code by typing in node main.js into your terminal.

2. Let's edit this file for uploading to Runtime. Find the following lines:

//test code
let args = {message: "hello"}; 
main(args);

Comment these lines out. They are unecessary except for testing the code.

3. In order to authenticate using OpenWhisk, copy the wskprop.txt to your home directory and name .wskprops. From the terminal you can do this by typing:

cp wskprops.txt ~/.wskprops

To validate this step you should be able to type in wsk list and see:

$ wsk list
Entities in namespace: worshop-ace
packages
actions
triggers
rules

3. To use this function in Runtime we will need the node_modules as well as the main.js. Zip together the following files and folders:

   • /node_modules
   • main.js
   • package.json

Name the new zip file push[Your Name].zip

3. Type the following command into your terminal to create an action from this function:

wsk action create push[Your Name] --kind nodejs:10 push[Your Name].zip --web true

4. To invoke this action on Runtime you can run the following command:

wsk action invoke --result push[Your Name] --param message <your name>

5. We can also access this action from your browser. Use the command `wsk action get push[Your Name] --url' to get the url for your action. You can now invoke this action by putting the returned url and the parameter into your browser.

https://adobeioruntime.net/api/v1/web/worshop-ace/default/push[Your Name]?message=[your message]

Create the Integration Between the Event & the Action

Now that we have our Runtime action and our Analytics Trigger created we need to point the Trigger to the Action. We will you the I/O Console to faciliate this. Adobe I/O Console gives you access to APIs, SDKs and developer tools to build on, integrate, and extend Adobe products.

1. Navigate to https://console.adobe.io/home and click on Create Integration.

2. Choose Receive near-real time events and click Continue.

3. Choose Analytics Triggers and click Continue.

4. Create a private key from the terminal.

openssl req -x509 -sha256 -nodes -days 365 -newkey rsa:2048 -keyout private.key -out certificate_pub.crt

This will give you two files. For more in on certificates for Adobe I/O.

https://www.adobe.io/authentication/auth-methods.html#!AdobeDocs/adobeio-auth/master/JWT/JWTCertificate.md

5. Let's now register our IO action. From the terminal run wsk action get push[Your Name] --url. This will give us the http endpoint that we can use to invoke our action. Copy the URL and paste into the form.

6. Click Send sample event.

7. Click Save.

At this point you should be able to complete you Contact Us form and hit Send Message. That will trigger and Analytics Trigger which will use this new Integration to send you a push message.