51黑料不打烊

3.5.2 Create your Campaign

Go to . Click Journey Optimizer.

Translations

You鈥檒l be redirected to the Home view in Journey Optimizer. First, make sure you鈥檙e using the correct sandbox. The sandbox to use is called --aepSandboxName--.

ACOP

NOTE
In case you have already created your Header and Footer fragments as part of exercise exercise 3.1.2.1 and exercise 3.1.2.2, please jump forward to exercise 3.5.2.3 Create Fiber campaign. Do not create your Header and Footer fragments again.

3.5.2.1 Create your Header fragment

In the left menu, click Fragments. A Fragment is a reusable component within Journey Optimizer, which avoids duplication and facilitates future changes that should impact all messages, such as changes to a header or footer in an email message.

Click Create fragment.

ACOP

Enter the name --aepUserLdap-- - CitiSignal - Header and select the Type: Visual Fragment. Click Create.

ACOP

You鈥檒l then see this. In the left menu, you鈥檒l find the structure components that you can use to define the structure of the email (rows and columns).

Drag and drop a 1:1 column from the menu into the canvas. This will be the placeholder for the logo image.

Journey Optimizer

Next, you can use Content Components to add content inside these blocks. Drag and drop an Image component in the first cell on the first row. Click Browse.

Journey Optimizer

You鈥檒l then see a popup opening, showing you your AEM Assets Media Library. Go to the folder citi-signal-images, click to select the image CitiSignal-Logo-White.png and click Select.

NOTE
If you don鈥檛 see the Citi Signal images in your AEM Assets Library, you can find them here. Download them to your desktop, create the folder citi-signal-images and upload all the images in that folder.

Journey Optimizer

You鈥檒l then see this. Your image is white, and isn鈥檛 showing yet. You should now define a background color to make the image show correctly. Click Styles, then click the Background color box.

Journey Optimizer

In the popup, change the Hex color code to #8821F4 and then change focus by clicking into the 100% field. You鈥檒l then see the new color applied to the image.

Journey Optimizer

The image is also a bit to big right now. Let鈥檚 change the width by sliding the Width switcher to 40%.

Journey Optimizer

Your header fragment is now ready. Click Save and then click the arrow to go back to the previous screen.

Journey Optimizer

Your fragment needs to be published before it can be used. Click Publish.

Journey Optimizer

After a couple of minutes, you鈥檒l see that you fragment鈥檚 status has changed to Live.
Next, you should create a new fragment for the footer of your email messages. Click Create fragment.

Journey Optimizer

Click Create fragment.

Journey Optimizer

Enter the name --aepUserLdap-- - CitiSignal - Footer and select the Type: Visual Fragment. Click Create.

Journey Optimizer

You鈥檒l then see this. In the left menu, you鈥檒l find the structure components that you can use to define the structure of the email (rows and columns).

Drag and drop a 1:1 column from the menu into the canvas. This will be the placeholder for the footer content.

Journey Optimizer

Next, you can use Content Components to add content inside these blocks. Drag and drop an HTML component in the first cell on the first row. Click the component to select it and then, click the </> icon to edit the HTML source code.

Journey Optimizer

You鈥檒l then see this.

Journey Optimizer

Copy the below HTML code fragment and paste it in the Edit HTML window in Journey Optimizer.

<!--[if mso]><table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td style="text-align: center;" ><![endif]-->
<table style="width: auto; display: inline-block;">
  <tbody>
    <tr class="component-social-container">
      <td style="padding: 5px">
        <a style="text-decoration: none;" href="https://www.facebook.com" data-component-social-icon-id="facebook">

        </a>
      </td>
      <td style="padding: 5px">
        <a style="text-decoration: none;" href="https://x.com" data-component-social-icon-id="twitter">

        </a>
      </td>
      <td style="padding: 5px">
        <a style="text-decoration: none;" href="https://www.instagram.com" data-component-social-icon-id="instagram">

        </a>
      </td>
    </tr>
  </tbody>
</table>
<!--[if mso]></td></tr></table><![endif]-->

You鈥檒l then have this. On lines 7, 12 and 17 you now need to insert a image file, using the assets in your AEM Assets library.

Journey Optimizer

Make sure that your cursor is located on line 7, and then click Assets in the left menu. Click Open asset selector to select your image.

Journey Optimizer

Open the folder citi-signal-images and click to select the image Icon_Facebook.png. Click Select.

Journey Optimizer

Make sure that your cursor is located on line 12, and then click Open asset selector to select your image.

Journey Optimizer

Open the folder citi-signal-images and click to select the image Icon_X.png. Click Select.

Journey Optimizer

Make sure that your cursor is located on line 17, and then click Open asset selector to select your image.

Journey Optimizer

Open the folder citi-signal-images and click to select the image Icon_Instagram.png. Click Select.

Journey Optimizer

You鈥檒l then see this. Click Save.

Journey Optimizer

You鈥檒l then be back in the editor. Your icons aren鈥檛 visible yet because the background and the image files are all in white. To change the background color, go to Styles and click the Background color checkbox.

Journey Optimizer

Change the Hex color code to #000000.

Journey Optimizer

