Optimizely Graph lets you fetch content and sync data from other Optimizely products. For content search, this lets you create custom search tools that transform user input into a GraphQL query and then process the results into a search results page.

Why use Graph for Content Search?

The benefits of a Optimizely Graph-based search service include:

• Faster search results.
• Better error handling.
• More flexibility over search logic.
• Cross-application and cross-platform search capability.

Let’s explore the steps to make this work using the Alloy project. First, obtain the Content graph keys/secret from Optimizely.

Implementation: This involves two steps.

#1: Server side setup and Querying

• Add the content graph keys and secret in the appSettings.json

• Install the Optimizely.ContentGraph.Cms package, and note that the Content Delivery API must also be installed as a prerequisite for the graph to function
  • Highlighted in red are the required packages. Highlighted in green is the initialization of the Content Delivery API and Graph in IServiceCollection. Additional configuration options are available as needed.

• After executing the code, you should see the Optimizely Graph option in the CMS.

• Run the Indexing job from the Content Synchronization option. Once completed, all indexed content types will be visible.
  • The screen below shows the job status, and you can explore the indexed content by clicking the Details link. Highlighted in green are the indexed content types available for querying.

• With this, you should be able to query content in the GraphQL playground by selecting any page content types

#2. Client side setup and Querying

Now that the server-side querying is ready, let’s configure the client side to query from the application code.

• Install the following packages:
  • StrawberryShake.Server
  • StrawberryShake.Transport.Http.

• We also need to install StrawberryShake.Tools on the machine
  • dotnet tool install StrawberryShake.Tools -g
• Next, we’ll create a sample GraphQL query to generate a proxy/schema. Copy the same query from the server-side setup into a .graphql file. Create a Queries folder and place the query file inside it.

• Navigate to the current project folder in the terminal and run the following command, replacing the OptimizelyGraphSingleKeyValue with the key received from Optimizely (as shown in the appSettings step):
  • dotnet-graphql init https://cg.optimizely.com/content/v2?auth={OptimizelyGraphSingleKeyValue} -n AlloyGraphClient

• This will generate three files for the GraphQL schema, as highlighted below..

• The previous step also creates the StrawberryShake Client in the solution, which will be used for querying. The client name will match the namespace provided earlier. Since we used -n AlloyGraphClient, the generated client will be AddAlloyGraphClient
  • Configure the base address to use the Optimizely Single Key value from the graph settings.

• This completes the setup, and we should now be able to use this client for querying in code. The client generates an interface following a similar naming pattern; here, it will be IAlloyGraphClient
  • Inject this interface into the StartPageController and verify the results

• • As we can see, the data is being returned according to the query. This is now ready to be mapped and displayed in the Views.
• GraphQL supports a full range of features, including querying and filtering. It’s easy to verify queries in the playground and apply those changes to the .graphql query file. If you make any additions or modifications to the query, ensure that the latest schema is downloaded when you rebuild the code
  • Following update will show up on build for the new schema update to the code.

We recently completed an upgrade project, and one of the notable changes we made was incorporating TinyMCE into its own NuGet package. With the latest version, several adjustments have been made to the implementation process.

During the upgrade, we also had to relocate a custom plugin within the editor. Since I referred to various online sources to execute this, I’ve documented the process below. The implementation involves two key steps:

Step 1: Configuring TinyMCE in Startup.cs within the ConfigureServices method.

Step 2: Implementing the UI side of the plugin.

To begin, as depicted in the image above, you need to register the JavaScript file as an external plugin and ensure it is accessible via the path specified in the AddExternalPlugin method. In this case, we have a JS file called metricconversion.js, registered as a plugin with the name metricconvert, and it is located under the wwwroot folder according to the provided structure.

Regarding the JS file, it comprises three primary components:

1. Adding the custom plugin as a button in the editor, as exemplified by editor.ui.registry.addButton('metricconvert', {}).
2. Adding an icon to the button. You can select from a range of predefined icons or incorporate a custom icon. For this project, I utilized a custom image as an icon. While the documentation suggests creating or overwriting an icon pack to implement a custom icon (refer to: https://www.tiny.cloud/docs/tinymce/6/creating-an-icon-pack/), I discovered that the method outlined below also works if you simply want to add a single icon other than an SVG. For instance: editor.ui.registry.addIcon('metric', '<img src="/ClientResources/TinyMce/MetricConversion/images/metric.png" />');.
3. Integrating the necessary logic within the onAction method.

The final outcome involves:

• A customized button on the editor accompanied by an icon.

• A sample validation error message displayed upon button click, if no value is selected.

• Enter a metric and click button to print converted value (e.g., converting 15ft to meters)

To facilitate the transition to the latest version of TinyMCE, it’s important to note that several toolbars have been renamed. For more information regarding these changes, you can refer to the following link: TinyMCE Documentation.

This resource will provide you with the necessary insights on the renamed toolbars and their corresponding new names, helping you to adapt to the latest version seamlessly.

The Optimizely Data Platform (ODP) and Google Tag Manager (GTM) are powerful tools for collecting and analyzing data. ODP provides insights into customer behavior, while GTM simplifies managing marketing tags without modifying website code.

What is ODP: ODP allows businesses to collect, aggregate, and analyze data from various sources. It helps optimize marketing campaigns, enhance customer engagement, and drive business growth.

What is GTM?: GTM is a free tool that installs and manages marketing tags without changing website code. It simplifies tracking user actions and collecting data.

In this article we are going to explore simple integration to ODP through Google tag manager as connector. To integrate GTM with ODP, follow these two steps:

Integrating GTM with ODP – Step 1:

• Create a GTM account at (https://tagmanager.google.com/ ) and set up a container in GTM
• Include the GTM script/code in the application’s head section.

• GTM works by creating Tags that performs/tracks activity based on a trigger.

Integrating GTM with ODP – Step 2:

• Suppose you have a button on your homepage labeled “Join Us” and you want to track clicks in ODP.
• Log in to GTM and create a new tag under the “Tags” section.
• In the tag configuration section, select “Custom HTML” as the tag type and paste the ODP script code generated from the Optimizely ODP platform.
  • The ODP JavaScript can be fetched from ODP website as shown below at following path. –> Settings –>Integration –> Google Tag Manager –> JavaScript

• • Note: The provided sample code tracks page views, but you can customize it to track button clicks or other events as needed. The ODP JavaScript code can be obtained from the ODP website under Settings -> Integration -> Google Tag Manager -> JavaScript.

• Next, create a trigger for the tag. Go to GTM -> Triggers -> New and choose the trigger type (e.g., Click – All Elements).

• • Specify the trigger details, such as using a CSS class click ID and setting the value as “login-button” (or any other unique identifier relevant to your site).

• • Finally, associate the trigger with the tag you created.

• Once the tag is published in GTM, all clicks on the specified button will be recorded in ODP.

Conclusion:

• By utilizing the Optimizely Data Platform (ODP) in conjunction with Google Tag Manager (GTM),
  • Businesses can effectively collect and analyze data from various sources, gaining valuable insights into customer behavior and preferences.
  • GTM simplifies the process of installing, managing, and tracking marketing tags without the need to modify website code.
• This seamless integration empowers organizations to make
  • Data-driven decisions,
  • Optimize marketing campaigns,
  • Enhance customer engagement, and ultimately drive business growth.