Developers
Help CenterCommunityStatus

Install Library for SPA

Install Personalization Library for SPA

Suggest Edits

In order to display personalized content or product recommendations on the zones of your Single-Page Application (SPA), you need to install the Personalization Library and then add the personalization code to the website zones.
In this topic, we will see how to install the Library for a Single-Page Application.

Prerequisites

  • You must have the permissions to edit the channel (website).
  • To execute the npm commands, you must install Node Package Manager. NPM is included with the recent versions of Node.js. For more information, see Install NPM
  • You must have access to the Acoustic Artifactory to download the Library package.

Step 1: Update the .npmrc file for authorization

  1. Log in to Acoustic Artifactory. Click your user name and then click Edit Profile.
189
  1. From the Authentication Settings, copy the API key.
417
  1. Run the following command on the Git bash or on any terminal that allows curl commands, using your Acoustic credentials. This command creates the .npmrc file using the specified credentials.
curl -u <<Acoustic_OKTA_ID>>:<<api-key>>
 https://artifactory.acoustic.co/artifactory/api/npm/pzn-public-npm-virtual/auth/acoustic >> ~/.npmrc
  1. Navigate to your user profile folder, usually located in the operating system drive.
  2. Open the .npmrc file located in the user profile folder.
  • Windows: The file is located in the USERPROFILE folder of the logged-in user. You can use any text editor such as Notepad to open the file.
  • UNIX: The file is located in the /app directory. You can use any text editor such as vi editor to open the file.
    The file displays the registry changes. New value for the registry is:
@<SCOPE>:registry=https://artifactory.acoustic.co/artifactory/api/npm/pzn-public-npm-virtual/
  //artifactory.acoustic.co/artifactory/api/npm/pzn-public-npm-virtual/:_password=<<BASE64_PASSWORD>>
  //artifactory.acoustic.co/artifactory/api/npm/pzn-public-npm-virtual/:username=<<USERNAME>>
  //artifactory.acoustic.co/artifactory/api/npm/pzn-public-npm-virtual/:email=<<[email protected]>>
  //artifactory.acoustic.co/artifactory/api/npm/pzn-public-npm-virtual/:always-auth=true

Tip:
If you see an error similar to the following in the .npmrc file:

{"errors" : [{"status": 401,"message":"Bad credentials"}]}

In such a scenario, you should remove the output generated due to incorrect credentials, and re-run the curl command using correct credentials.

Step 2: Install the Library

You can install the Personalization Library using one of the following methods.

📘

Not sure which version to go for?

The Library versions topic has more details about what these versions mean.

In each case, ensure that you run the command from the root directory of the application.

Install the Stable version

Run the following command to install the Stable version of Personalization Library.

npm install --save @acoustic/personalization@stable

Install the Latest version

Run the following command to install the Latest version of the Library.

npm install --save @acoustic/personalization

When you run this command, the latest (that is, the most recent) version of the Library is fetched from Artifactory and installed.

Install a specific version

Run the following command to install the deployed packages with a specific version.
The example illustrates the command to install the version 2.2.0.

npm install --save @acoustic/personalization@version

npm install --save @acoustic/[email protected]

📘

During the installation, you might see some warning messages in the console window. You can safely ignore these warnings as they do not impact the package installation.

Personalization Library is now installed! You can verify the installation by running the following command.

npm list @acoustic/personalization

The console output displays the Personalization Library version.

530

Troubleshooting

If you face issues in installing or upgrading the Personalization library version, try the following steps:

  1. Uninstall the previous library version. Use this command: npm uninstall @acoustic/personalization
  2. Optional: You can also clear the entire NPM cache in your web site.
  3. Next, perform a fresh install of the required library version.
  4. If the issue persists, restart your code editor, and then re-try the installation by specifying the version number. For example, npm install @acoustic/[email protected]

Next steps

After you have installed the Personalization Library, the next step is to configure the zones of your SPA channel to display the personalized content or product recommendations. Based on the type of your channel (Angular SPA or React SPA), choose the relevant topic from the following list.

Updated about 1 year ago