Change the alignment to be centered.

Journey Optimizer

Let鈥檚 add some other parts to the footer. Drag and drop an Image component above the HTML component you just created. Click Browse.

Journey Optimizer

Click to select the image file CitiSignal_Footer_Logo.png and click Select.

Journey Optimizer

Go to Styles and click the Background color checkbox, let鈥檚 change it to black again. Change the Hex color code to #000000.

Journey Optimizer

Change the width to 20% and verify that the alignment is set to be centered.

Journey Optimizer

Next, drag and drop a Text component under the HTML component you created. Click Browse.

Journey Optimizer

Copy and paste the below text by replacing the placeholder text.


1234 N. South Street, Anywhere, US 12345

Unsubscribe

漏2024 CitiSignal, Inc and its affiliates. All rights reserved.

Set the Text alignment to be centered.

Journey Optimizer

Change the Font color to white, #FFFFFF.

Journey Optimizer

Change the Background color to black, #000000.

Journey Optimizer

Select the text Unsubscribe in the footer, and click the Link icon in the menu bar. Set the Type to External Opt-out/Unsubscription and set the url to https://aepdemo.net/unsubscribe.html (it鈥檚 not allowed to have a blank URL for the unsubscribe link).

Journey Optimizer

You鈥檒l then have this. Your footer is now ready. Click Save and then click the arrow to go back to the previous page.

Journey Optimizer

Click Publish to publish your footer so it can be used in an email.

Journey Optimizer

After a couple of minutes, you鈥檒l see that the status of your footer has changed to Live.

Journey Optimizer

3.5.2.3 Create Fiber campaign

You鈥檒l now create a campaign. Unlike the event-based journey of the previous exercise which relies on incoming experience events or audience entries or exits to trigger a journey for 1 specific customer, campaigns target a whole audience once with unique content like newsletters, one-off promotions, or generic information or periodically with similar content sent on a regular basis like for instance birthday campaigns and reminders.

In the menu, go to Campaigns and click Create campaign.

Journey Optimizer

Select Scheduled - Marketing and click Create.

Journey Optimizer

On the campaign creation screen, configure the following:

  • Name: --aepUserLdap-- - CitiSignal Fiber.
  • Description: Fiber campaign
  • Identity type: change to Email

Journey Optimizer

Scroll down to Action. For the Action, select Email.

Journey Optimizer

Then, select an existing Email configuration. You鈥檒l edit the content in a couple of minutes.

Journey Optimizer

Scroll up to Audience. Click Select audience.

Journey Optimizer

For the Audience, select the audience you created in 1.3.3 Create a federated composition, which is named --aepUserLdap-- - CitiSignal Eligible for Fiber. Click Save.

Journey Optimizer

Scroll down to Schedule. For the Schedule, choose On a specific date and time and set a time of choice.

Journey Optimizer

You can now start creating the email message itself. Scroll up, and click Edit content.

Journey Optimizer

You鈥檒l then see this. For the Subject line, use this:

{{profile.person.name.firstName}}, here's your Fiber offer!

Next, click Edit email body.

Journey Optimizer

Choose Design from scratch.

Journey Optimizer

You鈥檒l then see this. In the left menu, you鈥檒l find the structure components that you can use to define the structure of the email (rows and columns).

Drag and drop 4 times a 1:1 column on the canvas, which should give you this structure:

Journey Optimizer

In the left menu, go to Fragments. Drag the header you created earlier onto the first component in the canvas. Drag the footer you created earlier onto the last component in the canvas.

Journey Optimizer

Click the + icon in the left menu. Go to Contents to start adding content onto the canvas.

Journey Optimizer

Drag and drop a Text component on the second row.

Journey Optimizer

Select the default text in that component Please type your text here. and replace it by the below text. Change the alignment to Center alignment.


Hi {{profile.person.name.firstName}}

As a CitiSignal customer, you're in pole position to discover our new Fiber offering. Have a look at the below offer and update your contract!

Stay connected.

Journey Optimizer

Drag and drop an Image component on the 3rd row. Click Browse.

Journey Optimizer

Select the AEM Assets repository that you created as part of previous modules. That repository should be named --aepUserLdap-- - Citi Signal dev. Click to open the folder --aepUserLdap-- - Workfront Assets.

Journey Optimizer

Click to select the image 2048x2048_buynow.png, and click Select.

Journey Optimizer

Your basic newsletter email is now ready. Click Save.

Journey Optimizer

Go back to the campaign dashboard by clicking the arrow next to the subject line text in the top-left corner.

Journey Optimizer

Click Review to activate.

Journey Optimizer

You may then get this error. If that is the case, then you may need to wait up to 24 hours until the audience has been evaluated, and then try to activate your campaign again. You may also need to update the schedule of your campaign to run at a later time.

Journey Optimizer

Click Activate.

Journey Optimizer

Once activated, your campaign will then be scheduled to run.

Journey Optimizer

You have finished this exercise.

Next Steps

Go to 3.5.3 Add Languages to your Email

Go back to Module 3.5

Go back to All modules

recommendation-more-help
aeafc5b5-cd01-4e88-8d47-d76c18d7d349